Calendario Bootstrap con JQuery

Sergio Ródenas

2 minutos

calendario-bootstrap

Cada vez nos impresiona mas la inmensa comunidad que gira entorno a Bootstrap, un framework CSS muy conocido , creado por Twitter. Esta vez os presento un calendario basado en Bootstrap programado con Javascript y JQuery, además os explicare con detalle parte el funcionamiento del calendario y añadiré algunos trucos y mejoras que le podréis hacer.

Este calendario Bootstrap tiene un diseño limpio y es totalmente responsive, se verá bien desde todos los dispositivos! También incorpora una traducción a mas de 7 idiomas y todas las fechas festivas de cada país están resaltadas y apuntadas. Todo un lujo!

El funcionamiento de este Calendario Bootstrap es algo complejo, extrae las fechas del usuario de un archivo JSON inicialmente, pero, de manera exclusiva para los usuarios de Creativos Online, explicaré como extraer los eventos desde una base de datos MYSQL para su perfecta implementación en cualquier sistema.

Conocido sistema de Base de Datos

Conocido sistema de Base de Datos

Funciones de los archivos principales de la aplicación:

INDEX.HTML

  • Carga de Bootstrap 2.3.2
  • Diseño del Calendario
  • Lista de Eventos
  • Navegación por el Calendario
  • Diferentes vistas del Calendario (Día/Semana/Mes/Año)
  • Carga de la aplicación en JS
  • Selección de Idioma

INDEX-BS3.HTML

  • Carga de Bootstrap 3.0
  • Diseño del Calendario
  • Lista de eventos
  • Navegación por el Calendario
  • Diferentes vistas del calendario (Día/Semana/Mes/Año)
  • Carga de la aplicación en JS
  • Selección de Idioma

EVENTS.JSON.PHP

  • Listado de Eventos con los siguientes datos:
    • id: identificador del evento
    • title: título del evento
    • url: dirección url del evento
    • class: tipo de evento (info|warning|…) para posteriores colores.
    • start: fecha de inicio
    • end: fecha de terminio

APP.JS

  • Variables que almacenan la configuración de la aplicación.
  • Funciones JQuery extras

CALENDAR.JS

  • Configuraciones principales de la aplicación
  • Funciones principales del Calendario
  • Extracción y Tratado de eventos
  • Fechas festivas
  • Carga de Idioma
  • Carga de la lista de Eventos
  • Carga de las diferentes vistas del Calendario (Día/Semana/Mes/Año)

CALENDAR.CSS

  • Estilos del Calendario
  • Estilos de la lista de eventos
  • Estilos del Calendario para otros dispositivos

Extraer eventos de una base de datos

Para extraer los eventos de una base de datos MYSQL sustituiremos las lineas del archivo events.json.php por:

<?php

$link=mysql_connect("localhost", "usuariodeacceso", "contraseñadeacceso");
mysql_select_db("basededatos",$link) OR DIE ("Error: No es posible establecer la conexión");
mysql_set_charset('utf8');

$eventos=mysql_query("SELECT * FROM events'",$link);

while($all = mysql_fetch_assoc($eventos)){
$e = array();
$e['id'] = $all['id'];
$e['start'] = $all['inicio'];
$e['end'] = $all['final'];
$e['title'] = $all['nombre'];
$e['class'] = $all['clase'];
$e['url'] = $all['url'];
$result[] = $e;
}

echo json_encode(array('success' => 1, 'result' => $result));

?>

Github | Bootstrap Calendar

Descarga | Calendario Bootstrap

Más información | Bootstrap: Framework CSS