Sve nas više impresionira ogromna zajednica koja se vrti oko nas Bootstrap, poznati CSS okvir , kreirao Twitter. Ovaj put vam predstavljam kalendar zasnovan na Bootstrapu programiran s Javascriptom i JQueryjem, Također ću detaljno objasniti dio rada kalendara i dodati ću neke trikove i poboljšanja koja možete učiniti.
Ovaj Bootstrap kalendar ima čist dizajn i potpuno je odziv, izgledat će dobro sa svih uređaja! Takođe uključuje a prijevod na više od 7 jezika i sve praznični datumi svake zemlje su istaknuti i zabilježeni. Luksuz!
Rad ovog Bootstrap kalendara je donekle složen, izvlači datume korisnika iz JSON datoteke u početku, ali isključivo za korisnike Creativos OnlineObjasniću kako izdvojiti događaje iz MYSQL baze podataka za njegovu savršenu implementaciju u bilo koji sistem.
Poznati sistem baze podataka
Funkcije glavnih datoteka aplikacije:
INDEX.HTML
- Učitavanje Bootstrapa 2.3.2
- Dizajn kalendara
- Spisak događaja
- Navigacija kalendarom
- Različiti prikazi kalendara (dan / sedmica / mjesec / godina)
- Učitavanje aplikacije u JS
- Izbor jezika
INDEX-BS3.HTML
- Učitavanje Bootstrapa 3.0
- Dizajn kalendara
- Lista događaja
- Navigacija kalendarom
- Različiti prikazi kalendara (dan / sedmica / mjesec / godina)
- Učitavanje aplikacije u JS
- Izbor jezika
DOGAĐAJI.JSON.PHP
- Spisak događaja sa sljedećim podacima:
- id: identifikator događaja
- naslov: naslov događaja
- url: url događaja
- klasa: tip događaja (informacije | upozorenje |…) za naredne boje.
- početak: datum početka
- kraj: datum raskida
APP.JS
- Varijable koje pohranjuju konfiguraciju aplikacije.
- Dodatne JQuery funkcije
KALENDAR.JS
- Glavne postavke aplikacije
- Glavne funkcije kalendara
- Izdvajanje i tretman događaja
- Svečani datumi
- Učitavanje jezika
- Učitavanje liste događaja
- Učitavanje različitih prikaza kalendara (dan / sedmica / mjesec / godina)
KALENDAR.CSS
- Stilovi kalendara
- Stilovi liste događaja
- Stilovi kalendara za druge uređaje
Izdvajanje događaja iz baze podataka
Za izdvajanje događaja iz MYSQL baze podataka zamijenit ćemo retke datoteke 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 Calendar
Preuzmi | Bootstrap Calendar
Više informacija | Bootstrap: CSS Framework
dok provjeravam kod Sergio
Kôd je već provjeren! Jedina stvar, u svojoj bazi podataka morate stvoriti tabelu «događaji» sa sljedećim poljima: {id | home | kraj | ime | razred | url} i konfigurirajte pristup svojoj bazi podataka!
Promijenio sam te varijable za druge i omogućilo mi je da događaj dodam u svoju bazu podataka, ali ne vidim da se to odražava u kalendaru. I kako bih mogao povratiti podatke o događajima, ovisno o danu kada kliknem na kalendar?
Da biste izveli i izveli stvaranje događaja, tada se mora stvoriti baza podataka, ali ono o čemu se radi je u tome da joj mogu dodavati događaje, a po defaultu jezik na španski jer je prema zadanim postavkama definiran kao engleski
Da biste jezik postavili na španski, najbolje je zamijeniti postojeće nizove u datoteci španskog jezika onim na engleskom u datoteci calendar.js. Međutim, postoje i druge urednije metode, koje možete pronaći na glavnom web mjestu skripte ili u Github zajednici, priloženom uz ovaj post.
Takođe, pokušat ću za nekoliko tjedana uploadati novi post gdje ću objasniti kako stvoriti umetanje događaja u bazu podataka.
Puno vam hvala, cijenit ću post za umetanje događaja :)
zdravo Imam problem kada popravim sve da bih se povezao i izvukao svoje podatke iz baze podataka, ne prikazuje mi nikakve događaje
ne ubacuje događaj u bazu podataka
Možete li objaviti kako umetnuti događaje? u početnom i završnom polju o kojoj vrsti podataka se radi? vremenska oznaka? ostalo je "0", moram umetnuti i moći urediti događaje. Hvala
STVORI BAZU BAZA AKO NE POSTOJI `bootstrap_calendar` / *! 40100 ZADATAK KARAKTERA POSTAVLJEN utf8 COLLATE utf8_spanish_ci * /;
KORISTITE `bootstrap_calendar`;
- MySQL dump 10.13 Distrib 5.6.13, za Win32 (x86)
-
- Host: 127.0.0.1 Baza podataka: bootstrap_calendar
- ———————————————————
- Verzija servera 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 POSTAVLJANJE 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 `događaje` tabele
-
TAPELA ZA SPUSTANJE AKO POSTOJI `događaji`;
/ *! 40101 SET @saved_cs_client = @@ character_set_client * /;
/ *! 40101 POSTAVLJANJE character_set_client = utf8 * /;
STVORI TABELU `događanja` (
`id` int (10) unsigned NOT NULL AUTO_INCREMENT,
`title` varchar (150) COLLATE utf8_spanish_ci DEFAULT NULL,
`body` tekst COLLATE utf8_spanish_ci NIJE NULL,
`url` varchar (150) COLLATE utf8_spanish_ci NIJE NULL,
`class` varchar (45) COLLATE utf8_spanish_ci NOT NULL DEFAULT 'info',
`start` varchar (15) COLLATE utf8_spanish_ci NIJE NULL,
`end` varchar (15) COLLATE utf8_spanish_ci NIJE NULL,
OSNOVNI KLJUČ (`id`)
) MOTOR = InnoDB ZADATAK CHARSET = utf8 COLLATE = utf8_spanish_ci;
/ *! 40101 POSTAVLJANJE character_set_client = @saved_cs_client * /;
-
- Damping podaci za tabelu `događaji`
-
ZAKLJUČAJTE TABLICE `event` WRITE;
/ *! 40000 ALTER TABLE `events` DISABLE TASTERS * /;
/ *! 40000 ALTER TABLE `events` Omogućavanje tastera * /;
OTKLOPITE STOLOVE;
/ *! 40103 POSTAVLJANJE VRIJEME_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 POSTAVLJANJE COLLATION_CONNECTION = @ OLD_COLLATION_CONNECTION * /;
/ *! 40111 SET SQL_NOTES = @ OLD_SQL_NOTES * /;
- Deponija završena 2014. 05:31:14
zdravo migos, postoji li način da se promijeni format datuma JSON
Kalendar je vrlo dobar, samo kad dodam novi događaj, datum koji je prema zadanim postavkama potreban i na početku i na kraju je u engleskom formatu, kako da ga promijenim u španski? Bilo bi DD / MM / GGGG. Puno vam hvala i pozdrav
Pozdrav, kalendar je vrlo dobar, ali prilikom ažuriranja datuma to se ne odražava odmah u kalendaru. Šta mogu učiniti?
Također imam još jedan problem, kako mogu učiniti da se sve točke prikazuju u mjesečnom prikazu, da li je moguće povećati kvadrat? šta odgovara danu?
Imam problem što lokalno prilikom učitavanja primjera radi savršeno, ali kad ga prebacim na mrežni server, ne prikazuje mi ništa iz kalendara samo gumbi. Molim vas bilo kakvu ideju o tome šta može biti ili šta nije u redu sa serverom da bi to popravio.