Kalendarz Bootstrap z JQuery

Jesteśmy pod coraz większym wrażeniem ogromnej społeczności, która się wokół nas kręci Bootstrap, dobrze znany framework CSS , stworzony przez Twittera. Tym razem przedstawiam kalendarz oparty na Bootstrapie zaprogramowany za pomocą Javascript i JQuery, Również szczegółowo wyjaśnię część działania kalendarza oraz dodam kilka sztuczek i ulepszeń, które możesz zrobić.

Ten kalendarz Bootstrap ma przejrzysty wygląd i jest całkowicie czuły, będzie dobrze wyglądać na wszystkich urządzeniach! Zawiera również tłumaczenie na ponad 7 języków i wszystkie świąteczne daty każdego kraju są wyróżnione i odnotowane. Luksus!

Działanie tego kalendarza Bootstrap jest nieco skomplikowane, początkowo wyodrębnia daty użytkownika z pliku JSON, ale wyłącznie dla użytkowników Creativos Online wyjaśnię, jak wyodrębnij zdarzenia z bazy danych MYSQL za doskonałe wdrożenie w każdym systemie.

Funkcje głównych plików aplikacji:

INDEKS.HTML

• Ładowanie Bootstrap 2.3.2
• Projekt kalendarza
• Lista wydarzeń
• Poruszanie się po kalendarzu
• Różne widoki kalendarza (dzień / tydzień / miesiąc / rok)
• Ładowanie aplikacji w JS
• Wybór języka

INDEKS-BS3.HTML

• Ładowanie Bootstrap 3.0
• Projekt kalendarza
• Lista wydarzeń
• Poruszanie się po kalendarzu
• Różne widoki kalendarza (dzień / tydzień / miesiąc / rok)
• Ładowanie aplikacji w JS
• Wybór języka

WYDARZENIA.JSON.PHP

• Lista zdarzeń z następującymi danymi:
  • id: identyfikator zdarzenia
  • tytuł: Tytuł wydarzenia
  • URL: adres URL wydarzenia
  • klasa: typ zdarzenia (info | ostrzeżenie |…) dla kolejnych kolorów.
  • rozpocząć: data rozpoczęcia
  • koniec: Data zakończenia

APLIKACJA.JS

• Zmienne przechowujące konfigurację aplikacji.
• Dodatkowe funkcje JQuery

KALENDARZ.JS

• Główne ustawienia aplikacji
• Główne funkcje Kalendarza
• Ekstrakcja i obróbka zdarzeń
• Świąteczne daty
• Ładowanie języka
• Ładowanie listy wydarzeń
• Ładowanie różnych widoków kalendarza (dzień / tydzień / miesiąc / rok)

KALENDARZ.CSS

• Style kalendarza
• Style list wydarzeń
• Style kalendarza dla innych urządzeń

Wyodrębnij zdarzenia z bazy danych

Aby wyodrębnić zdarzenia z bazy danych MYSQL zamienimy linie pliku wydarzenia.json.php przez:

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

Pobierz | Kalendarz Bootstrap

Więcej informacji | Bootstrap: Struktura CSS