Bootstrapi kalender JQueryga

Ümbritsev tohutu kogukond avaldab meile üha suuremat muljet Bootstrap, tuntud CSS-i raamistik , mille lõi Twitter. Seekord esitlen Bootstrapil põhinevat kalendrit programmeeritud Javascripti ja JQuery abilLisaks selgitan üksikasjalikult osa kalendri toimimisest ja lisan mõned nipid ja täiustused, mida saate teha.

See Bootstrapi kalender on puhta kujundusega ja täiesti tundlik, see näeb hea välja kõigist seadmetest! See sisaldab ka a tõlge enam kui 7 keelde ja kõik iga riigi pidulikud kuupäevad on esile toodud ja ära märgitud. Luksus!

Selle Bootstrapi kalendri toimimine on mõnevõrra keeruline, see ekstraheerib algselt kasutaja kuupäevad JSON-failist, kuid see on mõeldud ainult Creativos OnlineSelgitan, kuidas sündmuste väljavõtmine MYSQL-i andmebaasist selle täiuslikuks rakendamiseks mis tahes süsteemis.

Rakenduse põhifailide funktsioonid:

INDEX.HTML

• Bootstrapi 2.3.2 laadimine
• Kalendri kujundus
• Sündmuste loend
• Kalendris navigeerimine
• Erinevad kalendrivaated (päev / nädal / kuu / aasta)
• Rakenduse laadimine JS-i
• Keelevalik

INDEX-BS3.HTML

• Bootstrapi 3.0 laadimine
• Kalendri kujundus
• Sündmuste loend
• Kalendris navigeerimine
• Erinevad kalendrivaated (päev / nädal / kuu / aasta)
• Rakenduse laadimine JS-i
• Keelevalik

SÜNDMUSED.JSON.PHP

• Järgmiste andmetega sündmuste loend:
  • id: sündmuse tunnus
  • pealkiri: ürituse pealkiri
  • url: sündmuse URL
  • klass: sündmuse tüüp (info | hoiatus |…) järgnevate värvide jaoks.
  • algus: alguskuupäev
  • lõpp: lõpetamise kuupäev

APP.JS

• Muutujad, mis salvestavad rakenduse konfiguratsiooni.
• JQuery lisafunktsioonid

KALENDER.JS

• Peamised rakenduse seaded
• Kalendri põhifunktsioonid
• Sündmuste väljavõtmine ja käsitlemine
• Pidulikud kuupäevad
• Keele laadimine
• Sündmuste loendi laadimine
• Erinevate kalendrivaadete laadimine (päev / nädal / kuu / aasta)

KALENDER.CSS

• Kalendri stiilid
• Sündmuste loendi stiilid
• Muude seadmete kalendristiilid

Eemaldage sündmused andmebaasist

Sündmuste väljavõtmiseks MYSQL-i andmebaasist asendame faili read events.json.php poolt:

<?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 | Bootstrapi kalender

Laadige alla Bootstrapi kalender

Lisateave | Bootstrap: CSS-i raamistik