Stále více na nás dělá dojem ohromná komunita, která se točí kolem Bootstrap, známý rámec CSS , vytvořený Twitterem. Tentokrát vám představuji kalendář založený na Bootstrapu programováno pomocí Javascript a JQuery, Také podrobně vysvětlím část fungování kalendáře a přidám několik triků a vylepšení, které můžete udělat.
Tento kalendář Bootstrap má čistý design a je naprosto citlivý, bude to vypadat dobře ze všech zařízení! Zahrnuje také a překlad do více než 7 jazyků a všechno sváteční data každé země jsou zvýrazněna a zaznamenána. Luxusní!
Činnost tohoto zaváděcího kalendáře je poněkud složitá, zpočátku extrahuje data uživatele ze souboru JSON, ale výhradně pro uživatele Creativos OnlineVysvětlím jak extrahovat události z databáze MYSQL pro jeho dokonalou implementaci v jakémkoli systému.
Známý databázový systém
Funkce hlavních souborů aplikace:
INDEX.HTML
- Načítání Bootstrap 2.3.2
- Návrh kalendáře
- Seznam událostí
- Procházení kalendáře
- Různá zobrazení kalendáře (den / týden / měsíc / rok)
- Načítání aplikace v JS
- Výběr jazyka
INDEX-BS3.HTML
- Načítání Bootstrap 3.0
- Návrh kalendáře
- Seznam událostí
- Procházení kalendáře
- Různá zobrazení kalendáře (den / týden / měsíc / rok)
- Načítání aplikace v JS
- Výběr jazyka
AKCE.JSON.PHP
- Seznam akcí s následujícími údaji:
- id: identifikátor události
- Název: název události
- url: adresa URL události
- třída: typ události (informace | varování |…) pro následující barvy.
- Start: datum zahájení
- konec: datum ukončení
APP.JS
- Proměnné, které ukládají konfiguraci aplikace.
- Extra funkce JQuery
KALENDÁŘ.JS
- Hlavní nastavení aplikace
- Hlavní funkce kalendáře
- Extrakce a zpracování událostí
- Slavnostní data
- Načítání jazyků
- Načítání seznamu událostí
- Načítání různých zobrazení kalendáře (den / týden / měsíc / rok)
KALENDÁŘ.CSS
- Styly kalendáře
- Styly seznamu událostí
- Styly kalendáře pro jiná zařízení
Extrahujte události z databáze
Extrahovat události z databáze MYSQL nahradíme řádky souboru 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 kalendář
Stáhnout | Bootstrap kalendář
Více informací | Bootstrap: CSS Framework
jak jsem zkontroloval kód Sergio
Kód je již zkontrolován! Jediné, co musíte udělat, je vytvořit tabulku «události» ve vaší databázi s následujícími poli: {id | domů | konec | jméno | třída | url} a nakonfigurujte přístup do své databáze!
Změnil jsem tyto proměnné pro ostatní a umožnilo mi to přidat událost do mé databáze, ale nevidím to v kalendáři. A jak mohu obnovit data událostí v závislosti na dni, kdy kliknu na kalendář?
Chcete-li dělat a provádět vytváření událostí, musí být vytvořena databáze, ale o čem to je, že k tomu mohu připojit události a jako výchozí je jazyk španělština, protože je ve výchozím nastavení definována jako angličtina
Chcete-li přednastavit jazyk na španělštinu, je nejlepší nahradit stávající řetězce v souboru španělského jazyka řetězci v angličtině v souboru calendar.js. Existují však i jiné úhlednější metody, které najdete na hlavním webu skriptu nebo v komunitě Github, připojené k tomuto příspěvku.
Také se pokusím za pár týdnů nahrát nový příspěvek, kde vysvětlím, jak vytvořit vložení událostí do databáze.
Děkuji moc, oceníme příspěvek k vložení událostí :)
ahoj Mám problém, když opravím vše, abych se připojil a extrahoval svá data z databáze, nezobrazuje mi žádné události
nevloží událost do databáze
Mohl byste zveřejnit, jak vkládat události? v počátečním a koncovém poli, o jaké údaje se jedná? časové razítko? zbývá „0“, musím vložit a umět upravovat události. dík
VYTVOŘIT DATABÁZE, POKUD NEJDE
USE `bootstrap_calendar`;
- MySQL dump 10.13 Distrib 5.6.13, pro Win32 (x86)
-
- Hostitel: 127.0.0.1 Databáze: bootstrap_calendar
- ———————————————————
- Verze serveru 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 NASTAVENÍ NÁZVŮ 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 tabulky pro „události“ tabulky
-
DROP TABLE, POKUD EXISTUJE "události";
/ *! 40101 SET @saved_cs_client = @@ character_set_client * /;
/ *! 40101 SET character_set_client = utf8 * /;
VYTVOŘIT TABULKU `události` (
`id` int (10) unsigned NOT NULL AUTO_INCREMENT,
`title` varchar (150) COLLATE utf8_spanish_ci DEFAULT NULL,
text `body` COLLATE utf8_spanish_ci NOT NULL,
`url` varchar (150) COLLATE utf8_spanish_ci NOT NULL,
`class` varchar (45) COLLATE utf8_spanish_ci NOT NULL DEFAULT 'informace',
`start` varchar (15) COLLATE utf8_spanish_ci NOT NULL,
`end` varchar (15) COLLATE utf8_spanish_ci NOT NULL,
PRIMÁRNÍ KLÍČ (`id`)
) ENGINE = InnoDB DEFAULT CHARSET = utf8 COLLATE = utf8_spanish_ci;
/ *! 40101 SET character_set_client = @saved_cs_client * /;
-
- Dumpingová data pro tabulkové `události`
-
ZÁMEK TABULKY `události` NAPISUJTE;
/ *! 40000 ALTER TABLE `events` DISABLE KEYS * /;
/ *! 40000 ALTER TABLE `events` POVOLIT KLÁVESY * /;
ODEMKNUTÍ STOLŮ;
/ *! 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 SET COLLATION_CONNECTION = @ OLD_COLLATION_CONNECTION * /;
/ *! 40111 SET SQL_NOTES = @ OLD_SQL_NOTES * /;
- Výpis dokončen 2014-05-31 14:38:23
ahoj migos, existuje nějaký způsob, jak změnit formát data JSON
Kalendář je velmi dobrý, pouze když přidám novou událost, je datum, které je standardně nastaveno na začátku i na konci, v anglickém formátu, jak jej změním na španělštinu? Bylo by to DD / MM / RRRR. Děkuji moc a pozdravy
Dobrý den, kalendář je velmi dobrý, ale při aktualizaci data se v kalendáři neprojeví okamžitě. Co mohu udělat ?
Mám také další problém, jak mohu zobrazit všechny body v měsíčním zobrazení, je možné zvětšit čtverec? co odpovídá dni?
Mám problém, že lokálně při načítání příkladu to funguje perfektně, ale když ho nahraji na online server, neukáže mi to nic z kalendáře, pouze tlačítka. Nějaký nápad, co může být nebo co je se serverem špatně opravit, prosím.