vistas full example ejemplos data javascript jquery fullcalendar

javascript - example - Los eventos de FullCalendar se muestran solo en la vista mensual



fullcalendar parameters (3)

Estoy usando FullCalendar http://fullcalendar.io/ para mostrar algunos eventos en una página web.

El calendario se crea así.

$(''#calendar'').fullCalendar({ header: { left: ''prev,next today'', center: ''title'', right: ''month,agendaWeek,agendaDay'' }, allDayDefault: false, selectable: true, selectHelper: true, editable: true, eventLimit: true, // allow "more" link when too many events });

Los eventos se crean a través de la operación renderEvent (no json feed) como

$(''#calendar'').fullCalendar(''renderEvent'', newEvent, ''stick'');

donde se crea el newEvent como este

newEvent = { title : ''mytitle'', start : startDate, allDay: false, id: eventId, description: ''my test event'' };

el problema es que los eventos se muestran correctamente en la vista mensual pero no se muestran en las vistas semanales o diarias.

ACTUALIZAR

Estoy usando este formato de fecha: 2015-02-01T01: 00: 00


He creado un plunker reproduciendo tu código . El único problema que veo en su código es una coma esperada en la creación del evento.

Así que creo el evento con un nuevo objeto de momento, que significa ahora.

var startDate = moment(); var eventId = 123; var newEvent = { title : ''mytitle'', start : startDate, allDay: false, id: eventId, //Is this comma that was missing in your code description: ''my test event'' };

Y lo agrego con el mismo código que estás haciendo:

$(''#calendar'').fullCalendar(''renderEvent'', newEvent, ''stick'');

Como puede comprobar en el plunker, todo funciona bien, por lo que el único problema que el código que nos proporcionó podría ser:

  • La coma que falta.
  • La variable eventId es incorrecta
  • La variable startDate es incorrecta

Además, si echa un vistazo a la documentación para el evento de render, no está utilizando la variable ''stick'' correctamente. Debe ser un booleano. Su código funciona porque, como puede verificar en la línea 9229 la versión 2.3.1, se compara como expresión, por lo que cualquier cadena (no vacía) será verdadera. Puede obtener más información sobre esto en esta respuesta: https://.com/a/4923684/2686163

Por lo tanto, si establece la tercera barra de parámetros como:

  • cierto
  • ''palo''
  • ''antiadherente''
  • ''falso''
  • ''lo que sea''

... siempre se resuelve como pegajoso y se agrega a stickySource . Pero, como lo comenta @slicedtoad, debe cambiarlo para evitar problemas en futuras versiones.


Hice el fiddle usando tu código con alguna modificación de mi lado. Está funcionando bien. Espero que funcione para usted. Sus aportaciones son bienvenidas.

Código

HTML

<body> <div id=''calendar''></div> </body>

GUIÓN

<script type=''text/javascript''> $(document).ready(function(){ fullCalObj = $(''#calendar'').fullCalendar({ header: { left: ''prev,next today'', center: ''title'', right: ''month,agendaWeek,agendaDay'' }, allDayDefault: false, selectable: true, selectHelper: true, editable: true, eventLimit: true, // allow "more" link when too many events }); var newEvent = { title : ''mytitle'', start : ''2015-04-22'', allDay: false, id: 1, description: ''my test event'' }; fullCalObj.fullCalendar(''renderEvent'', newEvent, ''stick''); }); </script>


No hay nada malo con su código. Pero estás haciendo algunas cosas de una manera no estándar. Intenta arreglarlos y el problema puede desaparecer.

El método que está utilizando para agregar eventos no es el correcto. En la terminología de FullCalendar, render significa el proceso de mostrar datos en el calendario. Así que cuando renderEvent , solo le dices que muestre un evento en la pantalla. Y luego el stick hace persistir (tipo de).

En su lugar, debe utilizar addEventSource . Se puede utilizar para agregar cualquier origen de evento (local o remoto). Y un eventSource puede ser cualquier cosa, desde un feed JSON hasta una matriz local de un evento.

Esto debería funcionar:

$(''#calendar'').fullCalendar(''addEventSource'',[{ title : ''mytitle'', start : startDate, allDay: false, id: eventId, description: ''my test event'' }]);

Eso te da un evento que durará toda la sesión. También tiene la ventaja de jugar bien con todas las demás opciones de calendario completo y devoluciones de llamada.