Vse bolj nas navdušuje neizmerna skupnost, ki se vrti okoli Bootstrap, dobro znan okvir CSS , ki ga je ustvaril Twitter. Tokrat vam predstavljam koledar na osnovi Bootstrapa programiran z Javascriptom in JQueryjem, Podrobno bom razložil tudi del delovanja koledarja in dodal nekaj trikov in izboljšav, ki jih lahko naredite.
Ta koledar Bootstrap ima čisto obliko in je popolnoma odziven, bo videti dobro iz vseh naprav! Vključuje tudi a prevod v več kot 7 jezikov in vse praznični datumi posamezne države so poudarjeni in zabeleženi. Razkošje!
Delovanje tega koledarja Bootstrap je nekoliko zapleteno, na začetku ekstrahira datume uporabnika iz datoteke JSON, vendar izključno za uporabnike Creativos OnlinePojasnil bom, kako izvleči dogodke iz baze podatkov MYSQL za popolno uporabo v katerem koli sistemu.
Znani sistem zbirke podatkov
Funkcije glavnih datotek aplikacije:
INDEX.HTML
- Nalaganje zagonskega traku 2.3.2
- Oblikovanje koledarja
- Seznam dogodkov
- Krmarjenje po koledarju
- Različni pogledi koledarja (dan / teden / mesec / leto)
- Nalaganje aplikacije v JS
- Izbira jezika
INDEX-BS3.HTML
- Nalaganje zagonskega traku 3.0
- Oblikovanje koledarja
- Seznam dogodkov
- Krmarjenje po koledarju
- Različni pogledi koledarja (dan / teden / mesec / leto)
- Nalaganje aplikacije v JS
- Izbira jezika
DOGODKI.JSON.PHP
- Seznam dogodkov z naslednjimi podatki:
- id: identifikator dogodka
- Naslov: naslov dogodka
- url: url dogodka
- razred: vrsta dogodka (informacije | opozorilo |…) za naslednje barve.
- začetek: začetni datum
- konec: datum odpovedi
APP.JS
- Spremenljivke, ki shranjujejo konfiguracijo aplikacije.
- Dodatne funkcije JQuery
KOLEDAR.JS
- Glavne nastavitve aplikacije
- Glavne funkcije koledarja
- Izvleček in obravnava dogodkov
- Praznični zmenki
- Nalaganje jezika
- Nalaganje seznama dogodkov
- Nalaganje različnih pogledov koledarja (dan / teden / mesec / leto)
KOLEDAR.CSS
- Slogi koledarja
- Slogi seznama dogodkov
- Slogi koledarja za druge naprave
Izvleči dogodke iz baze podatkov
Če želite izvleči dogodke iz baze podatkov MYSQL zamenjali bomo vrstice datoteke dogodki.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 | Bootstrap koledar
Prenos | Bootstrap koledar
Več informacij | Bootstrap: ogrodje CSS
ko preverjam kodo Sergio
Koda je že preverjena! Edino, v tabeli morate ustvariti tabelo «dogodki» z naslednjimi polji: {id | domov | konec | ime | razred | url} in nastavite dostop do vaše baze podatkov!
Te spremenljivke sem spremenil za druge in mi je omogočil, da dogodek dodam v svojo bazo podatkov, vendar tega ne vidim v koledarju. In kako lahko obnovim podatke o dogodkih, odvisno od dneva, ko kliknem na koledar?
Če želite narediti in izvesti ustvarjanje dogodkov, je treba ustvariti bazo podatkov, vendar gre za to, da ji lahko dodam dogodke in privzeto jezik španščini, ker je privzeto opredeljena kot angleščina
Če želite jezik privzeti za španščino, je najbolje, da obstoječe nize v španski jezikovni datoteki zamenjate s tistimi v angleščini v datoteki calendar.js. Obstajajo pa tudi druge bolj natančne metode, ki jih najdete na glavnem spletnem mestu skripta ali v skupnosti Github, ki je priložena tej objavi.
Prav tako bom čez nekaj tednov poskusil naložiti novo objavo, kjer bom razložil, kako ustvariti vstavljanje dogodkov v bazo podatkov.
Najlepša hvala, cenil bom prispevek za vstavljanje dogodkov :)
pozdravljeni, imam težavo, ko popravim vse, da se povežem in izvlečem podatke iz baze podatkov, ne kaže mi nobenih dogodkov
ne vstavi dogodka v bazo podatkov
Bi lahko objavili, kako vstaviti dogodke? v začetnem in končnem polju za katero vrsto podatkov gre? časovni žig? Preostalo "0", moram vstaviti in urediti dogodke. Hvala vam
USTVARI PODATKOVNO BAZO, ČE NE OBSTAJA `bootstrap_calendar` / *! 40100 PRIROČNI NASTAVLJENI KARAKTERJI utf8 COLLATE utf8_spanish_ci * /;
UPORABI `bootstrap_calendar`;
- MySQL dump 10.13 Distrib 5.6.13, za Win32 (x86)
-
- Gostitelj: 127.0.0.1 Zbirka podatkov: bootstrap_calendar
- ——————————————————
- Različica strežnika 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 NASTAVITE IMENA 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 * /;
-
- Struktura tabele za "dogodke" tabele
-
TAPELA ZA PUST, ČE OBSTAJA "dogodki";
/ *! 40101 SET @saved_cs_client = @@ character_set_client * /;
/ *! 40101 NASTAVI znakovni_naročnik = utf8 * /;
USTVARI TABELO `dogodki` (
`id` int (10) unsigned NOT NULL AUTO_INCREMENT,
`title` varchar (150) ZBIRANJE utf8_spanish_ci PRIROČNO NULL,
besedilo `body` COLLATE utf8_spanish_ci NOT NULL,
`url` varchar (150) ZDRUŽI utf8_spanish_ci NOT NULL,
`class` varchar (45) COLLATE utf8_spanish_ci NOT NULL DEFAULT 'info',
`start` varchar (15) ZBIRANJE utf8_spanish_ci NOT NULL,
`end` varchar (15) ZBIRANJE utf8_spanish_ci NOT NULL,
OSNOVNI KLJUČ (`id`)
) MOTOR = PRIROČNA KARTICA InnoDB = utf8 COLLATE = utf8_spanish_ci;
/ *! 40101 NASTAVI znak_nastavkov = @saved_cs_client * /;
-
- podatki o dampingu za tabelo `dogodki`
-
ZAKLJUČNE MIZE `dogodki` PIŠITE;
/ *! 40000 ALTER TABLE `events` DISABLE KEY * /;
/ *! 40000 ALTER TABLE `events` OMOGOČI KLJUČE * /;
ODKLOPITE MIZE;
/ *! 40103 NASTAVI ČAS_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 * /;
- Odlagališče končano dne 2014 05:31:14
pozdravljeni migos, ali lahko na kakšen način spremenite obliko datuma JSON
Koledar je zelo dober, le če dodam nov dogodek, je datum, ki je privzeto na začetku in na koncu, v angleški obliki, kako ga spremenim v španščino? Bilo bi DD / MM / LLLL. Najlepša hvala in lep pozdrav
Pozdravljeni, koledar je zelo dober, vendar se posodobitev datuma v koledarju ne odrazi takoj. Kaj lahko naredim ?
Imam tudi drugo težavo, kako naj omogočim prikaz vseh točk v mesečnem pogledu, ali je mogoče kvadrat povečati? kaj ustreza dnevu?
Imam težavo, da lokalno pri nalaganju primera deluje popolnoma, toda ko ga naložim na spletni strežnik, mi iz koledarja ne prikaže ničesar le gumbi. Vsako idejo, kaj je morda ali kaj je narobe s strežnikom, da to popravi, prosimo.