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 OnlineWyjaśnię jak wyodrębnij zdarzenia z bazy danych MYSQL za doskonałe wdrożenie w każdym systemie.
Znany system baz danych
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
jak sprawdzam kod Sergio
Kod jest już sprawdzony! Jedyne, co musisz zrobić, to stworzyć tabelę «zdarzenia» w swojej bazie danych z następującymi polami: {id | strona główna | koniec | nazwa | klasa | url} i skonfiguruj dostęp do swojej bazy danych!
Zmieniłem te zmienne dla innych i pozwoliło mi to dodać wydarzenie do mojej bazy danych, ale nie widzę tego w kalendarzu. Jak mogę odzyskać dane wydarzeń w zależności od dnia, w którym kliknę kalendarz?
Aby zrobić i wykonać tworzenie zdarzeń, należy utworzyć bazę danych, ale chodzi o to, że mogę do niej dodawać zdarzenia i domyślnie językiem jest hiszpański, ponieważ jest on domyślnie zdefiniowany jako angielski
Aby ustawić język na hiszpański, najlepiej zastąpić istniejące ciągi w pliku języka hiszpańskiego ciągami w języku angielskim w pliku calendar.js. Istnieją jednak inne zgrabniejsze metody, możesz je znaleźć na głównej stronie skryptu lub w społeczności Github, załączonej do tego postu.
Spróbuję też za kilka tygodni wrzucić nowy post, w którym wyjaśnię jak stworzyć wstawianie zdarzeń do bazy danych.
Dziękuję bardzo, docenię post do wstawiania wydarzeń :)
witam mam problem jak naprawiam wszystko aby sie polaczyc i wypakowac moje dane z bazy to nie pokazuje mi zadnych zdarzen
nie wstawia zdarzenia do bazy danych
Czy możesz napisać, jak wstawiać wydarzenia? w polach początkowych i końcowych jaki to rodzaj danych? znak czasu? Zostało „0”, muszę wstawić wydarzenia i móc je edytować. Dzięki
UTWÓRZ BAZĘ DANYCH, JEŚLI NIE ISTNIEJE `bootstrap_calendar` / *! 40100 DOMYŚLNY ZESTAW ZNAKÓW utf8 Sortuj utf8_spanish_ci * /;
UŻYJ `bootstrap_calendar`;
- zrzut MySQL 10.13, dystrybucja 5.6.13, dla Win32 (x86)
-
- Host: 127.0.0.1 Baza danych: bootstrap_calendar
- ———————————————————
- Wersja serwera 5.5.27
/ *! 40101 SET @OLD_CHARACTER_SET_CLIENT = @@ CHARACTER_SET_CLIENT * /;
/ *! 40101 SET @OLD_CHARACTER_SET_RESULTS = @@ CHARACTER_SET_RESULTS * /;
/ *! 40101 SET @OLD_COLLATION_CONNECTION = @@ COLLATION_CONNECTION * /;
/ *! 40101 NAZWY ZBIORÓW utf8 * /;
/ *! 40103 SET @OLD_TIME_ZONE = @@ TIME_ZONE * /;
/ *! 40103 USTAW STREFĘ_CZASU = '+ 00:00' * /;
/ *! 40014 SET @OLD_UNIQUE_CHECKS = @@ UNIQUE_CHECKS, UNIQUE_CHECKS = 0 * /;
/ *! 40014 SET @OLD_FOREIGN_KEY_CHECKS = @@ FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS = 0 * /;
/ *! 40101 SET @OLD_SQL_MODE = @@ SQL_MODE, SQL_MODE = 'NO_AUTO_VALUE_ON_ZERO' * /;
/ *! 40111 SET @OLD_SQL_NOTES = @@ SQL_NOTES, SQL_NOTES = 0 * /;
-
- Struktura tabeli dla „zdarzeń” tabeli
-
DROP TABLE, JEŚLI ISTNIEJE `wydarzenia`;
/ *! 40101 SET @saved_cs_client = @@ character_set_client * /;
/ *! 40101 SET zestaw_znaków_klienta = utf8 * /;
CREATE TABLE `wydarzenia` (
`id` int (10) unsigned NOT NULL AUTO_INCREMENT,
`title` varchar (150) Sortuj utf8_spanish_ci DEFAULT NULL,
tekst `body` COLLATE utf8_spanish_ci NOT NULL,
`url` varchar (150) Sortuj utf8_spanish_ci NIE NULL,
`class` varchar (45) Sortuj utf8_spanish_ci NOT NULL DEFAULT 'info',
`start` varchar (15) Sortuj utf8_spanish_ci NIE NULL,
`end` varchar (15) Sortuj utf8_spanish_ci NIE NULL,
KLUCZ PODSTAWOWY („id”)
) ENGINE = DEFAULT CHARSET InnoDB = utf8 COLLATE = utf8_spanish_ci;
/ *! 40101 SET character_set_client = @saved_cs_client * /;
-
- Zrzut danych dla tabeli „zdarzenia”
-
LOCK TABLES `zdarzenia` WRITE;
/ *! 40000 ALTER TABLE `events` DISABLE KEYS * /;
/ *! 40000 ALTER TABLE `events` ENABLE KEYS * /;
ODBLOKUJ TABELE;
/ *! 40103 SET TIME_ZONE = @ OLD_TIME_ZONE * /;
/ *! 40101 SET SQL_MODE = @ OLD_SQL_MODE * /;
/ *! 40014 SET FOREIGN_KEY_CHECKS = @ OLD_FOREIGN_KEY_CHECKS * /;
/ *! 40014 SET UNIQUE_CHECKS = @ OLD_UNIQUE_CHECKS * /;
/ *! 40101 SET CHARACTER_SET_CLIENT = @ OLD_CHARACTER_SET_CLIENT * /;
/ *! 40101 SET CHARACTER_SET_RESULTS = @ OLD_CHARACTER_SET_RESULTS * /;
/ *! 40101 SET COLLATION_CONNECTION = @ OLD_COLLATION_CONNECTION * /;
/ *! 40111 SET SQL_NOTES = @ OLD_SQL_NOTES * /;
- Zrzut zakończony 2014 05:31:14
cześć migos, czy istnieje sposób na zmianę formatu daty JSON
Kalendarz jest bardzo dobry tylko przy dodawaniu nowego wydarzenia data jaką przyjmuje domyślnie zarówno na początku jak i na końcu jest w formacie angielskim, jak zmienić na hiszpański? Byłoby to DD / MM / RRRR. Bardzo dziękuję i pozdrawiam
Witam, kalendarz jest bardzo dobry, ale przy aktualizacji daty nie jest od razu odzwierciedlany w kalendarzu. Co mogę zrobić ?
Mam też inny problem, jak mogę wyświetlić wszystkie punkty w widoku miesięcznym, czy można powiększyć kwadrat? co odpowiada jednemu dniu?
Mam taki problem, że lokalnie przy wczytywaniu przykładu działa on idealnie ale gdy wgrywam go na serwer online nie pokazuje mi nic z kalendarza, tylko przyciski. Wszelkie pomysły, co może być lub co jest nie tak z serwerem, aby to naprawić, proszę.