Cada vegada ens impressiona mes la immensa comunitat que gira al voltant de Bootstrap, un framework CSS molt conegut , Creat per Twitter. Aquest cop us presento un calendari basat en Bootstrap programat amb Javascript i JQuery, A més us explicaré amb detall part el funcionament de l'calendari i afegiré alguns trucs i millores que li podreu fer.
Aquest calendari Bootstrap té un disseny net i és totalment sensible, Es veurà bé des de tots els dispositius! També incorpora una traducció a mes de 7 idiomes i totes les dates festives de cada país estan ressaltades i apuntades. Tot un luxe!
El funcionament d'aquest Calendari Bootstrap és una mica complex, extreu les dates de l'usuari d'un arxiu JSON inicialment, però, de manera exclusiva per als usuaris de Creatius Online, explicaré com extreure els esdeveniments des d'una base de dades MYSQL per la seva perfecta implementació en qualsevol sistema.
Conegut sistema de Base de Dades
Funcions dels arxius principals de l'aplicació:
Índex
index.html
- Càrrega de Bootstrap 2.3.2
- Disseny de l'Calendari
- Llista d'Esdeveniments
- Navegació pel Calendari
- Diferents vistes de l'Calendari (Dia / Setmana / Mes / Any)
- Càrrega de l'aplicació en JS
- Selecció d'idioma
INDEX-BS3.HTML
- Càrrega de Bootstrap 3.0
- Disseny de l'Calendari
- Llista d'esdeveniments
- Navegació pel Calendari
- Diferents vistes de l'calendari (Dia / Setmana / Mes / Any)
- Càrrega de l'aplicació en JS
- Selecció d'idioma
EVENTS.JSON.PHP
- Llistat d'Esdeveniments amb les següents dades:
- identificador: identificador de l'esdeveniment
- títol: títol de l'esdeveniment
- uRL: adreça url de l'esdeveniment
- classe: tipus d'esdeveniment (info | warning | ...) per a posteriors colors.
- iniciar: data d'inici
- final: data de termini
APP.JS
- Variables que emmagatzemen la configuració de l'aplicació.
- Funcions JQuery extres
CALENDAR.JS
- Configuracions principals de l'aplicació
- Funcions principals de l'Calendari
- Extracció i Tractat d'esdeveniments
- dates festives
- Càrrega d'idioma
- Càrrega de la llista d'Esdeveniments
- Càrrega de les diferents vistes de l'Calendari (Dia / Setmana / Mes / Any)
CALENDAR.CSS
- Estils de el Calendari
- Estils de la llista d'esdeveniments
- Estils de el Calendari per a altres dispositius
Extreure esdeveniments d'una base de dades
Per extreure els esdeveniments d'una base de dades MYSQL substituirem les línies de l'arxiu events.json.php per:
<?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 Calendari
Descàrrega | calendari Bootstrap
Més informació | Bootstrap: Framework CSS
com txec el codi Sergio
El codi ja està comprovat! L'única cosa, has de crear el teu la taula «events» en la teva base de dades amb els següents camps: {id | inici | final | nom | classe | URL} i configurar l'accés a la base de dades!
he canviat aquestes varibles per unes altres, i m'ha permès afegir l'esdeveniment ami base de dades, ero nola veig reflectida al calendari. i com podria recuperar les dades dels esdeveniments depenent de el dia a què li de clic i nel calendari?
per fer i realitzar la creació d'esdeveniments llavors s'ha de de crear una base de dades, però que aparell és que puc jo annexar esdeveniments i com va predeterminar el llenguatge a espanyol perquè aquesta definit com engonals per defecte
Per predeterminar el llenguatge a Espanyol el millor és que substitueixis les cadenes existents en el fitxer d'idioma espanyol per les existents en anglès a l'arxiu calendar.js. No obstant això, hi ha altres mètodes més pulcres, pots trobar-los en la web principal de l'script oa la comunitat Github, annexes a aquest post.
A més, tracta de pujar un nou post en unes setmanes on explicaré com crear la inserció d'esdeveniments a la base de dades.
moltes gràcies se't agraira moltissim el post per inserir esdeveniments :)
hola tinc un problema quan arranjament tot per connectar i extreure les meves dades de la base no em mostra cap esdeveniment
no insereix esdeveniment a la base de dades
Podries publicar com inserir esdeveniments? en els camps start i end que tipus de dada és? timestamp? sobren «0», necessito inserir i poder editar els esdeveniments. gràcies
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 versió 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 TAULES `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
hola a migos hi ha alguna manera de canviar el format de data JSON
Molt bo el calenario, solament que a l'afegir un nou esdeveniment la data que em pren per defecte tant en l'inici com fi aquesta en format anglès, com faig per canviar-ho a l'espanyol? Seria DD / MM / AAAA. Moltes gràcies i salutacions
Hola, molt bo el calendari, però a l'actualizaar una data no es reflecteix immediatament en elcalendario. Que puc fer?
Tinc un altre problema també, com puc fer perquè es visualitzin tots els punts a la vista mensual, és possible fer més gran el quadrat? que correspon a un dia?
Tinc el problema que de manera local a l'carregar l'exemple em funciona perfectament però quan ho càrrec a un servidor en línia no em mostra res de l'calendari només els botons. Alguna idea de que pot ser o que aquesta malament en el servidor per arreglar si us plau.