Stále viac na nás robí dojem ohromná komunita, ktorá sa krúti okolo Bootstrap, známy rámec CSS , vytvorené na Twitteri. Tentokrát vám predstavujem kalendár založený na Bootstrape naprogramované pomocou Javascript a JQuery, Tiež podrobne vysvetlím časť fungovania kalendára a pridám niekoľko trikov a vylepšení, ktoré môžete urobiť.
Tento kalendár Bootstrap má čistý dizajn a je úplne citlivý, bude to vyzerať dobre zo všetkých zariadení! Zahŕňa tiež a preklad do viac ako 7 jazykov a všetko slávnostné dátumy každej krajiny sú zvýraznené a zaznamenané. Luxus!
Činnosť tohto bootstrap kalendára je trochu zložitá, najprv extrahuje dátumy používateľa zo súboru JSON, ale výlučne pre používateľov Creativos Onlinevysvetlím ako extrahovať udalosti z MYSQL databázy pre jeho dokonalú implementáciu v akomkoľvek systéme.
Známy databázový systém
Funkcie hlavných súborov aplikácie:
INDEX.HTML
- Načítanie Bootstrap 2.3.2
- Dizajn kalendára
- Zoznam udalostí
- Navigácia v kalendári
- Rôzne zobrazenia kalendára (deň / týždeň / mesiac / rok)
- Načítava sa aplikácia v JS
- Výber jazyka
INDEX-BS3.HTML
- Načítanie Bootstrap 3.0
- Dizajn kalendára
- Zoznam udalostí
- Navigácia v kalendári
- Rôzne zobrazenia kalendára (deň / týždeň / mesiac / rok)
- Načítava sa aplikácia v JS
- Výber jazyka
PODUJATIA.JSON.PHP
- Zoznam udalostí s nasledujúcimi údajmi:
- id: identifikátor udalosti
- názov: názov udalosti
- url: adresa udalosti
- trieda: typ udalosti (info | varovanie |…) pre nasledujúce farby.
- štart: dátum začiatku
- koniec: Dátum ukončenia
APP.JS
- Premenné, ktoré ukladajú konfiguráciu aplikácie.
- Extra funkcie JQuery
KALENDÁR.JS
- Hlavné nastavenia aplikácie
- Hlavné funkcie kalendára
- Extrakcia a spracovanie udalostí
- Sviatočné dátumy
- Načítanie jazyka
- Načítava sa zoznam udalostí
- Načítavajú sa rôzne zobrazenia kalendára (deň / týždeň / mesiac / rok)
KALENDÁR.CSS
- Štýly kalendára
- Štýly zoznamov udalostí
- Štýly kalendára pre iné zariadenia
Extrahujte udalosti z databázy
Extrahovať udalosti z databázy MYSQL nahradíme riadky súboru events.json.php od:
<?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 kalendár
Stiahnutie | Bootstrap kalendár
Viac informácií Bootstrap: rámec CSS
keď kontrolujem kód Sergio
Kód je už skontrolovaný! Jediná vec, ktorú musíte vytvoriť vo vašej databáze «udalosti» s nasledujúcimi poľami: {id | domov | koniec | meno | trieda | url} a nakonfigurujte prístup do svojej databázy!
Tieto premenné som zmenil pre ostatných a umožnilo mi to pridať udalosť do mojej databázy, ale nevidím to v kalendári. A ako by som mohol obnoviť údaje o udalostiach v závislosti od dňa, keď kliknem na kalendár?
Ak chcete vytvoriť a vykonať vytváranie udalostí, musíte vytvoriť databázu, ale o čo ide, je, že k nej môžem pridať udalosti a ako predvolený jazyk sa používa španielčina, pretože je predvolene definovaná ako angličtina.
Ak chcete predvoliť jazyk španielčiny, je najlepšie nahradiť existujúce reťazce v súbore španielskeho jazyka reťazcami v angličtine v súbore calendar.js. Existujú však aj iné elegantnejšie metódy, ktoré nájdete na hlavnej webovej stránke skriptu alebo v komunite Github, ktorá je pripojená k tomuto príspevku.
Tiež sa pokúsim o pár týždňov nahrať nový príspevok, kde vysvetlím, ako vytvoriť vkladanie udalostí do databázy.
Ďakujem pekne, oceníme príspevok na vloženie udalostí :)
ahoj Mám problém, keď opravím všetko, aby som sa pripojil a extrahoval svoje údaje z databázy, nezobrazuje mi žiadne udalosti
nevloží udalosť do databázy
Mohli by ste zverejniť, ako vkladať udalosti? v začiatočnom a koncovom poli, o aký typ údajov ide? časová značka? Zostáva „0“, musím vložiť a upravovať udalosti. Ďakujem
VYTVORIŤ DATABÁZU, AK NEDOSTANE `bootstrap_calendar` / *! 40100 SADA VÝCHOZÍCH ZNAKOV utf8 COLLATE utf8_spanish_ci * /;
POUŽIJTE `bootstrap_calendar`;
- MySQL výpis 10.13 Distrib 5.6.13, pre Win32 (x86)
-
- Hostiteľ: 127.0.0.1 Databáza: bootstrap_calendar
- ———————————————————
- Serverová verzia 5.5.27
/ *! 40101 SET @OLD_CHARACTER_SET_CLIENT = @@ CHARACTER_SET_CLIENT * /;
/ *! 40101 SET @OLD_CHARACTER_SET_RESULTS = @@ CHARACTER_SET_RESULTS * /;
/ *! 40101 SADA @OLD_COLLATION_CONNECTION = @@ COLLATION_CONNECTION * /;
/ *! 40101 NASTAVENÉ NÁZVY 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 SADA @OLD_SQL_NOTES = @@ SQL_NOTES, SQL_NOTES = 0 * /;
-
- Štruktúra tabuľky pre `udalosti` tabuľky
-
DROP TABUĽKA AK EXISTUJÚ `udalosti`;
/ *! 40101 SET @saved_cs_client = @@ character_set_client * /;
/ *! 40101 SET character_set_client = utf8 * /;
VYTVORIŤ TABUĽKU `udalosti` (
`id` int (10) nepodpísané NOT NULL AUTO_INCREMENT,
`title` varchar (150) COLLATE utf8_spanish_ci DEFAULT NULL,
text „tela“ COLLATE utf8_spanish_ci NIE JE NULL,
`url` varchar (150) COLLATE utf8_spanish_ci NOT NULL,
`class` varchar (45) COLLATE utf8_spanish_ci NOT NULL DEFAULT 'informácie',
`start` varchar (15) COLLATE utf8_spanish_ci NIE JE NULL,
`end` varchar (15) COLLATE utf8_spanish_ci NIE JE NULL,
PRIMÁRNY KLÍČ (`id`)
) ENGINE = InnoDB DEFAULT CHARSET = utf8 COLLATE = utf8_spanish_ci;
/ *! 40101 SET character_set_client = @saved_cs_client * /;
-
- Dumpingové údaje pre tabuľky `udalosti`
-
ZÁMKOVÉ TABUĽKY `udalosti` NAPÍŠTE;
/ *! 40000 ALTER TABUĽKA `udalosti` ZAKÁZAŤ KLÁVESY * /;
/ *! 40000 ALTER TABUĽKA `udalosti` POVOLIŤ KLÁVESY * /;
ODOMKNÚŤ TABULE;
/ *! 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 SADA SQL_NOTES = @ OLD_SQL_NOTES * /;
- Výpis dokončený 2014-05-31 14:38:23
ahoj migos je nejaký spôsob, ako zmeniť formát dátumu JSON
Kalendár je veľmi dobrý, iba ak pridám novú udalosť, je dátum, ktorý je predvolene nastavený na začiatku aj na konci, v anglickom formáte, ako ho zmením na španielsky? Bolo by to DD / MM / RRRR. Dakujem pekne a pozdravujem
Dobrý deň, kalendár je veľmi dobrý, ale aktualizácia dátumu sa v kalendári neprejaví okamžite. Čo môžem urobiť ?
Mám tiež ďalší problém, ako môžem vytvoriť zobrazenie všetkých bodov v mesačnom zobrazení, je možné zväčšiť štvorec? čo zodpovedá dňu?
Mám problém, že lokálne pri načítaní príkladu to funguje perfektne, ale keď ho nahrám na online server, neukáže mi to nič z kalendára, iba tlačidlá. Máte nejaké predstavy, čo môže byť alebo čo je v poriadku so serverom, aby to napravil.