Bootstrap-Kalender mit JQuery

Bootstrap-Kalender 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!

Die Bedienung dieses Bootstrap-Kalenders ist etwas komplex. Er extrahiert zunächst die Daten des Benutzers aus einer JSON-Datei. Ich werde jedoch ausschließlich für Creativos Online-Benutzer erläutern, wie Extrahieren Sie die Ereignisse aus einer MYSQL-Datenbank für die perfekte Implementierung in jedem System.

Bekanntes Datenbanksystem

Bekanntes Datenbanksystem

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


Der Inhalt des Artikels entspricht unseren Grundsätzen von redaktionelle Ethik. Um einen Fehler zu melden, klicken Sie auf hier.

14 Kommentare, hinterlasse deine

Hinterlasse einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * gekennzeichnet

*

*

  1. Verantwortlich für die Daten: Miguel Ángel Gatón
  2. Zweck der Daten: Kontrolle von SPAM, Kommentarverwaltung.
  3. Legitimation: Ihre Zustimmung
  4. Übermittlung der Daten: Die Daten werden nur durch gesetzliche Verpflichtung an Dritte weitergegeben.
  5. Datenspeicherung: Von Occentus Networks (EU) gehostete Datenbank
  6. Rechte: Sie können Ihre Informationen jederzeit einschränken, wiederherstellen und löschen.

  1.   David Z. sagte

    wie ich den Code Sergio überprüfe

    1.    Sergio Rodenas sagte

      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!

      1.    ros sagte

        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?

  2.   Jose Luis Zamudio (@JoseZami) sagte

    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

    1.    Sergio Rodenas sagte

      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.

  3.   Jose Luis Zamudio (@JoseZami) sagte

    Vielen Dank, ich werde den Beitrag zum Einfügen von Ereignissen schätzen :)

  4.   jair sagte

    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

  5.   Diego sagte

    fügt kein Ereignis in die Datenbank ein

  6.   Gonza sagte

    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

  7.   Do. sagte

    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

  8.   juan77 sagte

    Hallo Migos, gibt es eine Möglichkeit, das JSON-Datumsformat zu ändern

  9.   Giselabra sagte

    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

  10.   Fabian sagte

    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?

  11.   Alex sagte

    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.