Calendario Bootstrap con JQuery

bootstrap-calendar Impresionanos cada vez máis a inmensa comunidade que xira ao redor Bootstrap, un coñecido framework CSS , creado por Twitter. Esta vez preséntovos un calendario baseado en Bootstrap programado con Javascript e JQueryTamén explicarei detalladamente parte do funcionamento do calendario e engadirei algúns trucos e melloras que podes facer.

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

Sistema de bases de datos coñecido

Funcións dos ficheiros principais da aplicación:

Í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 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 | Calendario Bootstrap

Descargar | Calendario Bootstrap

Máis información | Bootstrap: CSS Framework


O contido do artigo adhírese aos nosos principios de ética editorial. Para informar dun erro faga clic en aquí.

14 comentarios, deixa os teus

Deixa o teu comentario

Enderezo de correo electrónico non será publicado. Os campos obrigatorios están marcados con *

*

*

  1. Responsable dos datos: Miguel Ángel Gatón
  2. Finalidade dos datos: controlar SPAM, xestión de comentarios.
  3. Lexitimación: o seu consentimento
  4. Comunicación dos datos: os datos non serán comunicados a terceiros salvo obrigación legal.
  5. Almacenamento de datos: base de datos aloxada por Occentus Networks (UE)
  6. Dereitos: en calquera momento pode limitar, recuperar e eliminar a súa información.

  1.   David Z dixo

    mentres comprobo o código Sergio

    1.    Sergio Ródenas dixo

      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.

      1.    ros dixo

        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?

  2.   Jose Luis Zamudio (@JoseZami) dixo

    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.

    1.    Sergio Ródenas dixo

      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.

  3.   Jose Luis Zamudio (@JoseZami) dixo

    Moitas grazas, agradecerei a publicación para inserir eventos :)

  4.   jair dixo

    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

  5.   Diego dixo

    non insire o evento na base de datos

  6.   Gonza dixo

    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

  7.   Xogar dixo

    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

  8.   juan77 dixo

    ola migos hai algún xeito de cambiar o formato de data JSON

  9.   xiselabra dixo

    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

  10.   Fabiano dixo

    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?

  11.   Alex dixo

    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.