Plantillas con animación JS. ¿Cómo se puede trabajar con el plugin FullCalendar?

Para obtener más información visite http://arshaw.com/fullcalendar/docs/display/

El objeto de origen de evento. "event source" es todo que envia datos sobre eventos a FullCalendar. Desde la versión 1.5, los objetos de eventos pueden tener “opciones” asociadaos con ellos:

eventos: [
				{
					title: 'Praent vestibulum',
					start: new Date(y, m, 1, 9, 00),
					end: new Date(y, m, 1, 10, 00),
					allDay: false
				},
				{
					title: 'Vestibulum iaculis lacinia',
					start: new Date(y, m, 2, 16, 00),
					allDay: false
				},
				{
					title: 'Integer rutrum ante eu lacus',
					start: new Date(y, m, 4, 16, 00),
					allDay: false
				},
				{
					title: 'Aliquam erat volpat. Duis ac turpis',
					start: new Date(y, m, 9, 16, 00),
					allDay: false
				},
				{
					title: 'Donec in velit vel ipsum',
					start: new Date(y, m, 10, 16, 00),
					allDay: false
				},
				{
					title: 'Praent vestibulum',
					start: new Date(y, m, 13, 9, 00),
					allDay: false
				},
				{
					title: 'Vestibulum iaculis lacinia',
					start: new Date(y, m, 15, 16, 00),
					allDay: false
				},
				{
					title: 'Integer rutrum ante eu lacus',
					start: new Date(y, m, 17, 16, 00),
					allDay: false
				},
				{
					title: 'nteger rutrum ante eu lacusi',
					start: new Date(y, m, 18, 16, 00),
					allDay: false
				},
				{
					title: 'Integer rutrum ante eu lacus',
					start: new Date(y, m, 19, 16, 00),
					allDay: false
				},
				{
					title: 'Integer rutrum ante eu lacus',
					start: new Date(y, m, 23, 16, 00),
					allDay: false
				},
				{
					title: 'nteger rutrum ante eu lacus',
					start: new Date(y, m, 24, 16, 00),
					allDay: false
				},
				{
					title: 'Integer rutrum ante eu lacus',
					start: new Date(y, m, 27, 16, 00),
					allDay: false
				},
				{
					title: 'Integer rutrum ante eu lacus',
					start: new Date(y, m, 28, 16, 00),
					allDay: false
				},
				{
					title: 'Vestibulum iaculis lacinia',
					start: new Date(y, m, 29, 16, 00),
					allDay: false
				},
				{
					title: 'Praent vestibulum',
					start: new Date(y, m, 30, 9, 00),
					allDay: false
				}
			]
		});
		
	});
    </script>

Para mostrar los nuevos eventos, Usted puede editar los objetos regulares de JavaScript que FullCalendar utiliza para guardar información acerca de un evento del calendario. Usted puede copiarlos para añadir mas eventos. Presentamos un ejemplo de la parte del código que necesita ser editado o copiado:

				{
					title: 'Praent vestibulum',
					start: new Date(y, m, 1, 9, 00),
					end: new Date(y, m, 1, 10, 00),
					allDay: false
				},
                

Vamos a revisar las propiedades:

1. title (String. Required) – el texto en un elemento de un evento. Por ejemplo se puede reemplazarlo por ‘A new event’,
2. start (Date. Required) – la fecha/hora del inicio de evento. Por ejemplo, si Usted va a añadir una nueva actividad con la fecha 05.23 que comienza a las 16:30, la línea debe ser modificada de la manera: start: new Date(y, m, 23, 16, 30);
3. allDay (true o false. Optional) – si un evento ocurre a la hora específica del día. Esta propiedad determina si se muestra el tiempo de un evento. Al especificar Event Objects (objetos de eventos) para eventos o eventSources, la falta de la propiedad determina que ella será usada desde allDayDefault, que es ‘true’ por lo general.
4. end (Date. Optional) – la fecha/hora final de evento.

• Si un evento es all-day (para todo el día) … la fecha de finalización es inclusiva. Esto significa que un evento con el inicio 10 de noviembre y la finalización 12 de noviembre tendrá una duración de 3 días en el calendario.
• Si un evento NO es all-day (NO para todo el día)… la fecha de finalización es exclusiva. Esto significa que su evento termina en la medianoche, y no se mostrará el día siguiente.

Otros eventos que se puede utilizar http://arshaw.com/fullcalendar/docs/event_data/Event_Object/

El código se basa en un elemento con id de “calendario” en el cuerpo de su página. El calendario será colocado dentro de este div:

Todo esto le permite ver un calendario de mes con algunos eventos en él.

Opciones

La mayor parte de la documentación de FullCalendar describe las opciones que afectan la apariencia o el funcionamiento del calendario. Las opciones se fijan generalmente cuando se inicializa el calendario:

$('#calendar').fullCalendar({
weekends: false // will hide Saturdays and Sundays
});

Callbacks

Callbacks son una especie de opciones similares, pero son las funciones que se muestran cada vez que sucede algo especial. En el ejemplo de este tutorial, un cuadro de alerta aparecerá cada vez que el usuario hace clic en un día:

$('#calendar').fullCalendar({

    dayClick: function() { 

        alert('a day has been clicked!');

    }

});

Para obtener más información sobre el plugin FullCalendar se puede visitar http://arshaw.com/fullcalendar/. Aquí se puede descargar las últimas versiones de los plug-ines y pedir ayuda de los desarrolladores.

Por favor, revise el tutorial: