Nous sommes de plus en plus impressionnés par l'immense communauté qui tourne autour Bootstrap, un framework CSS bien connu , créé par Twitter. Cette fois, je vous présente un calendrier basé sur Bootstrap programmé avec Javascript et JQueryDe plus, j'expliquerai en détail une partie du fonctionnement du calendrier et j'ajouterai quelques astuces et améliorations que vous pouvez faire.
Ce calendrier Bootstrap a un design épuré et est totalement sensible, il aura fière allure sur tous les appareils! Il intègre également un traduction dans plus de 7 langues et tout les dates festives de chaque pays sont mises en évidence et notées. Un luxe!
Le fonctionnement de ce calendrier Bootstrap est quelque peu complexe, il extrait les dates de l'utilisateur d'un fichier JSON dans un premier temps, mais, exclusivement pour les utilisateurs de Creativos Onlineje vais vous expliquer comment extraire les événements d'une base de données MYSQL pour sa mise en œuvre parfaite dans n'importe quel système.
Système de base de données bien connu
Fonctions des principaux fichiers de l'application:
INDEX.HTML
- Chargement de Bootstrap 2.3.2
- Conception de calendrier
- Liste des événements
- Naviguer dans le calendrier
- Différentes vues du calendrier (jour / semaine / mois / année)
- Chargement de l'application dans JS
- Sélection de la langue
INDEX-BS3.HTML
- Chargement de Bootstrap 3.0
- Conception de calendrier
- Liste des événements
- Naviguer dans le calendrier
- Différentes vues du calendrier (jour / semaine / mois / année)
- Chargement de l'application dans JS
- Sélection de la langue
ÉVÉNEMENTS.JSON.PHP
- Liste des événements avec les données suivantes:
- id: identifiant d'événement
- titre: titre de l'événement
- url: URL de l'événement
- classe: type d'événement (info | avertissement |…) pour les couleurs suivantes.
- Démarrer: date de début
- fin: date de résiliation
APP.JS
- Variables qui stockent la configuration de l'application.
- Fonctions JQuery supplémentaires
CALENDRIER.JS
- Paramètres principaux de l'application
- Principales fonctions du calendrier
- Extraction et traitement des événements
- Dates festives
- Chargement de la langue
- Chargement de la liste des événements
- Chargement des différentes vues du calendrier (jour / semaine / mois / année)
CALENDRIER.CSS
- Styles de calendrier
- Styles de liste d'événements
- Styles de calendrier pour d'autres appareils
Extraire des événements d'une base de données
Pour extraire les événements d'une base de données MYSQL nous remplacerons les lignes du fichier événements.json.php par:
<?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 | Calendrier Bootstrap
Télécharger | Calendrier Bootstrap
En savoir plus | Bootstrap : cadre CSS
comme je vérifie le code Sergio
Le code est déjà vérifié! La seule chose, vous devez créer la table «événements» dans votre base de données avec les champs suivants: {id | accueil | fin | nom | classe | url} et configurez l'accès à votre base de données!
J'ai changé ces variables pour d'autres, et cela m'a permis d'ajouter l'événement à ma base de données, mais je ne le vois pas reflété dans le calendrier. Et comment récupérer les données des événements en fonction du jour où je clique sur le calendrier?
Pour faire et effectuer la création d'événements, alors une base de données doit être créée, mais ce dont il s'agit, c'est que je peux y ajouter des événements et par défaut la langue à l'espagnol car elle est définie comme l'anglais par défaut
Pour prédéfinir la langue en espagnol, il est préférable de remplacer les chaînes existantes dans le fichier de langue espagnole par celles en anglais dans le fichier calendar.js. Cependant, il existe d'autres méthodes plus soignées, vous pouvez les trouver sur le site principal du script ou dans la communauté Github, attachée à ce post.
Aussi, j'essaierai de télécharger un nouveau post dans quelques semaines où je vous expliquerai comment créer l'insertion d'événements dans la base de données.
Merci beaucoup, j'apprécierai le post pour insérer des événements :)
bonjour j'ai un problème quand je répare tout pour me connecter et extraire mes données de la base de données cela ne me montre aucun événement
n'insère pas d'événement dans la base de données
Pourriez-vous publier comment insérer des événements? dans les champs de début et de fin de quel type de données s'agit-il? horodatage? il reste "0", j'ai besoin d'insérer et de pouvoir éditer les événements. Merci
CRÉER UNE BASE DE DONNÉES S'IL N'EXISTE PAS `bootstrap_calendar` / *! 40100 DEFAULT CHARACTER SET utf8 COLLATE utf8_spanish_ci * /;
UTILISEZ `bootstrap_calendar`;
- MySQL dump 10.13 Distrib 5.6.13, pour Win32 (x86)
-
- Hôte: 127.0.0.1 Base de données: bootstrap_calendar
- ———————————————————
- Version du serveur 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 DÉFINIR LES NOMS 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 * /;
-
- Structure de la table pour les événements de la table
-
DROP TABLE IF EXISTS `événements`;
/ *! 40101 SET @saved_cs_client = @@ character_set_client * /;
/ *! 40101 SET jeu_caractères_client = utf8 * /;
CREATE TABLE `événements` (
`id` int (10) unsigned NOT NULL AUTO_INCREMENT,
`title` varchar (150) COLLATE utf8_spanish_ci DEFAULT NULL,
`body` text COLLATE utf8_spanish_ci NON NULL,
`url` varchar (150) COLLATE utf8_spanish_ci NOT NULL,
`class` varchar (45) COLLATE utf8_spanish_ci NOT NULL DEFAULT 'info',
`start` varchar (15) COLLATE utf8_spanish_ci NOT NULL,
`end` varchar (15) COLLATE utf8_spanish_ci NOT NULL,
CLÉ PRIMAIRE (`id`)
) MOTEUR = InnoDB DEFAULT CHARSET = utf8 COLLATE = utf8_spanish_ci;
/ *! 40101 SET character_set_client = @saved_cs_client * /;
-
- Dumping des données pour la table `événements`
-
LOCK TABLES `événements` WRITE;
/ *! 40000 ALTER TABLE `événements` DISABLE KEYS * /;
/ *! 40000 ALTER TABLE `événements` ENABLE KEYS * /;
DÉVERROUILLER LES TABLES;
/ *! 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 * /;
- Décharge terminée le 2014/05/31 14:38:23
bonjour migos existe-t-il un moyen de changer le format de date JSON
Le calendrier est très bon, seulement lors de l'ajout d'un nouvel événement, la date qu'il prend par défaut au début et à la fin est au format anglais, comment puis-je le changer en espagnol? Ce serait JJ / MM / AAAA. Merci beaucoup et salutations
Bonjour, le calendrier est très bon, mais lors de la mise à jour d'une date, il ne se reflète pas immédiatement dans le calendrier. Qu'est-ce que je peux faire ?
J'ai aussi un autre problème, comment puis-je faire afficher tous les points dans la vue mensuelle, est-il possible d'agrandir le carré? qu'est-ce qui correspond à un jour?
J'ai le problème que localement lors du chargement de l'exemple, cela fonctionne parfaitement, mais lorsque je le télécharge sur un serveur en ligne, il ne me montre rien du calendrier uniquement les boutons. Toute idée de ce qui peut être ou de ce qui ne va pas avec le serveur pour le réparer s'il vous plaît.