Lalo kaming humanga sa napakalawak na pamayanan na umiikot Ang Bootstrap, isang kilalang balangkas ng CSS , nilikha ng Twitter. Sa oras na ito ipakita ko sa iyo ang isang kalendaryo na nakabatay sa Bootstrap na-program sa Javascript at JQuery, Ipapaliwanag ko rin nang detalyado ang bahagi ng pagpapatakbo ng kalendaryo at magdaragdag ako ng ilang mga trick at pagpapabuti na magagawa mo.
Ang kalendaryong Bootstrap na ito ay may malinis na disenyo at ganap nakikiramay, magiging maganda ang hitsura nito mula sa lahat ng mga aparato! Isinasama din dito ang a pagsasalin sa higit sa 7 mga wika at lahat ang maligaya na mga petsa ng bawat bansa ay nai-highlight at nabanggit. Isang luho!
Ang pagpapatakbo ng Bootstrap Calendar na ito ay medyo kumplikado, kinukuha nito ang mga petsa ng user mula sa isang JSON file sa simula, ngunit, eksklusibo para sa mga gumagamit ng Creativos OnlineIpapaliwanag ko kung paano kunin ang mga kaganapan mula sa isang database ng MYSQL para sa perpektong pagpapatupad nito sa anumang system.
Kilalang sistema ng Database
Mga pagpapaandar ng pangunahing mga file ng application:
INDEX.HTML
- Naglo-load ang Bootstrap 2.3.2
- Disenyo ng Kalendaryo
- Listahan ng mga Kaganapan
- Pagna-navigate sa Kalendaryo
- Iba't ibang mga view ng Kalendaryo (Araw / Linggo / Buwan / Taon)
- Nilo-load ang application sa JS
- Pagpili ng wika
INDEX-BS3.HTML
- Naglo-load ang Bootstrap 3.0
- Disenyo ng Kalendaryo
- Listahan ng kaganapan
- Pagna-navigate sa Kalendaryo
- Iba't ibang mga view ng kalendaryo (Araw / Linggo / Buwan / Taon)
- Nilo-load ang application sa JS
- Pagpili ng wika
PANGYAYARI.JSON.PHP
- Listahan ng Mga Kaganapan kasama ang sumusunod na data:
- id: tagatukoy ng kaganapan
- pamagat: pamagat ng kaganapan
- url: kaganapan url
- klase: uri ng kaganapan (impormasyon | babala |…) para sa kasunod na mga kulay.
- magsimula: petsa ng pagsisimula
- wakas: petsa ng pagwawakas
APP.JS
- Mga variable na nag-iimbak ng pagsasaayos ng application.
- Dagdag na mga pagpapaandar ng JQuery
CALENDAR.JS
- Pangunahing setting ng application
- Pangunahing pagpapaandar ng Kalendaryo
- Pagkuha at Paggamot ng mga kaganapan
- Mga petsa ng maligaya
- Paglo-load ng Wika
- Nilo-load ang listahan ng Mga Kaganapan
- Nilo-load ang iba't ibang mga view ng Kalendaryo (Araw / Linggo / Buwan / Taon)
CALENDAR.CSS
- Mga Estilo ng Kalendaryo
- Mga istilo ng listahan ng kaganapan
- Mga istilo ng kalendaryo para sa iba pang mga aparato
Mag-extract ng mga kaganapan mula sa isang database
Upang makuha ang mga kaganapan mula sa isang database ng MYSQL papalitan namin ang mga linya ng file mga kaganapan.json.php sa pamamagitan ng:
<?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 | Kalendaryo ng Bootstrap
Mag-download | Kalendaryo ng Bootstrap
Higit pang impormasyon | Bootstrap: CSS Framework
habang tinitingnan ko ang code na Sergio
Ang code ay naka-check na! Ang tanging bagay, kailangan mong likhain ang talahanayan «mga kaganapan» sa iyong database gamit ang mga sumusunod na patlang: {id | tahanan | wakas | pangalan | klase | url} at i-configure ang pag-access sa iyong database!
Binago ko ang mga variable na iyon para sa iba, at pinapayagan akong idagdag ang kaganapan sa aking database, ngunit hindi ko nakikita na makikita ito sa kalendaryo. At paano ko mababawi ang data ng mga kaganapan depende sa araw na nag-click ako sa kalendaryo?
Upang magawa at maisagawa ang paglikha ng mga kaganapan, dapat gawin ang isang database, ngunit ano ang tungkol dito ay maaari kong idagdag ang mga kaganapan dito at sa pamamagitan ng default ang wika sa Espanyol sapagkat ito ay tinukoy bilang Ingles bilang default
Upang mai-default ang wika sa Espanyol, pinakamahusay na palitan ang mga umiiral na mga string sa file na wikang Espanyol sa mga nasa Ingles sa file na kalendaryo.js Gayunpaman, may iba pang mga mas madaling pamamaraan, mahahanap mo ang mga ito sa pangunahing website ng script o sa komunidad ng Github, na nakakabit sa post na ito.
Gayundin, susubukan kong mag-upload ng isang bagong post sa loob ng ilang linggo kung saan ipapaliwanag ko kung paano lumikha ng pagpapasok ng mga kaganapan sa database.
Maraming salamat, pinahahalagahan ko ang post upang magsingit ng mga kaganapan :)
hello Mayroon akong problema kapag inaayos ko ang lahat upang kumonekta at makuha ang aking data mula sa database hindi ito nagpapakita sa akin ng anumang mga kaganapan
ay hindi naglalagay ng kaganapan sa database
Maaari mo bang mai-post kung paano magsingit ng mga kaganapan? sa mga patlang ng pagsisimula at pagtatapos kung anong uri ng data ito? timestamp? may natitirang "0", kailangan kong isingit at mai-edit ang mga kaganapan. Salamat
GUMAWA NG DATABASE KUNG HINDI MAPAPATUNO 'bootstrap_calendar` / *! 40100 DEFAULT CHARACTER SET utf8 COLLATE utf8_spanish_ci * /;
GAMITIN `bootstrap_calendar`;
- MySQL dump 10.13 Distrib 5.6.13, para sa Win32 (x86)
-
- Host: 127.0.0.1 Database: bootstrap_calendar
- ——————————————————
- Bersyon ng server 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 Itakda ang mga PANGALAN 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 * /;
-
- Ang istraktura ng talahanayan para sa mga kaganapan sa talahanayan `
-
TULAKIN ANG DROP KUNG Umiiral na `mga kaganapan`;
/ *! 40101 SET @saved_cs_client = @@ character_set_client * /;
/ *! 40101 Itakda ang character_set_client = utf8 * /;
GUMAWA NG TABLE `mga kaganapan` (
`id` int (10) na hindi pinirmahan HINDI NULL AUTO_INCREMENT,
`title` varchar (150) COLLATE utf8_spanish_ci DEFAULT Null,
`body` text COLLATE utf8_spanish_ci HINDI NULL,
`url` varchar (150) COLLATE utf8_spanish_ci HINDI NUL,
`class` varchar (45) COLLATE utf8_spanish_ci HINDI NULL DEFAULT 'impormasyon',
`start` varchar (15) COLLATE utf8_spanish_ci HINDI NUL,
`end` varchar (15) COLLATE utf8_spanish_ci HINDI NUL,
PANGUNAHING SUSI (`id`)
) ENGINE = InnoDB DEFAULT CHARSET = utf8 COLLATE = utf8_spanish_ci;
/ *! 40101 Itakda ang character_set_client = @saved_cs_client * /;
-
- Dumping data para sa mga kaganapan sa talahanayan `
-
LOCK TABLES `mga kaganapan` WRITE;
/ *! 40000 ALTER TABLE `mga kaganapan` DISABLE KEYS * /;
/ *! 40000 ALTER TABLE `mga kaganapan` ENABLE KEYS * /;
I-UNLOCK TABLES;
/ *! 40103 SET TIME_ZONE = @ OLD_TIME_ZONE * /;
/ *! 40101 SET SQL_MODE = @ OLD_SQL_MODE * /;
/ *! 40014 Itakda ang 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 * /;
- Nakumpleto ang basura noong 2014-05-31 14:38:23
hello migos ay mayroong anumang paraan upang baguhin ang format ng petsa ng JSON
Napakaganda ng kalendaryo, kapag nagdaragdag ng isang bagong kaganapan lamang ng petsa na kinukuha nito bilang default kapwa sa simula at ang pagtatapos ay nasa format na Ingles, paano ko ito babaguhin sa Espanyol? Ito ay magiging DD / MM / YYYY. Maraming salamat at pagbati
Kumusta, ang kalendaryo ay napakahusay, ngunit kapag nag-a-update ng isang petsa hindi ito kaagad na makikita sa kalendaryo. Ano ang magagawa ko?
Mayroon din akong isa pang problema, paano ko magagawa ang lahat ng mga puntos na ipinapakita sa buwanang pagtingin, posible bang palakihin ang parisukat? ano ang tumutugma sa isang araw?
Mayroon akong problema na lokal kapag naglo-load ng halimbawang gumagana ito nang perpekto ngunit kapag na-upload ko ito sa isang online server hindi ito nagpapakita sa akin ng anuman mula sa kalendaryo, ang mga pindutan lamang. Anumang ideya kung ano ang maaaring o kung ano ang mali sa server upang ayusin ito mangyaring.