Este calendario Bootstrap ten un deseño limpo e é totalmente responsabilidade, quedará ben en todos os dispositivos. Tamén incorpora un tradución a máis de 7 idiomas e todo resáltanse e anótanse as datas festivas de cada país. Un luxo!
O funcionamento deste calendario Bootstrap é algo complexo, extrae as datas do usuario dun ficheiro JSON inicialmente, pero, exclusivamente para usuarios de Creativos Online, explicarei como extrae os eventos dunha base de datos MYSQL pola súa perfecta implementación en calquera sistema.
Sistema de bases de datos coñecido
Funcións dos ficheiros principais da aplicación:
Índice
ÍNDICE.HTML
- Carga Bootstrap 2.3.2
- Deseño de calendarios
- Lista de eventos
- Navegando polo calendario
- Diferentes vistas do calendario (día / semana / mes / ano)
- Cargando a aplicación en JS
- Selección de idioma
ÍNDICE-BS3.HTML
- Carga Bootstrap 3.0
- Deseño de calendarios
- lista de eventos
- Navegando polo calendario
- Diferentes vistas do calendario (día / semana / mes / ano)
- Cargando a aplicación en JS
- Selección de idioma
EVENTOS.JSON.PHP
- Lista de eventos cos seguintes datos:
- ID: identificador do evento
- título: título do evento
- url: url do evento
- clase: tipo de evento (información | aviso | ...) para as cores posteriores.
- inicio: data de inicio
- final: data de finalización
APP.JS
- Variables que almacenan a configuración da aplicación.
- Funcións extra de JQuery
CALENDARIO.JS
- Configuración principal da aplicación
- Principais funcións do calendario
- Extracción e tratamento de eventos
- Datas festivas
- Cargando idioma
- Cargando a lista de eventos
- Carga das diferentes vistas do calendario (día / semana / mes / ano)
CALENDARIO.CSS
- Estilos de calendario
- Estilos de lista de eventos
- Estilos de calendario para outros dispositivos
Extraer eventos dunha base de datos
Para extraer os eventos dunha base de datos MYSQL substituiremos as liñas do ficheiro eventos.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 | Calendario Bootstrap
Descargar | Calendario Bootstrap
Máis información | Bootstrap: CSS Framework
14 comentarios, deixa os teus
mentres comprobo o código Sergio
O código xa está comprobado. O único que tes que crear a táboa «eventos» na túa base de datos cos seguintes campos: {id | casa | fin | nome | clase | url} e configure o acceso á súa base de datos.
Cambiei esas variables por outras e permitiume engadir o evento á miña base de datos, pero non o vexo reflectido no calendario. E como podería recuperar os datos dos eventos segundo o día que faga clic no calendario?
Para facer e realizar a creación de eventos, entón hai que crear unha base de datos, pero do que se trata é de que podo engadirlle eventos e por defecto o idioma ao español porque está definido como inglés por defecto.
Para predefinir o idioma en castelán, é mellor substituír as cadeas existentes no ficheiro de español por outras en inglés no ficheiro calendar.js. Non obstante, hai outros métodos máis sinxelos, podes atopalos no sitio web principal do guión ou na comunidade Github, adxunto a esta publicación.
Ademais, intentarei cargar unha nova publicación nunhas semanas onde explicarei como crear a inserción de eventos na base de datos.
Moitas grazas, agradecerei a publicación para inserir eventos :)
ola teño un problema cando arranxo todo para conectarme e extraer os meus datos da base de datos, non me mostra ningún evento
non insire o evento na base de datos
Podería publicar como inserir eventos? nos campos inicial e final, que tipo de datos se trata? marca de tempo? sobran "0", necesito inserir e poder editar os eventos. Grazas
CREAR BASE DE DATOS SE NON EXISTE `bootstrap_calendar` / *! 40100 CONFIGURACIÓN DE CARACTERES DEFAULT utf8 COLLATE utf8_spanish_ci * /;
USE `bootstrap_calendar`;
- Dump MySQL 10.13 Distrib 5.6.13, para Win32 (x86)
-
- Anfitrión: 127.0.0.1 Base de datos: bootstrap_calendar
- ———————————————————
- Versión do servidor 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 CONXUNTAR NOMES 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 * /;
-
- Estrutura da táboa para os eventos de táboa
-
TÁBOA DE GOTA SE EXISTE "eventos";
/ *! 40101 SET @saved_cs_client = @@ character_set_client * /;
/ *! 40101 SET character_set_client = utf8 * /;
CREAR TÁBOA `eventos` (
`id` int (10) sen asinar NON NULL AUTO_INCREMENT,
`title` varchar (150) COLLATE utf8_spanish_ci DEFAULT NULL,
texto `body` COLLATE utf8_spanish_ci NON NULO,
`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,
CLAVE PRIMARIA ("id")
) MOTOR = InnoDB DEFAULT CHARSET = utf8 COLLATE = utf8_spanish_ci;
/ *! 40101 SET character_set_client = @saved_cs_client * /;
-
- Volcado de datos para "eventos" da táboa
-
LOCK TABLES `eventos` ESCRIBE;
/ *! 40000 ALTER TABLE `events` DISACT CLAVES * /;
/ *! 40000 ALTER TABLE `events` HABILITAR CLAVES * /;
DESbloquear TÁBOAS;
/ *! 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 * /;
- Volcado rematado o 2014/05/31 ás 14:38:23
ola migos hai algún xeito de cambiar o formato de data JSON
O calendario é moi bo, só que ao engadir un novo evento a data que leva por defecto tanto no inicio como no final está en formato inglés, como o cambio ao español? Sería DD / MM / AAAA. Moitas grazas e saúdos
Ola, o calendario é moi bo, pero ao actualizar unha data non se reflicte inmediatamente no calendario. Que podo facer?
Tamén teño outro problema, como podo mostrar todos os puntos na vista mensual, é posible ampliar a praza? que corresponde a un día?
Teño o problema de que localmente ao cargar o exemplo funciona perfectamente pero cando o subo a un servidor en liña non me mostra nada do calendario só os botóns. Calquera idea do que pode ser ou que está mal co servidor para solucionalo, por favor.