[contact-form-7 id="24084" title="Feedback ES"]

Plantillas Destacadas

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

Este tutorial puede ayudarle a trabajar con el plugin FullCalendar incluido en algunas plantillas con animación JS.

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

FullCalendar es un plugin de jQuery que ofrece un calendario de tamaño completo, con la función de ‘arrastrar y soltar’. Se utiliza AJAX para traer eventos en la marcha cada mes y se puede configurarlo fácilmente.

Uso Básico

Si su plantilla contiene este calendario, esto significa que el plugin ya está integrado con los ficheros CSS y JavaScript correctos, incluyendo la hoja de estilo FullCalendar, y los ficheros JS de FullCalendar y jQuery, en la sección <head> de su página:

<link rel="stylesheet" href="css/fullcalendar.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/fullcalendar.min.js"></script>

Junto con las dependencias, su página web también debe tener el código JavaScript que inicializa el calendario. Este código debe ser ejecutado después de la inicialización de la página con la ayuda de la función jQuery’s $(document).ready entre las etiquetas <script> en la parte superior de su página:

<script type='text/javascript'>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
</script>

y:

  1. El método new Date() crea una nueva fecha con la fecha y la hora actuales
  2. El método getDate() muestra el día del mes (1 – 31) para la fecha especificada
  3. El método getMonth() muestra el mes (0 – 11) para la fecha especificada según la hora local (уnero es 0, febrero es 1, y así sucesivamente)
  4. El método getFullYear() muestra el año (cuatro dígitos) de la fecha especificada. (Por ejemplo: 2013).

Otra parte del código:

		$('#calendar').fullCalendar({
			editable: true,
			weekMode: 'liquid',
			url:'#',

  1. editable– determina si se puede modificar los eventos en el calendario
  2. weekMode – determina el número de semanas que se muestran. También determina la altura de cada semana. Sus opciones disponibles:
    • ‘fixed’– el calendario siempre estará 6 semanas de altura. La altura será siempre la misma, como es determinado por height, contentHeight, o aspectRatio.
    • ‘liquid’ – el calendario tendrá 4, 5 o 6 semanas, dependiendo del mes. La altura de las semanas se estira para llenar la altura disponible, según lo determinado por height, contentHeight, o aspectRatio.
    • ‘variable’ – el calendario tendrá 4, 5 o 6 semanas, dependiendo del mes. Cada semana tendrá la misma altura constante, es decir, la altura del calendario cambiará cada mes.
  3. url:’#’, – FullCalendar puede mostrar eventos del calendario Google Calendar. Él puede funcionar como un motor que gestiona y almacena persistentemente datos de eventos (una característica que FullCalendar no tiene actualmente).

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:

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