BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Calendario de eventos en jQuery y HTML5 responsive

10/OCT/2013 54.431 visitas Ver comentarios
Calendario de eventos en jQuery y HTML5 responsive

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

El siguiente código es para mostrar por pantalla un sencillo calendario, muy personalizable y adaptable a las diferentes resoluciones ya que todos los valores están expresados en EM o porcentajes (únicamente su alto está expresado en pixels para mantener el espacio fijo).

Está basado en el Flatmin responsive calendar que encontré desde la web de plugins de jQuery (todo el crédito es para Eric Wennerberg), pero al intentar hacer una demo, me he dado cuenta que tiene varios fallos que voy a comentar a continuación.

Antes que nada, tenemos que tener en cuenta que el calendario está totalmente basado en divs, usando atributos DATA para obtener los eventos y los días seleccionables, el cambio de mes, botones e incluso todo el contenido está hecho en javascript con lo que no debería haber impedimentos para que funcionase en cualquier navegador.

Vamos con las virtudes

  • Es liviano ya que combinando JS y CSS pesa sobre 10 kb (en versión compacta).
  • Es personalizable (he modificado casi todo su CSS para personalizarlo a mi gusto quitando las cosas innecesarias).
  • Es bonito
  • Es adaptativo (usando porcentajes y no media queries)
  • El uso de CSS3 no depende del navegador (he quitado todas las funciones de cálculo de ancho y alto de la hoja CSS y sólo mantiene una animación al pasar el ratón por la barra del mes)
  • Los eventos se crean mediante divs indicando valores (mira el código 2 más abajo).

Y ahora vamos con los defectos

  • El autor se olvidó nombrar los días de la semana (lo he agregado yo en mi demo)
  • El CSS muestra los días con un display: inline-block entre divs... lo que genera un margen extra entre uno y otro. Lo he modificado para que desaparezca
  • El widget debe contener el data-color (normal en este caso) obligatoriamente. Si lo quitas, el calendario no se ve
  • El CSS original del autor no está completo y si lo pones tal cual te lo descargas, verás el calendario muy distinto al que se ve en su web.

Limitaciones...

  • No pueden deseleccionarse meses.
  • No pueden seleccionarse rangos de fechas.
  • No puede seleccionarse ninguna fecha menor a 1970.

Y no hay mucho más que contar, mira la demo pulsando en el botón azul, coméntame cualquier cosa que veas y si te gusta mi personalización, no dejes de compartirla en tus redes sociales así lo volvemos viral :)

Código 1 - HTML
<div class="calendar" data-color="normal">
	<div data-role="day" data-day="2013910">
		<div data-role="event" data-name="This is an event" data-start="9.00" data-end="9.30" data-location="The Web"></div>
		<div data-role="event" data-name="This is also an event" data-start="10.00" data-end="11.00" data-location="At Home"></div>
	</div>
</div>
Código 2 - JAVASCRIPT
var yy;
	var calendarArray =[];
	var monthOffset = [6,7,8,9,10,11,0,1,2,3,4,5];
	var monthArray = [["ENE","enero"],["FEB","Febrero"],["MAR","Marzo"],["ABR","Abril"],["MAY","Mayo"],["JUN","Junio"],["JUL","Julio"],["AGO","Agosto"],["SEP","Septiembre"],["OCT","Octubre"],["NOV","Noviembre"],["DIC","Diciembre"]];
	var letrasArray = ["L","M","X","J","V","S","D"];
	var dayArray = ["7","1","2","3","4","5","6"];
	$(document).ready(function() {
		$(document).on('click','.calendar-day.have-events',activateDay);
		$(document).on('click','.specific-day',activatecalendar);
		$(document).on('click','.calendar-month-view-arrow',offsetcalendar);
		$(window).resize(calendarScale);
		$(".calendar").calendar({
			"2013910": {
				"Mulberry Festival": {
					start: "9.00",
					end: "9.30",
					location: "London"
				}
			}
		});
		calendarSet();
		calendarScale();
		});

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 21 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018