Kalendarz Bootstrap z JQuery

kalendarz bootstrap 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.

Znany system baz danych

Znany system baz danych

Funkcje głównych plików aplikacji:

INDEX.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

INDEX-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

APP.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: Framework CSS


Treść artykułu jest zgodna z naszymi zasadami etyka redakcyjna. Aby zgłosić błąd, kliknij tutaj.

14 komentarzy, zostaw swoje

Zostaw swój komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

*

*

  1. Odpowiedzialny za dane: Miguel Ángel Gatón
  2. Cel danych: kontrola spamu, zarządzanie komentarzami.
  3. Legitymacja: Twoja zgoda
  4. Przekazywanie danych: Dane nie będą przekazywane stronom trzecim, z wyjątkiem obowiązku prawnego.
  5. Przechowywanie danych: baza danych hostowana przez Occentus Networks (UE)
  6. Prawa: w dowolnym momencie możesz ograniczyć, odzyskać i usunąć swoje dane.

  1.   David Z powiedział

    jak sprawdzam kod Sergio

    1.    Sergio Rodenas powiedział

      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!

      1.    ros powiedział

        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?

  2.   Jose Luis Zamudio (@JoseZami) powiedział

    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

    1.    Sergio Rodenas powiedział

      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.

  3.   Jose Luis Zamudio (@JoseZami) powiedział

    Dziękuję bardzo, docenię post do wstawiania wydarzeń :)

  4.   Jair powiedział

    witam mam problem jak naprawiam wszystko aby sie polaczyc i wypakowac moje dane z bazy to nie pokazuje mi zadnych zdarzen

  5.   diego powiedział

    nie wstawia zdarzenia do bazy danych

  6.   Gonza powiedział

    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

  7.   Czw powiedział

    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

  8.   juan77 powiedział

    cześć migos, czy istnieje sposób na zmianę formatu daty JSON

  9.   giselabra powiedział

    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

  10.   Fabian powiedział

    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?

  11.   Alex powiedział

    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ę.