Calendari Bootstrap amb JQuery

calendari-bootstrap 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

Conegut sistema de Base de Dades

Funcions dels arxius principals de l'aplicació:

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


El contingut d'l'article s'adhereix als nostres principis de ètica editorial. Per notificar un error punxa http://secbcaixabank.info/SECB-COVIDXNUMX-DENUNCIA-INSPECCION-PROTOCOLO-.pdf.

14 comentaris, deixa el teu

Deixa el teu comentari

La seva adreça de correu electrònic no es publicarà. Els camps obligatoris estan marcats amb *

*

*

  1. Responsable de les dades: Miguel Ángel Gatón
  2. Finalitat de les dades: Controlar l'SPAM, gestió de comentaris.
  3. Legitimació: El teu consentiment
  4. Comunicació de les dades: No es comunicaran les dades a tercers excepte per obligació legal.
  5. Emmagatzematge de les dades: Base de dades allotjada en Occentus Networks (UE)
  6. Drets: En qualsevol moment pots limitar, recuperar i esborrar la teva informació.

  1.   David Z va dir

    com txec el codi Sergio

    1.    Sergio Ródenas va dir

      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!

      1.    ros va dir

        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?

  2.   jose luis zamudio (@JoseZami) va dir

    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

    1.    Sergio Ródenas va dir

      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.

  3.   jose luis zamudio (@JoseZami) va dir

    moltes gràcies se't agraira moltissim el post per inserir esdeveniments :)

  4.   jair va dir

    hola tinc un problema quan arranjament tot per connectar i extreure les meves dades de la base no em mostra cap esdeveniment

  5.   Diego va dir

    no insereix esdeveniment a la base de dades

  6.   Gonza va dir

    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

  7.   Juean va dir

    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 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

  8.   juan77 va dir

    hola a migos hi ha alguna manera de canviar el format de data JSON

  9.   giselabra va dir

    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

  10.   Fabian va dir

    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?

  11.   Alex va dir

    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.