Egyre jobban lenyűgöz bennünket az a hatalmas közösség, amely körül forog Bootstrap, egy jól ismert CSS keretrendszer , készítette: Twitter. Ezúttal egy Bootstrap alapú naptárat mutatok be nektek Javascript és JQuery programozással, Részletesen elmagyarázom a naptár működésének egy részét, és hozzáadok néhány trükköt és fejlesztést, amelyeket megtehet.
Ez a Bootstrap naptár tiszta kivitelű és teljesen fogékony, minden eszközről jól fog kinézni! Ez magában foglalja a fordítás több mint 7 nyelvre és minden minden ország ünnepi dátumát kiemelik és megjegyzik. Luxus!
Ennek a Bootstrap-naptárnak a működése kissé összetett, kezdetben egy JSON-fájlból bontja ki a felhasználó dátumait, de kizárólag a Creativos OnlineElmagyarázom, hogyan bontsa ki az eseményeket egy MYSQL adatbázisból bármely rendszer tökéletes megvalósításához.
Ismert adatbázis-rendszer
Az alkalmazás fő fájljainak funkciói:
INDEX.HTML
- Bootstrap 2.3.2 betöltése
- Naptár tervezés
- Események listája
- Navigálás a Naptárban
- Különböző naptár nézetek (nap / hét / hónap / év)
- Az alkalmazás betöltése JS-be
- Nyelvválasztás
INDEX-BS3.HTML
- Bootstrap 3.0 betöltése
- Naptár tervezés
- Eseménylista
- Navigálás a Naptárban
- Különböző naptár nézetek (nap / hét / hónap / év)
- Az alkalmazás betöltése JS-be
- Nyelvválasztás
ESEMÉNYEK.JSON.PHP
- Események listája a következő adatokkal:
- id: eseményazonosító
- cím: esemény címe
- url: az esemény URL-je
- osztály: esemény típusa (info | figyelmeztetés |…) a következő színekhez.
- Rajt: kezdő dátum
- vége: befejezési időpont
APP.JS
- Az alkalmazás konfigurációját tároló változók.
- Extra JQuery funkciók
NAPTÁR.JS
- Fő alkalmazásbeállítások
- A Naptár fő funkciói
- Események kivonása és kezelése
- Ünnepi időpontok
- Nyelv betöltése
- Az Események lista betöltése
- A különböző naptár nézetek betöltése (nap / hét / hónap / év)
NAPTÁR.CSS
- Naptárstílusok
- Eseménylista stílusok
- Naptárstílusok más eszközökhöz
Bontsa ki az eseményeket az adatbázisból
Az események kibontása egy MYSQL adatbázisból kicseréljük a fájl sorait events.json.php by:
<?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 naptár
Letöltés | Bootstrap naptár
Tudjon meg többet | Bootstrap: CSS keretrendszer
ahogy megnézem a Sergio kódot
A kód már ellenőrzött! Az egyetlen dolog, létre kell hoznia az «események» táblázatot az adatbázisában a következő mezőkkel: {id | otthon | vége | név | osztály | url} és konfigurálja az adatbázis elérését!
Megváltoztattam ezeket a változókat mások számára, és ez lehetővé tette számomra, hogy felvegyem az eseményt az adatbázisomba, de nem látom, hogy ez tükröződjön a naptárban. És hogyan tudnám visszaállítani az események adatait attól függően, hogy milyen napra kattintok a naptárra?
Az események létrehozásához és végrehajtásához létre kell hozni egy adatbázist, de miről szól, hogy hozzá tudom fűzni az eseményeket, és alapértelmezés szerint a nyelvet a spanyolhoz, mert alapértelmezés szerint angolul van megadva
A nyelv alapértelmezett beállítása spanyol, a legjobb, ha a spanyol nyelvű fájl meglévő karakterláncait lecseréli a calendar.js fájlban található angol nyelvű karakterláncokra. Vannak azonban más rendesebb módszerek is, amelyek megtalálhatók a szkript fő webhelyén vagy a Github közösségben, ehhez a bejegyzéshez csatolva.
Néhány hét múlva megpróbálok feltölteni egy új bejegyzést, ahol elmagyarázom, hogyan lehet létrehozni az események beillesztését az adatbázisba.
Nagyon köszönöm, meg fogom értékelni a bejegyzést az események beillesztéséért :)
szia, problémám van, amikor mindent kijavítok a csatlakozáshoz, és kivonatom az adataimat az adatbázisból, ez nem mutat semmilyen eseményt
nem szúr be eseményt az adatbázisba
Fel tudná adni, hogyan illessze be az eseményeket? a kezdő és a vég mezőben milyen adatokról van szó? időbélyeg? "0" maradt, be kell illesztenem és szerkesztenem kell az eseményeket. Köszönöm
LÉTREHOZ ADATBÁZISOT, HA NINCS LÉTRE `bootstrap_calendar` / *! 40100 DEFAULT CHARACTER SET utf8 COLLATE utf8_spanish_ci * /;
HASZNÁLATA `bootstrap_calendar`;
- MySQL dump 10.13 Terjesztés 5.6.13, Win32 (x86) esetén
-
- Host: 127.0.0.1 Adatbázis: bootstrap_calendar
- ——————————————————
- A szerver 5.5.27 verziója
/ *! 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 BEÁLLÍTOTT NEVEK 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 * /;
-
- Táblázat felépítése a táblázat eseményeihez
-
EZT TÁBLÁZAT, HA LÉTEZIK "eseményeket";
/ *! 40101 SET @saved_cs_client = @@ character_set_client * /;
/ *! 40101 SET karakter_készlet_ügyfél = utf8 * /;
CREATE TABLE `események '(
`id` int (10) aláíratlan NEM NULL AUTO_INCREMENT,
`title` varchar (150) COLLATE utf8_spanish_ci DEFAULT NULL,
`body` text COLLATE utf8_spanish_ci NEM NULL,
`url` varchar (150) COLLATE utf8_spanish_ci NEM NULL,
`class` varchar (45) COLLATE utf8_spanish_ci NEM NULL DEFAULT 'info',
`start` varchar (15) COLLATE utf8_spanish_ci NEM NULL,
`end` varchar (15) COLLATE utf8_spanish_ci NEM NULL,
ELSŐDLEGES KULCS (`id`)
) ENGINE = InnoDB DEFAULT CHARSET = utf8 COLLATE = utf8_spanish_ci;
/ *! 40101 SET karakter_készlet_ügyfél = @ mentett_cs_ügyfél * /;
-
- A tábla `események 'dömpingadatai
-
ZÁRÓTÁBLÁK `események` ÍRJ;
/ *! 40000 ALTER TABLE `események` KELLETT KULCSOK * /;
/ *! 40000 ALTER TABLE `események 'KULCSOK ENGEDÉLYEZÉSE * /;
TÁBLÁZATOK Kinyitása;
/ *! 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 * /;
- A dömping 2014-05-31 14:38:23
hello migos van-e mód a JSON dátumformátum megváltoztatására
A naptár nagyon jó, csak akkor, ha új esemény hozzáadásakor a dátum alapértelmezés szerint mind az elején, mind a végén angol formátumú, hogyan változtatom meg spanyolra? NN / HH / ÉÉÉÉ lenne. Köszönöm szépen és köszönöm
Helló, a naptár nagyon jó, de a dátum frissítésekor nem jelenik meg azonnal a naptárban. Mit tudok tenni ?
Van egy másik problémám is, hogyan tudom az összes pontot megjeleníteni a havi nézetben, meg lehet-e növelni a négyzetet? mi felel meg egy napnak?
Nekem az a problémám, hogy lokálisan a példa betöltésekor tökéletesen működik, de amikor feltöltöm egy online szerverre, a naptárból csak a gombok jelennek meg. Bármilyen ötlet, hogy mi lehet, vagy mi a baj a szerverrel, hogy kijavítsa.