Ημερολόγιο Bootstrap με JQuery

bootstrap-ημερολόγιο Εντυπωσιάζουμε όλο και περισσότερο από την τεράστια κοινότητα που περιστρέφεται Bootstrap, ένα γνωστό πλαίσιο CSS , δημιουργήθηκε από το Twitter. Αυτή τη φορά σας παρουσιάζω ένα ημερολόγιο με βάση το Bootstrap προγραμματισμένο με Javascript και JQuery, Θα εξηγήσω επίσης μέρος της λειτουργίας του ημερολογίου λεπτομερώς και θα προσθέσω μερικά κόλπα και βελτιώσεις που μπορείτε να κάνετε.

Αυτό το ημερολόγιο Bootstrap έχει καθαρό σχεδιασμό και είναι εντελώς ανταποκρίνονται, θα φαίνεται καλό από όλες τις συσκευές! Περιλαμβάνει επίσης ένα μετάφραση σε περισσότερες από 7 γλώσσες και όλα επισημαίνονται και σημειώνονται οι εορταστικές ημερομηνίες κάθε χώρας. Μια πολυτέλεια!

Η λειτουργία αυτού του ημερολογίου Bootstrap είναι κάπως περίπλοκη, εξάγει τις ημερομηνίες του χρήστη από ένα αρχείο JSON αρχικά, αλλά, αποκλειστικά για χρήστες του Creativos Online, θα εξηγήσω πώς εξαγάγετε τα συμβάντα από μια βάση δεδομένων MYSQL για την τέλεια εφαρμογή του σε οποιοδήποτε σύστημα.

Γνωστό σύστημα βάσης δεδομένων

Γνωστό σύστημα βάσης δεδομένων

Λειτουργίες των κύριων αρχείων της εφαρμογής:

INDEX.HTML

  • Φόρτωση Bootstrap 2.3.2
  • Σχεδιασμός ημερολογίου
  • Λίστα γεγονότων
  • Πλοήγηση στο Ημερολόγιο
  • Διαφορετικές προβολές ημερολογίου (Ημέρα / Εβδομάδα / Μήνας / Έτος)
  • Φόρτωση της εφαρμογής σε JS
  • Επιλογή γλώσσας

INDEX-BS3.HTML

  • Φόρτωση Bootstrap 3.0
  • Σχεδιασμός ημερολογίου
  • Λίστα εκδηλώσεων
  • Πλοήγηση στο Ημερολόγιο
  • Διαφορετικές προβολές ημερολογίου (Ημέρα / Εβδομάδα / Μήνας / Έτος)
  • Φόρτωση της εφαρμογής σε JS
  • Επιλογή γλώσσας

ΕΚΔΗΛΩΣΕΙΣ.JSON.PHP

  • Λίστα εκδηλώσεων με τα ακόλουθα δεδομένα:
    • id: αναγνωριστικό συμβάντος
    • Τίτλος: τίτλος εκδήλωσης
    • url: url της εκδήλωσης
    • τάξη: τύπος συμβάντος (πληροφορίες | προειδοποίηση |…) για τα επόμενα χρώματα.
    • αρχή: ημερομηνία έναρξης
    • τέλος: ημερομηνία λήξης

APP.JS

  • Μεταβλητές που αποθηκεύουν τη διαμόρφωση της εφαρμογής.
  • Επιπλέον λειτουργίες JQuery

ΗΜΕΡΟΛΟΓΙΟ.JS

  • Κύριες ρυθμίσεις εφαρμογής
  • Κύριες λειτουργίες του Ημερολογίου
  • Εξόρυξη και επεξεργασία γεγονότων
  • Εορταστικές ημερομηνίες
  • Φόρτωση γλώσσας
  • Φόρτωση της λίστας Εκδηλώσεων
  • Φόρτωση των διαφορετικών προβολών ημερολογίου (Ημέρα / Εβδομάδα / Μήνας / Έτος)

ΗΜΕΡΟΛΟΓΙΟ.CSS

  • Στυλ ημερολογίου
  • Στυλ λίστας εκδηλώσεων
  • Στυλ ημερολογίου για άλλες συσκευές

Εξαγωγή συμβάντων από μια βάση δεδομένων

Για να εξαγάγετε τα συμβάντα από μια βάση δεδομένων MYSQL θα αντικαταστήσουμε τις γραμμές του αρχείου events.json.php από:

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

Λήψη | Ημερολόγιο Bootstrap

Περισσότερες πληροφορίες | Bootstrap: CSS Framework


Το περιεχόμενο του άρθρου συμμορφώνεται με τις αρχές μας συντακτική ηθική. Για να αναφέρετε ένα σφάλμα κάντε κλικ Aquí.

14 σχόλια, αφήστε τα δικά σας

Αφήστε το σχόλιό σας

Η διεύθυνση email σας δεν θα δημοσιευθεί. Τα υποχρεωτικά πεδία σημειώνονται με *

*

*

  1. Υπεύθυνος για τα δεδομένα: Miguel Ángel Gatón
  2. Σκοπός των δεδομένων: Έλεγχος SPAM, διαχείριση σχολίων.
  3. Νομιμοποίηση: Η συγκατάθεσή σας
  4. Κοινοποίηση των δεδομένων: Τα δεδομένα δεν θα κοινοποιούνται σε τρίτους, εκτός από νομική υποχρέωση.
  5. Αποθήκευση δεδομένων: Βάση δεδομένων που φιλοξενείται από τα δίκτυα Occentus (ΕΕ)
  6. Δικαιώματα: Ανά πάσα στιγμή μπορείτε να περιορίσετε, να ανακτήσετε και να διαγράψετε τις πληροφορίες σας.

  1.   Δαβίδ Ζ dijo

    καθώς ελέγχω τον κωδικό Sergio

    1.    Sergio Ródenas dijo

      Ο κωδικός έχει ήδη ελεγχθεί! Το μόνο πράγμα, πρέπει να δημιουργήσετε τον πίνακα «γεγονότα» στη βάση δεδομένων σας με τα ακόλουθα πεδία: {id | σπίτι | τέλος | όνομα | τάξη | url} και διαμορφώστε την πρόσβαση στη βάση δεδομένων σας!

      1.    Τριαντάφυλλο dijo

        Έχω αλλάξει αυτές τις μεταβλητές για άλλους και μου επέτρεψε να προσθέσω το συμβάν στη βάση δεδομένων μου, αλλά δεν το βλέπω να αντικατοπτρίζεται στο ημερολόγιο. Και πώς μπορώ να ανακτήσω τα δεδομένα των συμβάντων ανάλογα με την ημέρα που κάνω κλικ στο ημερολόγιο;

  2. Για να κάνετε και να εκτελέσετε τη δημιουργία συμβάντων, τότε πρέπει να δημιουργηθεί μια βάση δεδομένων, αλλά το θέμα είναι ότι μπορώ να προσθέσω συμβάντα σε αυτήν και ως προεπιλογή η γλώσσα είναι η ισπανική επειδή ορίζεται ως αγγλικά από προεπιλογή

    1.    Sergio Ródenas dijo

      Για προεπιλογή της γλώσσας στα Ισπανικά, είναι καλύτερο να αντικαταστήσετε τις υπάρχουσες συμβολοσειρές στο αρχείο της Ισπανικής γλώσσας με αυτές στα Αγγλικά στο αρχείο calendar.js. Ωστόσο, υπάρχουν και άλλες πιο προσεγμένες μέθοδοι, μπορείτε να τις βρείτε στον κύριο ιστότοπο του σεναρίου ή στην κοινότητα Github, που επισυνάπτεται σε αυτήν την ανάρτηση.
      Επίσης, θα προσπαθήσω να ανεβάσω μια νέα ανάρτηση σε λίγες εβδομάδες όπου θα εξηγήσω πώς να δημιουργήσω την εισαγωγή συμβάντων στη βάση δεδομένων.

  3. Ευχαριστώ πολύ, θα εκτιμήσω την ανάρτηση για να εισαγάγω εκδηλώσεις :)

  4.   Jair dijo

    γεια Έχω ένα πρόβλημα όταν διορθώσω τα πάντα για να συνδεθώ και να εξαγάγω τα δεδομένα μου από τη βάση δεδομένων που δεν μου δείχνει κανένα συμβάν

  5.   diego dijo

    δεν εισάγει συμβάν στη βάση δεδομένων

  6.   Gonza dijo

    Θα μπορούσατε να δημοσιεύσετε πώς να εισαγάγετε συμβάντα; στα πεδία έναρξης και λήξης τι είδους δεδομένα είναι; χρονική σήμανση; απομένουν "0", πρέπει να εισαγάγω και να μπορέσω να επεξεργαστώ τα συμβάντα. Ευχαριστώ

  7.   Πέμπτη dijo

    ΔΗΜΙΟΥΡΓΙΑ ΔΕΔΟΜΕΝΩΝ ΕΑΝ ΔΕΝ ΥΠΑΡΧΕΙ «bootstrap_calendar» / *! 40100 DEFAULT CHARACTER SET utf8 COLLATE utf8_spanish_ci * /;
    ΧΡΗΣΗ "bootstrap_calendar";
    - MySQL dump 10.13 Distrib 5.6.13, για Win32 (x86)
    -
    - Host: 127.0.0.1 Βάση δεδομένων: bootstrap_calendar
    - ———————————————————
    - Έκδοση διακομιστή 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 ΟΝΟΜΑΣΙΑ 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 * /;

    -
    - Δομή πίνακα για πίνακες «γεγονότα»
    -

    ΣΤΑΣΗ ΠΙΝΑΚΑ ΕΑΝ ΥΠΑΡΧΕΙ «εκδηλώσεις».
    / *! 40101 SET @saved_cs_client = @@ character_set_client * /;
    / *! 40101 SET character_set_client = utf8 * /;
    ΔΗΜΙΟΥΡΓΙΑ ΠΙΝΑΚΑΣ «εκδηλώσεις» (
    'id` int (10) μη υπογεγραμμένο NOT NULL AUTO_INCREMENT,
    `title` varchar (150) COLLATE utf8_spanish_ci ΟΡΙΣΤΙΚΟ NULL,
    κείμενο "body` COLLATE utf8_spanish_ci ΔΕΝ ΕΙΝΑΙ NULL,
    `url` varchar (150) COLLATE utf8_spanish_ci ΟΧΙ NULL,
    «class` varchar (45) COLLATE utf8_spanish_ci ΔΕΝ ΜΠΟΡΕΙ ΝΑ ΕΙΝΑΙ ΟΡΙΣΜΕΝΕΣ« πληροφορίες »,
    `start` varchar (15) COLLATE utf8_spanish_ci ΟΧΙ NULL,
    `end` varchar (15) COLLATE utf8_spanish_ci ΟΧΙ NULL,
    ΚΥΡΙΟ ΠΡΩΤΟΒΟΥΛΙΟ («id»)
    ) ΚΙΝΗΤΗΡΑ = InnoDB DEFAULT CHARSET = utf8 COLLATE = utf8_spanish_ci;
    / *! 40101 SET character_set_client = @saved_cs_client * /;

    -
    - Απόρριψη δεδομένων για συμβάντα πίνακα "
    -

    LOCK TABLES `εκδηλώσεις` ΓΡΑΠΤΗΣΤΕ;
    / *! 40000 ALTER TABLE `εκδηλώσεις` ΑΠΕΝΕΡΓΟΠΟΙΗΜΕΝΑ ΚΛΕΙΔΙΑ * /;
    / *! 40000 ALTER TABLE `εκδηλώσεις` ΕΝΕΡΓΟΠΟΙΗΜΕΝΑ ΠΛΗΚΤΡΑ
    Ξεκλειδώστε τους πίνακες;
    / *! 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 * /;

    - Η χωματερή ολοκληρώθηκε στις 2014-05-31 14:38:23

  8.   juan77 dijo

    γεια σας migos υπάρχει τρόπος να αλλάξετε τη μορφή ημερομηνίας JSON

  9.   giselabra dijo

    Το ημερολόγιο είναι πολύ καλό, μόνο όταν προσθέτω ένα νέο συμβάν η ημερομηνία που με παίρνει από προεπιλογή τόσο στην αρχή όσο και στο τέλος είναι σε αγγλική μορφή, πώς μπορώ να το αλλάξω σε ισπανικά; Θα ήταν ΗΗ / ΜΜ / ΕΕΕΕ. Ευχαριστώ πολύ και χαιρετισμούς

  10.   Fabian dijo

    Γεια σας, το ημερολόγιο είναι πολύ καλό, αλλά κατά την ενημέρωση μιας ημερομηνίας δεν αντικατοπτρίζεται αμέσως στο ημερολόγιο. Τι μπορώ να κάνω ?

    Έχω επίσης ένα άλλο πρόβλημα, πώς μπορώ να κάνω την εμφάνιση όλων των πόντων στη μηνιαία προβολή, είναι δυνατόν να μεγεθύνετε το τετράγωνο; τι αντιστοιχεί σε μια μέρα;

  11.   alex dijo

    Έχω το πρόβλημα ότι τοπικά όταν φορτώνω το παράδειγμα λειτουργεί τέλεια, αλλά όταν το ανεβάζω σε έναν διαδικτυακό διακομιστή δεν μου δείχνει τίποτα από το ημερολόγιο, μόνο τα κουμπιά. Οποιαδήποτε ιδέα τι μπορεί να είναι ή τι είναι λάθος με τον διακομιστή για να το διορθώσετε παρακαλώ.