Bootstrapi kalender JQueryga

Sergio Ródenas

2 minutit

bootstrap-kalender

Ü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 võtab kasutaja kuupäevad algselt JSON-failist välja, kuid ainult Creativos Online'i kasutajate jaoks selgitan, kuidas sündmuste väljavõtmine MYSQL-i andmebaasist selle täiuslikuks rakendamiseks mis tahes süsteemis.

Tuntud andmebaasisüsteem

Tuntud andmebaasisüsteem

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