Bootstrap kalendář s JQuery

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í!

Provoz tohoto Bootstrap kalendáře je poněkud složitý, zpočátku extrahuje data uživatele ze souboru JSON, ale výhradně pro uživatele Creativos Online vysvětlím, jak extrahovat události z databáze MYSQL pro jeho dokonalou implementaci v jakémkoli systému.

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