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
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
como checo el codigo Sergio
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!
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?
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
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.
muchas gracias se te agradecera muchisimo el post para insertar eventos :)
hola tengo un problema cuando arreglo todo para conectar y extraer mis datos de la base no me muestra ningun evento
no inserta evento en la base de datos
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
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
hola a migos hay alguna forma de cambiar el formato de fecha JSON
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
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 ?
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.