Calendario bootstrap con JQuery

bootstrap-calendar

Siamo sempre più colpiti dall'immensa comunità che ruota attorno Bootstrap, un noto framework CSS , creato da Twitter. Questa volta vi presento un calendario basato su Bootstrap programmato con Javascript e JQuery, Spiegherò anche in dettaglio parte del funzionamento del calendario e aggiungerò alcuni accorgimenti e miglioramenti che puoi fare.

Questo calendario Bootstrap ha un design pulito ed è totalmente di risposta, starà bene da tutti i dispositivi! Incorpora anche un file traduzione in più di 7 lingue e tutto le date festive di ogni paese sono evidenziate e annotate. Una lussuria!

Il funzionamento di questo Calendario Bootstrap è piuttosto complesso, inizialmente estrae le date dell'utente da un file JSON, ma, esclusivamente per gli utenti di Creativos OnlineSpiegherò come estrarre gli eventi da un database MYSQL per la sua perfetta implementazione in qualsiasi sistema.

Sistema di database ben noto

Sistema di database ben noto

Funzioni dei file principali dell'applicazione:

INDICE.HTML

  • Bootstrap 2.3.2 caricamento
  • Design del calendario
  • Elenco degli eventi
  • Navigazione nel calendario
  • Diverse visualizzazioni del calendario (giorno / settimana / mese / anno)
  • Caricamento dell'applicazione in JS
  • Selezione della lingua

INDICE-BS3.HTML

  • Bootstrap 3.0 caricamento
  • Design del calendario
  • Elenco degli eventi
  • Navigazione nel calendario
  • Diverse visualizzazioni del calendario (giorno / settimana / mese / anno)
  • Caricamento dell'applicazione in JS
  • Selezione della lingua

EVENTI.JSON.PHP

  • Elenco degli eventi con i seguenti dati:
    • id: identificatore dell'evento
    • Titolo: titolo dell'evento
    • URL: URL dell'evento
    • classe: tipo di evento (info | warning |…) per i colori successivi.
    • inizio: data d'inizio
    • end: data di cessazione

APP.JS

  • Variabili che memorizzano la configurazione dell'applicazione.
  • Funzioni JQuery extra

CALENDARIO.JS

  • Impostazioni principali dell'applicazione
  • Principali funzioni del calendario
  • Estrazione e trattamento degli eventi
  • Date festive
  • Caricamento della lingua
  • Caricamento dell'elenco degli eventi
  • Caricamento delle diverse viste del calendario (giorno / settimana / mese / anno)

CALENDARIO.CSS

  • Stili di calendario
  • Stili dell'elenco degli eventi
  • Stili di calendario per altri dispositivi

Estrai eventi da un database

Per estrarre gli eventi da un database MYSQL sostituiremo le righe del file eventi.json.php da:

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

Scarica | Calendario Bootstrap

Per saperne di più | Bootstrap: CSS Framework


14 commenti, lascia il tuo

Lascia un tuo commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati con *

*

*

  1. Responsabile dei dati: Miguel Ángel Gatón
  2. Scopo dei dati: controllo SPAM, gestione commenti.
  3. Legittimazione: il tuo consenso
  4. Comunicazione dei dati: I dati non saranno oggetto di comunicazione a terzi se non per obbligo di legge.
  5. Archiviazione dati: database ospitato da Occentus Networks (UE)
  6. Diritti: in qualsiasi momento puoi limitare, recuperare ed eliminare le tue informazioni.

  1.   Davide Z suddetto

    mentre controllo il codice Sergio

    1.    Sergio Rodenas suddetto

      Il codice è già stato verificato! L'unica cosa, devi creare la tabella «events» nel tuo database con i seguenti campi: {id | home | fine | nome | classe | url} e configura l'accesso al tuo database!

      1.    ros suddetto

        Ho cambiato quelle variabili per altri e mi ha permesso di aggiungere l'evento al mio database, ma non lo vedo riflesso nel calendario. E come potrei recuperare i dati degli eventi a seconda del giorno in cui clicco sul calendario?

  2.   Jose Luis Zamudio (@JoseZami) suddetto

    Per fare ed eseguire la creazione di eventi, è necessario creare un database, ma di cosa si tratta è che posso aggiungere eventi ad esso e come impostazione predefinita la lingua è lo spagnolo perché è definito come inglese per impostazione predefinita

    1.    Sergio Rodenas suddetto

      Per impostare la lingua come predefinita sullo spagnolo, è meglio sostituire le stringhe esistenti nel file della lingua spagnola con quelle in inglese nel file calendar.js. Tuttavia, ci sono altri metodi più ordinati, li puoi trovare sul sito web principale dello script o nella community di Github, allegata a questo post.
      Inoltre, proverò a caricare un nuovo post tra qualche settimana in cui spiegherò come creare l'inserimento di eventi nel database.

  3.   Jose Luis Zamudio (@JoseZami) suddetto

    Grazie mille, apprezzerò il post per inserire eventi :)

  4.   Jair suddetto

    ciao ho un problema quando aggiusto tutto per connettermi ed estrarre i miei dati dal database non mi mostra alcun evento

  5.   Diego suddetto

    non inserisce l'evento nel database

  6.   Gonza suddetto

    Potresti postare come inserire eventi? nei campi inizio e fine che tipo di dati sono? timestamp? sono rimasti "0", devo inserire e poter modificare gli eventi. Grazie

  7.   Gio suddetto

    CREA DATABASE SE NON ESISTE `bootstrap_calendar` / *! 40100 SET DI CARATTERI PREDEFINITI utf8 COLLATE utf8_spanish_ci * /;
    USA `bootstrap_calendar`;
    - MySQL dump 10.13 Distrib 5.6.13, per Win32 (x86)
    -
    - Host: 127.0.0.1 Database: bootstrap_calendar
    - ——————————————————
    - Versione server 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 IMPOSTA NOMI 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 * /;

    -
    - Struttura della tabella per gli "eventi" della tabella
    -

    DROP TABLE SE ESISTE "events";
    / *! 40101 SET @saved_cs_client = @@ character_set_client * /;
    / *! 40101 SET character_set_client = utf8 * /;
    CREA TABELLA `eventi` (
    `id` int (10) non firmato NON NULL AUTO_INCREMENT,
    `title` varchar (150) COLLATE utf8_spanish_ci DEFAULT NULL,
    testo `body` COLLATE utf8_spanish_ci NON NULL,
    `url` varchar (150) COLLATE utf8_spanish_ci NON NULL,
    `class` varchar (45) COLLATE utf8_spanish_ci NOT NULL DEFAULT 'info',
    `start` varchar (15) COLLATE utf8_spanish_ci NON NULL,
    `end` varchar (15) COLLATE utf8_spanish_ci NON NULL,
    CHIAVE PRIMARIA ("id")
    ) MOTORE = INnoDB SET DI CARATTERI PREDEFINITI = utf8 COLLATE = utf8_spanish_ci;
    / *! 40101 SET character_set_client = @saved_cs_client * /;

    -
    - Scaricare i dati per gli "eventi" della tabella
    -

    BLOCCA TABELLE `eventi` WRITE;
    / *! 40000 ALTER TABLE `events` DISABILITA TASTI * /;
    / *! 40000 ALTER TABLE `events` ABILITA TASTI * /;
    SBLOCCO TABELLE;
    / *! 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 completato il 2014/05/31 alle 14:38:23

  8.   juan77 suddetto

    ciao migos c'è un modo per cambiare il formato della data JSON

  9.   giselabra suddetto

    Il calendario è molto buono, solo quando si aggiunge un nuovo evento la data che prende per impostazione predefinita sia all'inizio che alla fine è in formato inglese, come faccio a cambiarla in spagnolo? Sarebbe GG / MM / AAAA. Grazie mille e saluti

  10.   Fabian suddetto

    Ciao, il calendario è molto buono, ma quando si aggiorna una data non si riflette immediatamente nel calendario. Che cosa posso fare ?

    Ho anche un altro problema, come faccio a visualizzare tutti i punti nella visualizzazione mensile, è possibile ingrandire il quadrato? cosa corrisponde a un giorno?

  11.   alex suddetto

    Ho il problema che localmente durante il caricamento dell'esempio funziona perfettamente ma quando lo carico su un server online non mi mostra nulla dal calendario solo i pulsanti. Qualsiasi idea di cosa possa essere o cosa non va con il server per risolverlo per favore.