Ne jemi gjithnjë e më të impresionuar nga komuniteti i pamasë që rrotullohet Bootstrap, një kornizë e njohur CSS , krijuar nga Twitter. Këtë herë ju prezantoj një kalendar të bazuar në Bootstrap programuar me Javascript dhe JQuery, Unë gjithashtu do të shpjegoj në detaje një pjesë të funksionimit të kalendarit dhe do të shtoj disa truke dhe përmirësime që mund të bëni.
Ky kalendar Bootstrap ka një dizajn të pastër dhe është tërësisht responsiv, do të duket mirë nga të gjitha pajisjet! Ai gjithashtu përfshin një përkthim në më shumë se 7 gjuhë dhe të gjitha datat festive të secilit vend janë theksuar dhe shënuar. Një luks!
Funksionimi i këtij Kalendari Bootstrap është disi kompleks, ai nxjerr datat e përdoruesit nga një skedar JSON fillimisht, por, ekskluzivisht për përdoruesit e Creativos OnlineUnë do të shpjegoj se si nxjerrni ngjarjet nga një bazë e të dhënave MYSQL për implementimin perfekt të tij në çdo sistem.
Sistemi i njohur i bazës së të dhënave
Funksionet e skedarëve kryesorë të aplikacionit:
INDEX.HTML
- Bootstrap 2.3.2 po ngarkohet
- Hartimi i kalendarit
- Lista e ngjarjeve
- Lundrimi në Kalendar
- Pamje të ndryshme të kalendarit (dita / java / muaji / viti)
- Duke ngarkuar aplikacionin në JS
- Përzgjedhja e gjuhës
INDEX-BS3.HTML
- Bootstrap 3.0 po ngarkohet
- Hartimi i kalendarit
- Lista e ngjarjeve
- Lundrimi në Kalendar
- Pamje të ndryshme të kalendarit (Dita / Java / Muaji / Viti)
- Duke ngarkuar aplikacionin në JS
- Përzgjedhja e gjuhës
NGJARJE.JSON.PHP
- Lista e Ngjarjeve me të dhënat e mëposhtme:
- ID: identifikuesi i ngjarjes
- Titulli: titulli i ngjarjes
- url: url e ngjarjes
- klasa: lloji i ngjarjes (informacion | paralajmërim |…) për ngjyrat pasuese.
- filloni: data e fillimit
- fundi: data e përfundimit
APP.JS
- Variablat që ruajnë konfigurimin e aplikacionit.
- Funksione shtesë JQuery
KALENDARI.JS
- Cilësimet kryesore të aplikacionit
- Funksionet kryesore të Kalendarit
- Nxjerrja dhe trajtimi i ngjarjeve
- Datat festive
- Gjuha po ngarkohet
- Duke ngarkuar listën e Ngjarjeve
- Duke ngarkuar pamjet e ndryshme të Kalendarit (Dita / Java / Muaji / Viti)
KALENDAR.CSS
- Stilet e kalendarit
- Stilet e listës së ngjarjeve
- Stilet e kalendarit për pajisjet e tjera
Nxirrni ngjarje nga një bazë të dhënash
Për të nxjerrë ngjarjet nga një bazë të dhënash MYSQL ne do të zëvendësojmë linjat e skedarit ngjarjet.json.php por:
<?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 | Kalendari i bootstrap
Shkarkoni | Kalendari i bootstrap
Mëso më shumë | Bootstrap: Kuadri CSS
ndërsa kontrolloj kodin Sergio
Kodi është kontrolluar tashmë! E vetmja gjë, duhet të krijoni tabelën «ngjarje» në bazën tuaj të të dhënave me fushat e mëposhtme: {id | shtëpi | fund | emri | klasa | url} dhe konfiguroni hyrjen në bazën tuaj të të dhënave!
Unë i kam ndryshuar ato variabla për të tjerët dhe më ka lejuar të shtoj ngjarjen në bazën e të dhënave, por nuk e shoh të pasqyrohet në kalendar. Dhe si mund t'i rimarr të dhënat e ngjarjeve në varësi të ditës kur klikoj në kalendar?
Për të bërë dhe kryer krijimin e ngjarjeve, atëherë duhet të krijoni një bazë të dhënash, por ç'është çështja që unë mund t'i shtoj ngjarje dhe si parazgjedhje gjuha është spanjisht sepse është përcaktuar si anglisht si parazgjedhje
Për të paravendosur gjuhën në spanjisht, është më mirë të zëvendësoni vargjet ekzistuese në skedarin e gjuhës spanjolle me ato në anglisht në skedarin calendar.js. Sidoqoftë, ekzistojnë metoda të tjera më të mira, ato mund t'i gjeni në faqen kryesore të skenarit ose në komunitetin Github, bashkangjitur këtij postimi.
Gjithashtu, do të përpiqem të ngarkoj një post të ri brenda disa javësh ku do të shpjegoj se si të krijoj futjen e ngjarjeve në bazën e të dhënave.
Faleminderit shumë, do ta vlerësoj postimin për të futur ngjarje :)
Përshëndetje Kam një problem kur rregulloj gjithçka për t'u lidhur dhe nxjerrë të dhënat e mia nga baza e të dhënave nuk më tregon ndonjë ngjarje
nuk fut ngjarje në bazën e të dhënave
A mund të postoni si të futni ngjarjet? në fushat fillestare dhe fundore çfarë lloj të dhënash janë? vula kohore? ka mbetur "0", unë duhet të fut dhe të jem në gjendje të redaktoj ngjarjet. Faleminderit
KRIJONI BAZABN E TAT DHNAVE NESE NUK KA ekzistuar `bootstrap_calendar` / *! 40100 DEFULTI KARAKTERI I PAFT utf8 COLLATE utf8_spanish_ci * /;
PERDORNI `bootstrap_calendar`;
- MySQL dump 10.13 Shpërndarja 5.6.13, për Win32 (x86)
-
- Pritësi: 127.0.0.1 Baza e të dhënave: bootstrap_calendar
- ——————————————————
- Versioni i serverit 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 EMRAT E VEPRUAR 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 = 'JO_AUTO_VALUE_ON_ZERO' * /;
/ *! 40111 SET @OLD_SQL_NOTES = @@ SQL_NOTES, SQL_NOTES = 0 * /;
-
- Struktura e tryezës për ngjarjet e tryezës
-
TABELA POSHTE NESE ekziston `ngjarje`;
/ *! 40101 SET @saved_cs_client = @@ karakter_set_client * /;
/ *! 40101 SET karakter_set_klient = utf8 * /;
KRIJONI TABELN `ngjarje '(
`id` int (10) e nënshkruar JO NULL AUTO_INCREMENT,
`Titulli` varchar (150) COLLATE utf8_spanish_ci DEFAULT NULL,
`body` teksti COLLATE utf8_spanish_ci JO NUL,
`url` varchar (150) COLLATE utf8_spanish_ci NUK NULL,
`class` varchar (45) COLLATE utf8_spanish_ci NUK SHTYP NULL 'informacion',
`start` varchar (15) COLLATE utf8_spanish_ci NUK NULL,
`end` varchar (15) COLLATE utf8_spanish_ci JO NULL,
Çelësi primar (`id`)
) ENGINE = CHARSET DEFAULT InnoDB = utf8 COLLATE = utf8_spanish_ci;
/ *! 40101 SET karakter_set_klient = @saved_cs_client * /;
-
- Hedhja e të dhënave për tryezat `ngjarje`
-
SHKRUAN TABELAT E Bllokimit `ngjarje`;
/ *! 40000 ALTER TABELA `ngjarje` Çelësa të paaftë * /;
/ *! 40000 ALTER TABELA `Ngjarje` Çelësat e FALAS * /;
SHTYP TABELAT;
/ *! 40103 SET TIME_ZONE = @ OLD_TIME_ZONE * /;
/ *! 40101 SET SQL_MODE = @ OLD_SQL_MODE * /;
/ *! 40014 SET FOREIGN_KEY_CHECKS = @ OLD_FOREIGN_KEY_CHECKS * /;
/ *! 40014 VEPRIMI UNIQUE_CHECKS = @ OLD_UNIQUE_CHECKS * /;
/ *! 40101 Caktoni CHARACTER_SET_CLIENT = @ OLD_CHARACTER_SET_CLIENT * /;
/ *! 40101 Cakto CHARACTER_SET_RESULTS = @ OLD_CHARACTER_SET_RESULTS * /;
/ *! 40101 SET COLLATION_CONNECTION = @ OLD_COLLATION_CONNECTION * /;
/ *! 40111 SET SQL_NOTES = @ OLD_SQL_NOTES * /;
- Shkarkimi përfundoi më 2014-05-31 14:38:23
hello migos a ka ndonjë mënyrë për të ndryshuar formatin e datës JSON
Kalendari është shumë i mirë, vetëm kur shtoni një ngjarje të re data që e merr si parazgjedhje si në fillim ashtu edhe në fund është në formatin anglisht, si ta ndryshoj atë në spanjisht? Do të ishte DD / MM / VVV. Ju faleminderit shumë dhe përshëndetje
Përshëndetje, kalendari është shumë i mirë, por kur azhurnoni një datë nuk pasqyrohet menjëherë në kalendar. Cfare mund te bej ?
Unë gjithashtu kam një problem tjetër, si mund t'i bëj të gjitha pikat të shfaqen në pamjen mujore, a është e mundur të zmadhohet sheshi? çfarë korrespondon me një ditë?
Kam problemin që lokalisht kur ngarkoj shembullin funksionon në mënyrë perfekte por kur e ngarkoj në një server në internet nuk më tregon asgjë nga kalendari, vetëm butonat. Çdo ide se çfarë mund të jetë ose çfarë është e gabuar me serverin për ta rregulluar ju lutem.