Calendario para jQuery permite un calendario flexible y receptivo en su sitio web

Si necesitas publicar eventos, aniversarios, cualquier cosa que implique una fecha o rango de fechas, es recomendable hacerlo en forma de calendario visual. Eso es exactamente lo que promete lograr el complemento Calendario de jQuery. Calendario integra un calendario con una vista mensual en cualquier sitio web y es flexible y personalizable. Los datos que se mostrarán se pueden transferir fácilmente a través de JavaScript.

Un ejemplo de la apariencia de Calendario

Comience con un contenedor vacío y una línea de JavaScript

Para integrar un calendario impulsado por Calendario en su forma mínima, necesitamos un contenedor DIV vacío que sirva como marcador de posición para el calendario:

<div id="calendar" class="fc-calendar-container"></div>

La ID se usa para activar el complemento en un DIV específico. Luego, el complemento se ocupa de llenar el DIV con el código fuente del calendario, una matriz de DIV y SPAN para mostrar los días individuales en el resumen mensual típico:

$("#calendar" ).calendario();

El diseño de su calendario se puede personalizar fácilmente usando CSS, La clase fc-calendar-container pone en vigor el diseño estándar. Esto se puede personalizar en cualquier momento. Varias opciones, llamadas en combinación con la activación del complemento, permiten una configuración detallada. De esta manera puede elegir el mes y el año del calendario. Si no llama explícitamente a un mes y año específicos, se toma la fecha actual para mostrar:

$("#calendar" ).calendario({
  month: 3,
  year: 2014
});

El ejemplo anterior muestra marzo de 2014. Incluso puede cambiar los nombres de los días y los meses para que el Calendario se adapte a su idioma hablado. Calendario tiene dos arreglos para esta tarea:

$("#calendar" ).calendario({
  weeks: ["Sonntag", "Montag", …],
  months: ["Januar", "Februar", …]
});

El ejemplo anterior cambia los días de la semana y los nombres de los meses en inglés predeterminados al idioma alemán. Como un calendario sin fechas no sería muy interesante, Calendario viene con una variable que se puede usar para tomar una lista de fechas. Estas fechas se mostrarán automáticamente en el día correcto en el mes y año correctos:

$("#calendar" ).calendario({
  caldata = {
    "12-31-2012": "New Year's Eve",
    "01-01-2013": "New Year"
});

Vista de lista en diseños adaptables

Normalmente, el calendario constará de siete columnas, una para cada día de la semana. Cuanto menor sea el tamaño de la pantalla, menor será la resolución, más difícil será leer el calendario. Calendario responde a pantallas más pequeñas. Si la resolución no es suficiente para mostrar siete días en siete filas, el diseño recurre a una vista de lista.

Vista de lista en resoluciones más pequeñas

Conclusión: con el mínimo esfuerzo Calendario pone un calendario muy decente, que se puede personalizar fácilmente. La integración en cualquier sitio web es simple y su diseño receptivo hace que funcione incluso en clientes móviles. ¿Qué más podrías querer?

(dpe)