Εντυπωσιάζουμε όλο και περισσότερο από την τεράστια κοινότητα που περιστρέφεται 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
καθώς ελέγχω τον κωδικό Sergio
Ο κωδικός έχει ήδη ελεγχθεί! Το μόνο πράγμα, πρέπει να δημιουργήσετε τον πίνακα «γεγονότα» στη βάση δεδομένων σας με τα ακόλουθα πεδία: {id | σπίτι | τέλος | όνομα | τάξη | url} και διαμορφώστε την πρόσβαση στη βάση δεδομένων σας!
Έχω αλλάξει αυτές τις μεταβλητές για άλλους και μου επέτρεψε να προσθέσω το συμβάν στη βάση δεδομένων μου, αλλά δεν το βλέπω να αντικατοπτρίζεται στο ημερολόγιο. Και πώς μπορώ να ανακτήσω τα δεδομένα των συμβάντων ανάλογα με την ημέρα που κάνω κλικ στο ημερολόγιο;
Για να κάνετε και να εκτελέσετε τη δημιουργία συμβάντων, τότε πρέπει να δημιουργηθεί μια βάση δεδομένων, αλλά το θέμα είναι ότι μπορώ να προσθέσω συμβάντα σε αυτήν και ως προεπιλογή η γλώσσα είναι η ισπανική επειδή ορίζεται ως αγγλικά από προεπιλογή
Για προεπιλογή της γλώσσας στα Ισπανικά, είναι καλύτερο να αντικαταστήσετε τις υπάρχουσες συμβολοσειρές στο αρχείο της Ισπανικής γλώσσας με αυτές στα Αγγλικά στο αρχείο calendar.js. Ωστόσο, υπάρχουν και άλλες πιο προσεγμένες μέθοδοι, μπορείτε να τις βρείτε στον κύριο ιστότοπο του σεναρίου ή στην κοινότητα Github, που επισυνάπτεται σε αυτήν την ανάρτηση.
Επίσης, θα προσπαθήσω να ανεβάσω μια νέα ανάρτηση σε λίγες εβδομάδες όπου θα εξηγήσω πώς να δημιουργήσω την εισαγωγή συμβάντων στη βάση δεδομένων.
Ευχαριστώ πολύ, θα εκτιμήσω την ανάρτηση για να εισαγάγω εκδηλώσεις :)
γεια Έχω ένα πρόβλημα όταν διορθώσω τα πάντα για να συνδεθώ και να εξαγάγω τα δεδομένα μου από τη βάση δεδομένων που δεν μου δείχνει κανένα συμβάν
δεν εισάγει συμβάν στη βάση δεδομένων
Θα μπορούσατε να δημοσιεύσετε πώς να εισαγάγετε συμβάντα; στα πεδία έναρξης και λήξης τι είδους δεδομένα είναι; χρονική σήμανση; απομένουν "0", πρέπει να εισαγάγω και να μπορέσω να επεξεργαστώ τα συμβάντα. Ευχαριστώ
ΔΗΜΙΟΥΡΓΙΑ ΔΕΔΟΜΕΝΩΝ ΕΑΝ ΔΕΝ ΥΠΑΡΧΕΙ «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
γεια σας migos υπάρχει τρόπος να αλλάξετε τη μορφή ημερομηνίας JSON
Το ημερολόγιο είναι πολύ καλό, μόνο όταν προσθέτω ένα νέο συμβάν η ημερομηνία που με παίρνει από προεπιλογή τόσο στην αρχή όσο και στο τέλος είναι σε αγγλική μορφή, πώς μπορώ να το αλλάξω σε ισπανικά; Θα ήταν ΗΗ / ΜΜ / ΕΕΕΕ. Ευχαριστώ πολύ και χαιρετισμούς
Γεια σας, το ημερολόγιο είναι πολύ καλό, αλλά κατά την ενημέρωση μιας ημερομηνίας δεν αντικατοπτρίζεται αμέσως στο ημερολόγιο. Τι μπορώ να κάνω ?
Έχω επίσης ένα άλλο πρόβλημα, πώς μπορώ να κάνω την εμφάνιση όλων των πόντων στη μηνιαία προβολή, είναι δυνατόν να μεγεθύνετε το τετράγωνο; τι αντιστοιχεί σε μια μέρα;
Έχω το πρόβλημα ότι τοπικά όταν φορτώνω το παράδειγμα λειτουργεί τέλεια, αλλά όταν το ανεβάζω σε έναν διαδικτυακό διακομιστή δεν μου δείχνει τίποτα από το ημερολόγιο, μόνο τα κουμπιά. Οποιαδήποτε ιδέα τι μπορεί να είναι ή τι είναι λάθος με τον διακομιστή για να το διορθώσετε παρακαλώ.