Sve nas više impresionira golema zajednica koja se vrti oko nas Bootstrap, poznati CSS okvir , stvorio Twitter. Ovaj put predstavljam kalendar zasnovan na Bootstrapu programiran s Javascriptom i JQueryjemUz to, detaljno ću 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 osjetljiv, izgledat će dobro sa svih uređaja! Također uključuje a prijevod na više od 7 jezika i sve istaknuti su i zabilježeni svečani datumi svake zemlje. Luksuz!
Rad ovog Bootstrap kalendara je donekle složen, prvo izvlači korisničke datume iz JSON datoteke, ali isključivo za korisnike Creativos OnlineObjasnit ću kako izdvojiti događaje iz MYSQL baze podataka za njegovu savršenu primjenu u bilo kojem sustavu.
Dobro poznati sustav baze podataka
Funkcije glavnih datoteka aplikacije:
INDEX.HTML
- Učitavanje bootstrapa 2.3.2
- Dizajn kalendara
- Popis događaja
- Navigacija kalendarom
- Različiti prikazi kalendara (dan / tjedan / mjesec / godina)
- Učitavanje aplikacije u JS
- Odabir jezika
INDEX-BS3.HTML
- Učitavanje bootstrapa 3.0
- Dizajn kalendara
- Popis događaja
- Navigacija kalendarom
- Različiti prikazi kalendara (dan / tjedan / mjesec / godina)
- Učitavanje aplikacije u JS
- Odabir jezika
DOGAĐAJI.JSON.PHP
- Popis događaja sa sljedećim podacima:
- id: identifikator događaja
- Naslov: naslov događaja
- url: url događaja
- razred: vrsta događaja (informacije | upozorenje |…) za sljedeće boje.
- početak: datum početka
- kraj: datum raskida
APP.JS
- Varijable koje pohranjuju konfiguraciju aplikacije.
- Dodatne funkcije JQuery
KALENDAR.JS
- Glavne postavke aplikacije
- Glavne funkcije Kalendara
- Izdvajanje i liječenje događaja
- Svečani datumi
- Učitavanje jezika
- Učitavanje popisa događaja
- Učitavanje različitih prikaza kalendara (dan / tjedan / mjesec / godina)
KALENDAR.CSS
- Stilovi kalendara
- Stilovi popisa 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 događaji.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 kalendar
Preuzmi | Bootstrap kalendar
Više informacija | Bootstrap: CSS Framework
dok provjeravam kod Sergio
Kôd je već provjeren! Jedino, u svojoj bazi podataka morate stvoriti tablicu «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 zapravo se radi o tome da joj mogu dodavati događaje, a prema zadanim postavkama jezik španjolskom jer je prema zadanim postavkama definiran kao engleski
Da biste zadani jezik postavili na španjolski, najbolje je zamijeniti postojeće nizove u datoteci španjolskog jezika onima 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 zajednici Github, priloženom uz ovaj post.
Također, pokušat ću za nekoliko tjedana prenijeti novi post gdje ću objasniti kako stvoriti umetanje događaja u bazu podataka.
Puno vam hvala, cijenit ću post za umetanje događaja :)
bok, imam problem kad 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 kakvim se podacima radi? vremenska oznaka? ostalo je "0", moram umetnuti i moći urediti događaje. Hvala
STVORI BAZU PODATAKA AKO NE POSTOJI `bootstrap_calendar` / *! 40100 ZADATAK POSTAVLJENI KARAKTERI 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 poslužitelja 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 POSTAVITE IMENA utf8 * /;
/ *! 40103 SET @OLD_TIME_ZONE = @@ TIME_ZONE * /;
/ *! 40103 POSTAVLJANJE VRIJEME_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 tablice za `događaje` tablice
-
TAPELA ZA PUSTO AKO POSTOJI `događaji`;
/ *! 40101 SET @saved_cs_client = @@ character_set_client * /;
/ *! 40101 POSTAVLJAJ_znak_klijenta = utf8 * /;
IZRADI 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 NOT 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 KARSETET = utf8 KOLATIRAJ = utf8_spanish_ci;
/ *! 40101 POSTAVLJAJ_znak_klijenta = @saved_cs_client * /;
-
- Damping podaci za tablicu `događaji`
-
ZAKLJUČAJTE TABLICE `events` WRITE;
/ *! 40000 ALTER TABLE `events` DISABLE TASTERS * /;
/ *! 40000 ALTER TABLE `events` Omogući tipke * /;
OTKLOPITE STOLOVE;
/ *! 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 POSTAVITE COLLATION_CONNECTION = @ OLD_COLLATION_CONNECTION * /;
/ *! 40111 SET SQL_NOTES = @ OLD_SQL_NOTES * /;
- Odlagalište završeno 2014-05-31 14:38:23
zdravo migos postoji li bilo kakav način promjene formata 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 španjolski? Bilo bi DD / MM / GGGG. Puno hvala i pozdrav
Pozdrav, kalendar je vrlo dobar, ali prilikom ažuriranja datuma to se ne odražava odmah u kalendaru. Što ja mogu učiniti ?
Također imam još jedan problem, kako mogu učiniti da se sve točke prikazuju u mjesečnom prikazu, je li moguće povećati kvadrat? što odgovara danu?
Imam problem što lokalno prilikom učitavanja primjera radi savršeno, ali kad ga prebacim na mrežni poslužitelj, ne prikazuje mi ništa iz gumba kalendara. Molim vas bilo kakvu ideju što može biti ili što nije u redu sa poslužiteljem da bi to popravio.