Bootstrap kalendar s JQueryjem

Sergio Ródenas

2 minuta

bootstrap-kalendar

Sve nas više impresionira ogromna zajednica koja se vrti oko nas Bootstrap, poznati CSS okvir , kreirao Twitter. Ovaj put vam predstavljam kalendar zasnovan na Bootstrapu programiran s Javascriptom i JQueryjem, Također ću detaljno objasniti dio rada kalendara i dodati ću neke trikove i poboljšanja koja možete učiniti.

Ovaj Bootstrap kalendar ima čist dizajn i potpuno je odziv, izgledat će dobro sa svih uređaja! Takođe uključuje a prijevod na više od 7 jezika i sve praznični datumi svake zemlje su istaknuti i zabilježeni. Luksuz!

Rad ovog Bootstrap kalendara je donekle složen, u početku izdvaja datume korisnika iz JSON datoteke, ali, ekskluzivno za korisnike Creativos Online, objasnit ću izdvojiti događaje iz MYSQL baze podataka za njegovu savršenu implementaciju u bilo koji sistem.

Poznati sistem baze podataka

Poznati sistem baze podataka

Funkcije glavnih datoteka aplikacije:

INDEX.HTML

  • Učitavanje Bootstrapa 2.3.2
  • Dizajn kalendara
  • Spisak događaja
  • Navigacija kalendarom
  • Različiti prikazi kalendara (dan / sedmica / mjesec / godina)
  • Učitavanje aplikacije u JS
  • Izbor jezika

INDEX-BS3.HTML

  • Učitavanje Bootstrapa 3.0
  • Dizajn kalendara
  • Lista događaja
  • Navigacija kalendarom
  • Različiti prikazi kalendara (dan / sedmica / mjesec / godina)
  • Učitavanje aplikacije u JS
  • Izbor jezika

DOGAĐAJI.JSON.PHP

  • Spisak događaja sa sljedećim podacima:
    • id: identifikator događaja
    • naslov: naslov događaja
    • url: url događaja
    • klasa: tip događaja (informacije | upozorenje |…) za naredne boje.
    • početak: datum početka
    • kraj: datum raskida

APP.JS

  • Varijable koje pohranjuju konfiguraciju aplikacije.
  • Dodatne JQuery funkcije

KALENDAR.JS

  • Glavne postavke aplikacije
  • Glavne funkcije kalendara
  • Izdvajanje i tretman događaja
  • Svečani datumi
  • Učitavanje jezika
  • Učitavanje liste događaja
  • Učitavanje različitih prikaza kalendara (dan / sedmica / mjesec / godina)

KALENDAR.CSS

  • Stilovi kalendara
  • Stilovi liste događaja
  • Stilovi kalendara za druge uređaje

Izdvajanje događaja iz baze podataka

Za izdvajanje događaja iz MYSQL baze podataka zamijenit ćemo retke datoteke 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 Calendar

Preuzmi | Bootstrap Calendar

Više informacija | Bootstrap: CSS Framework