Calendar Bootstrap cu JQuery

Suntem din ce în ce mai impresionați de imensa comunitate care se învârte în jurul său Bootstrap, un bine-cunoscut framework CSS , creat de Twitter. De data aceasta vă prezint un calendar bazat pe Bootstrap programat cu Javascript și JQuery, Voi explica, de asemenea, o parte din funcționarea calendarului în detaliu și voi adăuga câteva trucuri și îmbunătățiri pe care le puteți face.

Acest calendar Bootstrap are un design curat și este total sensibil, va arăta bine de pe toate dispozitivele! De asemenea, încorporează un traducere în mai mult de 7 limbi si tot datele festive ale fiecărei țări sunt evidențiate și notate. Un lux!

Funcționarea acestui Calendar Bootstrap este oarecum complexă, extrage inițial datele utilizatorului dintr-un fișier JSON, dar, exclusiv pentru utilizatorii Creativos Online, voi explica cum extrageți evenimentele dintr-o bază de date MYSQL pentru implementarea sa perfectă în orice sistem.

Funcțiile fișierelor principale ale aplicației:

INDEX.HTML

• Bootstrap 2.3.2 încărcare
• Calendar Design
• Lista evenimentelor
• Navigarea în calendar
• Vizualizări diferite ale calendarului (zi / săptămână / lună / an)
• Se încarcă aplicația în JS
• Alegerea limbii

INDEX-BS3.HTML

• Bootstrap 3.0 încărcare
• Calendar Design
• Lista evenimentelor
• Navigarea în calendar
• Vizualizări diferite ale calendarului (zi / săptămână / lună / an)
• Se încarcă aplicația în JS
• Alegerea limbii

EVENIMENTE.JSON.PHP

• Lista evenimentelor cu următoarele date:
  • id: identificatorul evenimentului
  • titlu: titlul evenimentului
  • Adresa URL: adresa URL a evenimentului
  • clasă: tip de eveniment (info | avertisment |…) pentru culorile ulterioare.
  • începe: data de începere
  • Sfârșit: data încetării

APP.JS

• Variabile care stochează configurația aplicației.
• Funcții JQuery suplimentare

CALENDAR.JS

• Setări principale ale aplicației
• Funcțiile principale ale calendarului
• Extragerea și tratarea evenimentelor
• Date festive
• Limbă de încărcare
• Încărcarea listei Evenimente
• Se încarcă diferitele vizualizări ale calendarului (zi / săptămână / lună / an)

CALENDAR.CSS

• Stiluri de calendar
• Stiluri de liste de evenimente
• Stiluri de calendar pentru alte dispozitive

Extrageți evenimente dintr-o bază de date

Pentru a extrage evenimentele dintr-o bază de date MYSQL vom înlocui liniile fișierului events.json.php prin:

<?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 | Calendar Bootstrap

Descărcați | Calendar Bootstrap

Aflați mai multe | Bootstrap: CSS Framework