Calendario Bootstrap con JQuery

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


Deja tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

  1. Responsable de los datos: Miguel Ángel Gatón
  2. Finalidad de los datos: Controlar el SPAM, gestión de comentarios.
  3. Legitimación: Tu consentimiento
  4. Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  5. Almacenamiento de los datos: Base de datos alojada en Occentus Networks (UE)
  6. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

      David Z dijo

    como checo el codigo Sergio

         Sergio Ródenas dijo

      El código ya está comprobado! Lo único, has de crear tu la tabla «events» en tu base de datos con los siguientes campos: {id | inicio | final | nombre | clase | url} y configurar el acceso a tu base de datos!

           ros dijo

        he cambiado esas varibles por otras, y me ha permitido agregar el evento ami base de datos, ero nola veo reflejada en el calendario. y como podria recuperar los datos de los eventos dependiendo del dia al que le de clic e nel calendario?

      jose luis zamudio (@JoseZami) dijo

    para hacer y realizar la creacion de eventos entonces se debe de crear una base de datos, pero sobre que aparto es que puedo yo anexarle eventos y como predetermino el lenguaje a español porque esta definido como ingles de manera predeterminada

         Sergio Ródenas dijo

      Para predeterminar el lenguaje a Español lo mejor es que sustituyas las cadenas existentes en el fichero de idioma español por las existentes en inglés en el archivo calendar.js . No obstante, hay otros métodos más pulcros, puedes encontrarlos en la web principal del script o en la comunidad Github, anexadas a este post.
      Además, tratare de subir un nuevo post en unas semanas dónde explicaré cómo crear la inserción de eventos en la base de datos.

      jose luis zamudio (@JoseZami) dijo

    muchas gracias se te agradecera muchisimo el post para insertar eventos :)

      jair dijo

    hola tengo un problema cuando arreglo todo para conectar y extraer mis datos de la base no me muestra ningun evento

      diego dijo

    no inserta evento en la base de datos

      Gonza dijo

    Podrias publicar como insertar eventos? en los campos start y end que tipo de dato es? timestamp? sobran «0», necesito insertar y poder editar los eventos. Gracias

      Juean dijo

    CREATE DATABASE IF NOT EXISTS `bootstrap_calendar` /*!40100 DEFAULT CHARACTER SET utf8 COLLATE utf8_spanish_ci */;
    USE `bootstrap_calendar`;
    — MySQL dump 10.13 Distrib 5.6.13, for Win32 (x86)

    — Host: 127.0.0.1 Database: bootstrap_calendar
    — ——————————————————
    — Server version 5.5.27

    /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
    /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
    /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
    /*!40101 SET NAMES utf8 */;
    /*!40103 SET @OLD_TIME_ZONE=@@TIME_ZONE */;
    /*!40103 SET TIME_ZONE=’+00:00′ */;
    /*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
    /*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
    /*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE=’NO_AUTO_VALUE_ON_ZERO’ */;
    /*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;


    — Table structure for table `events`

    DROP TABLE IF EXISTS `events`;
    /*!40101 SET @saved_cs_client = @@character_set_client */;
    /*!40101 SET character_set_client = utf8 */;
    CREATE TABLE `events` (
    `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
    `title` varchar(150) COLLATE utf8_spanish_ci DEFAULT NULL,
    `body` text COLLATE utf8_spanish_ci NOT NULL,
    `url` varchar(150) COLLATE utf8_spanish_ci NOT NULL,
    `class` varchar(45) COLLATE utf8_spanish_ci NOT NULL DEFAULT ‘info’,
    `start` varchar(15) COLLATE utf8_spanish_ci NOT NULL,
    `end` varchar(15) COLLATE utf8_spanish_ci NOT NULL,
    PRIMARY KEY (`id`)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci;
    /*!40101 SET character_set_client = @saved_cs_client */;


    — Dumping data for table `events`

    LOCK TABLES `events` WRITE;
    /*!40000 ALTER TABLE `events` DISABLE KEYS */;
    /*!40000 ALTER TABLE `events` ENABLE KEYS */;
    UNLOCK TABLES;
    /*!40103 SET TIME_ZONE=@OLD_TIME_ZONE */;

    /*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
    /*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
    /*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;
    /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
    /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
    /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
    /*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;

    — Dump completed on 2014-05-31 14:38:23

      juan77 dijo

    hola a migos hay alguna forma de cambiar el formato de fecha JSON

      giselabra dijo

    Muy bueno el calenario, solo que al agregar un nuevo evento la fecha que me toma por defecto tanto en inicio como fin esta en formato ingles, como hago para cambiarlo al español? Seria DD/MM/AAAA. Muchas gracias y saludos

      Fabian dijo

    Hola, muy bueno el calendario , pero al actualizaar una fecha no se refleja inmediatamente en elcalendario. Que puedo hacer ?

    Tengo otro problema tambien , como puedo hacer para que se visualicen todos los puntos en la vista mensual, es posible agrandar el cuadrado ? que corresponde a un dia ?

      Alex dijo

    Tengo el problema que de manera local al cargar el ejemplo me funciona perfectamente pero cuando lo cargo a un servidor en linea no me muestra nada del calendario solo los botones. Alguna idea de que puede ser o que esta mal en el servidor para arreglarlo por favor.