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 Bootstrap Calendar è alquanto complesso, estrae inizialmente le date dell'utente da un file JSON, ma, in esclusiva per gli utenti di Creativos Online, spiegherò come estrarre gli eventi da un database MYSQL per la sua perfetta implementazione in qualsiasi sistema.
Sistema di database ben noto
Funzioni dei file principali dell'applicazione:
Indice
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
mentre controllo il codice Sergio
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!
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?
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
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.
Grazie mille, apprezzerò il post per inserire eventi :)
ciao ho un problema quando aggiusto tutto per connettermi ed estrarre i miei dati dal database non mi mostra alcun evento
non inserisce l'evento nel database
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
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
ciao migos c'è un modo per cambiare il formato della data JSON
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
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?
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.