Wir sind zunehmend beeindruckt von der immensen Community, um die es geht Bootstrap, ein bekanntes CSS-Framework , erstellt von Twitter. Dieses Mal präsentiere ich Ihnen einen Bootstrap-basierten Kalender programmiert mit Javascript und JQueryIch werde auch einen Teil der Funktionsweise des Kalenders im Detail erklären und einige Tricks und Verbesserungen hinzufügen, die Sie tun können.
Dieser Bootstrap-Kalender hat ein klares Design und ist total ansprechbar, es wird von allen Geräten gut aussehen! Es enthält auch eine Übersetzung in mehr als 7 Sprachen und alles Die festlichen Daten jedes Landes werden hervorgehoben und notiert. Ein Luxus!
El funcionamiento de este Calendario Bootstrap es algo complejo, extrae las fechas del usuario de un archivo JSON inicialmente, pero, de manera exclusiva para los usuarios de Creativos Online, explicaré como Extrahieren Sie die Ereignisse aus einer MYSQL-Datenbank für die perfekte Implementierung in jedem System.
Funktionen der Hauptdateien der Anwendung:
INDEX.HTML
- Bootstrap 2.3.2 wird geladen
- Kalendergestaltung
- Liste der Ereignisse
- Navigieren im Kalender
- Verschiedene Kalenderansichten (Tag / Woche / Monat / Jahr)
- Laden der Anwendung in JS
- Sprachauswahl
INDEX-BS3.HTML
- Bootstrap 3.0 wird geladen
- Kalendergestaltung
- Liste der Ereignisse
- Navigieren im Kalender
- Verschiedene Kalenderansichten (Tag / Woche / Monat / Jahr)
- Laden der Anwendung in JS
- Sprachauswahl
EVENTS.JSON.PHP
- Liste der Ereignisse mit folgenden Daten:
- ID: Ereigniskennung
- Titel: Veranstaltungstitel
- url: URL der Veranstaltung
- Klasse: Ereignistyp (info | warning |…) für nachfolgende Farben.
- Start: Startdatum
- Ende: Kündigungsdatum
APP.JS
- Variablen, die die Anwendungskonfiguration speichern.
- Zusätzliche JQuery-Funktionen
KALENDER.JS
- Hauptanwendungseinstellungen
- Hauptfunktionen des Kalenders
- Extraktion und Behandlung von Ereignissen
- Festtage
- Laden der Sprache
- Laden der Ereignisliste
- Laden der verschiedenen Kalenderansichten (Tag / Woche / Monat / Jahr)
KALENDER.CSS
- Kalenderstile
- Ereignislistenstile
- Kalenderstile für andere Geräte
Extrahieren Sie Ereignisse aus einer Datenbank
So extrahieren Sie die Ereignisse aus einer MYSQL-Datenbank Wir werden die Zeilen der Datei ersetzen events.json.php von:
<?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-Kalender
Herunterladen | Bootstrap-Kalender
Erfahren Sie mehr | Bootstrap: CSS Framework
wie ich den Code Sergio überprüfe
Der Code ist bereits geprüft! Als einziges müssen Sie die Tabelle «Ereignisse» in Ihrer Datenbank mit den folgenden Feldern erstellen: {id | Startseite | Ende | Name | Klasse | url} und konfiguriere den Zugriff auf deine Datenbank!
Ich habe diese Variablen für andere geändert und konnte das Ereignis zu meiner Datenbank hinzufügen, sehe es jedoch nicht im Kalender. Und wie kann ich die Daten der Ereignisse abhängig von dem Tag wiederherstellen, an dem ich auf den Kalender klicke?
Um Ereignisse zu erstellen und durchzuführen, muss eine Datenbank erstellt werden. Es geht jedoch darum, dass ich Ereignisse an sie anhängen kann. Standardmäßig ist die Sprache Spanisch, da sie standardmäßig als Englisch definiert ist
Um die Sprache auf Spanisch voreingestellt zu haben, ersetzen Sie am besten die vorhandenen Zeichenfolgen in der spanischen Sprachdatei durch die englischen Zeichenfolgen in der Datei calendar.js. Es gibt jedoch auch andere übersichtlichere Methoden. Sie finden sie auf der Hauptwebsite des Skripts oder in der Github-Community, die diesem Beitrag beigefügt ist.
Außerdem werde ich in einigen Wochen versuchen, einen neuen Beitrag hochzuladen, in dem ich erkläre, wie das Einfügen von Ereignissen in die Datenbank erstellt wird.
Vielen Dank, ich werde den Beitrag zum Einfügen von Ereignissen schätzen :)
Hallo, ich habe ein Problem, wenn ich alles behebe, um eine Verbindung herzustellen und meine Daten aus der Datenbank zu extrahieren. Es werden keine Ereignisse angezeigt
fügt kein Ereignis in die Datenbank ein
Könntest du posten, wie man Ereignisse einfügt? Um welche Art von Daten handelt es sich in den Start- und Endfeldern? Zeitstempel? Es sind noch "0" übrig, ich muss die Ereignisse einfügen und bearbeiten können. Vielen Dank
CREATE DATABASE WENN NICHT EXISTIERT `bootstrap_calendar` / *! 40100 DEFAULT CHARACTER SET utf8 COLLATE utf8_spanish_ci * /;
VERWENDE `bootstrap_calendar`;
- MySQL Dump 10.13 Distrib 5.6.13 für Win32 (x86)
-
- Host: 127.0.0.1 Datenbank: bootstrap_calendar
- ———————————————————
- Serverversion 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 * /;
-
- Tabellenstruktur für die Tabelle "Ereignisse"
-
DROP TABLE IF EXISTS `Ereignisse`;
/ *! 40101 SET @saved_cs_client = @@ character_set_client * /;
/ *! 40101 SET character_set_client = utf8 * /;
TABELLE ERSTELLEN `events` (
`id` int (10) ohne Vorzeichen NOT NULL AUTO_INCREMENT,
`title` varchar (150) COLLATE utf8_spanish_ci DEFAULT NULL,
`body` text COLLATE utf8_spanish_ci NICHT NULL,
`url` varchar (150) COLLATE utf8_spanish_ci NICHT NULL,
`class` varchar (45) COLLATE utf8_spanish_ci NICHT NULL STANDARD 'info',
`start` varchar (15) COLLATE utf8_spanish_ci NICHT NULL,
`end` varchar (15) COLLATE utf8_spanish_ci NICHT NULL,
Primärschlüssel (`id`)
) ENGINE = InnoDB DEFAULT CHARSET = utf8 COLLATE = utf8_spanish_ci;
/ *! 40101 SET character_set_client = @saved_cs_client * /;
-
- Dumping-Daten für die Tabelle "Ereignisse"
-
LOCK TABLES `Ereignisse` WRITE;
/ *! 40000 ALTER TABLE `events` DISABLE KEYS * /;
/ *! 40000 ALTER TABLE `events` ENABLE KEYS * /;
TISCHE ENTSPERREN;
/ *! 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 abgeschlossen am 2014 05:31:14
Hallo Migos, gibt es eine Möglichkeit, das JSON-Datumsformat zu ändern
Der Kalender ist sehr gut. Nur wenn Sie ein neues Ereignis hinzufügen, ist das Datum, das standardmäßig sowohl am Anfang als auch am Ende benötigt wird, im englischen Format. Wie ändere ich es in Spanisch? Es wäre TT / MM / JJJJ. Vielen Dank und Grüße
Hallo, der Kalender ist sehr gut, aber wenn ein Datum aktualisiert wird, wird es nicht sofort im Kalender angezeigt. Was ich tun kann ?
Ich habe auch ein anderes Problem: Wie kann ich alle Punkte in der Monatsansicht anzeigen lassen? Ist es möglich, das Quadrat zu vergrößern? Was entspricht einem Tag?
Ich habe das Problem, dass es lokal beim Laden des Beispiels einwandfrei funktioniert, aber wenn ich es auf einen Online-Server hochlade, werden mir im Kalender nur die Schaltflächen angezeigt. Irgendeine Idee, was sein könnte oder was mit dem Server falsch ist, um es zu beheben, bitte.