Bootstrap календар с JQuery

bootstrap-календар Все повече се впечатляваме от огромната общност, която се върти наоколо Bootstrap, добре позната CSS рамка , създаден от Twitter. Този път ви представям календар, базиран на Bootstrap програмиран с Javascript и JQuery, Ще обясня подробно и част от работата на календара и ще добавя някои трикове и подобрения, които можете да направите.

Този Bootstrap календар има изчистен дизайн и е напълно отзивчив, ще изглежда добре от всички устройства! Той също така включва a превод на повече от 7 езика и всичко празничните дати на всяка държава са подчертани и отбелязани. Лукс!

Работата на този Bootstrap Calendar е донякъде сложна, първоначално извлича датите на потребителя от JSON файл, но, изключително за потребителите на Creativos Online, ще обясня как извличане на събитията от база данни на MYSQL за перфектното му изпълнение във всяка система.

Известна система от бази данни

Известна система от бази данни

Функции на основните файлове на приложението:

INDEX.HTML

  • Bootstrap 2.3.2 зареждане
  • Дизайн на календара
  • Списък на събитията
  • Навигиране в календара
  • Различни изгледи на календара (ден / седмица / месец / година)
  • Зареждането на приложението в JS
  • Избор на език

INDEX-BS3.HTML

  • Bootstrap 3.0 зареждане
  • Дизайн на календара
  • Списък на събитията
  • Навигиране в календара
  • Различни изгледи на календара (ден / седмица / месец / година)
  • Зареждането на приложението в JS
  • Избор на език

СЪБИТИЯ.JSON.PHP

  • Списък на събитията със следните данни:
    • ID: идентификатор на събитие
    • заглавие: заглавие на събитието
    • URL адрес: url на събитието
    • клас: тип на събитието (информация | предупреждение |…) за следващите цветове.
    • започнете: начална дата
    • край: дата на прекратяване

APP.JS

  • Променливи, които съхраняват конфигурацията на приложението.
  • Допълнителни функции на JQuery

КАЛЕНДАР.JS

  • Основни настройки на приложението
  • Основни функции на календара
  • Извличане и лечение на събития
  • Празнични дати
  • Зареждане на езика
  • Зареждане на списъка със събития
  • Зареждане на различните изгледи на календара (ден / седмица / месец / година)

КАЛЕНДАР.CSS

  • Календарни стилове
  • Стилове на списъка на събитията
  • Календарни стилове за други устройства

Извличане на събития от база данни

За да извлечете събитията от база данни на MYSQL ние ще заменим редовете на файла събития.json.php от:

<?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 календар

Изтегляне | Bootstrap календар

Научете повече | Bootstrap: CSS Framework


Съдържанието на статията се придържа към нашите принципи на редакторска етика. За да съобщите за грешка, щракнете върху тук.

14 коментара, оставете своя

Оставете вашия коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *

*

*

  1. Отговорен за данните: Мигел Анхел Гатон
  2. Предназначение на данните: Контрол на СПАМ, управление на коментари.
  3. Легитимация: Вашето съгласие
  4. Съобщаване на данните: Данните няма да бъдат съобщени на трети страни, освен по законово задължение.
  5. Съхранение на данни: База данни, хоствана от Occentus Networks (ЕС)
  6. Права: По всяко време можете да ограничите, възстановите и изтриете информацията си.

  1.   Дейвид Z каза той

    докато проверявам кода на Серджо

    1.    Серджо Роденас каза той

      Кодът вече е проверен! Единственото нещо, което трябва да създадете на таблицата «събития» във вашата база данни със следните полета: {id | начало | край | име | клас | url} и конфигурирайте достъпа до вашата база данни!

      1.    Роза каза той

        Промених тези променливи за други и ми позволи да добавя събитието към моята база данни, но не виждам това да е отразено в календара. И как бих могъл да възстановя данните за събитията в зависимост от деня, в който щракна върху календара?

  2.   Джоузе Луис Замудио (@JoseZami) каза той

    За да направите и извършите създаването на събития, трябва да се създаде база данни, но това, за което става дума, е, че мога да добавя събития към нея и по подразбиране езика към испански, тъй като по подразбиране е дефиниран като английски

    1.    Серджо Роденас каза той

      За да зададете езика по подразбиране на испански, най-добре е да замените съществуващите низове в испанския езиков файл с тези на английски във файла calendar.js. Има обаче и други по-чисти методи, можете да ги намерите на основния уебсайт на скрипта или в общността на Github, прикачен към тази публикация.
      Също така ще се опитам да кача нова публикация след няколко седмици, където ще обясня как да създам вмъкването на събития в базата данни.

  3.   Джоузе Луис Замудио (@JoseZami) каза той

    Благодаря ви много, ще оценя публикацията за вмъкване на събития :)

  4.   Яир каза той

    здравей Имам проблем, когато поправя всичко, за да се свържа и извлека данните си от базата данни, не ми показва никакви събития

  5.   Диего каза той

    не вмъква събитие в базата данни

  6.   Гонза каза той

    Бихте ли публикували как да вмъкнете събития? в полетата за начало и край какъв вид данни са? клеймо за време? Остава „0“, трябва да вмъкна и да мога да редактирам събитията. Благодаря

  7.   Четвъртък каза той

    СЪЗДАЙТЕ БАЗАТА ДАННИ, АКО НЕ СЪЩЕСТВУВА `bootstrap_calendar` / *! 40100 НАСТРОЙКА НА ХАРАКТЕР ПО УМОЛЧАНЕ utf8 COLLATE utf8_spanish_ci * /;
    ИЗПОЛЗВАЙТЕ `bootstrap_calendar`;
    - MySQL дъмп 10.13 Distrib 5.6.13, за Win32 (x86)
    -
    - Хост: 127.0.0.1 База данни: bootstrap_calendar
    - ———————————————————
    - Сървърна версия 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 ЗАДАВАНЕ НА ИМЕНА utf8 * /;
    / *! 40103 SET @OLD_TIME_ZONE = @@ TIME_ZONE * /;
    / *! 40103 SET TIME_ZONE = '+ 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 * /;

    -
    - Структура на таблицата за таблица `събития`
    -

    ТАБЛИЦА ЗА ПАДАНЕ, АКО СЪЩЕСТВА `събития`;
    / *! 40101 SET @saved_cs_client = @@ character_set_client * /;
    / *! 40101 ЗАДАВАНЕ character_set_client = utf8 * /;
    СЪЗДАЙТЕ ТАБЛИЦА `събития` (
    `id` int (10) unsigned NOT NULL AUTO_INCREMENT,
    `title` varchar (150) COLLATE utf8_spanish_ci ПО подразбиране NULL,
    "body" текст COLLATE utf8_spanish_ci NOT NULL,
    `url` varchar (150) СЪБИРАНЕ utf8_spanish_ci НЕ Е НУЛНО,
    `class` varchar (45) COLLATE utf8_spanish_ci NOT NULL DEFAULT 'info',
    `start` varchar (15) COLLATE utf8_spanish_ci NOT NULL,
    `end` varchar (15) COLLATE utf8_spanish_ci NOT NULL,
    ОСНОВЕН КЛЮЧ (`id`)
    ) ДВИГАТЕЛ = ИНФОРМАЦИОННА ШАРСЕТА по подразбиране = utf8 СЪБИРАНЕ = utf8_spanish_ci;
    / *! 40101 ЗАДАВАНЕ character_set_client = @saved_cs_client * /;

    -
    - Дъмпинг данни за таблица `събития`
    -

    ЗАКЛЮЧВАНЕ НА МАСИ `събития` ПИШЕТЕ;
    / *! 40000 ALTER TABLE `събития` ЗАБРАНИ КЛЮЧОВЕ * /;
    / *! 40000 ALTER TABLE `събития` АКТИВИРАНЕ НА КЛЮЧОВЕ * /;
    ОТКЛЮЧЕТЕ МАСИ;
    / *! 40103 ЗАДАВАНЕ НА TIME_ZONE = @ OLD_TIME_ZONE * /;

    / *! 40101 SET SQL_MODE = @ OLD_SQL_MODE * /;
    / *! 40014 ЗАДАВА 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 * /;

    - Изхвърлянето завършено на 2014 05:31:14

  8.   juan77 каза той

    здравей migos има ли някакъв начин да промените формата на датата на JSON

  9.   жизелабра каза той

    Календарът е много добър, само когато добавяте ново събитие, датата, която отнема по подразбиране както в началото, така и в края, е в английски формат, как да го променя на испански? Би било DD / MM / YYYY. Благодаря ви много и поздрави

  10.   Фабиански каза той

    Здравейте, календарът е много добър, но при актуализиране на датата не се отразява веднага в календара. Какво мога да направя ?

    Имам и друг проблем, как мога да накарам всички точки да се показват в месечния изглед, възможно ли е да увеличите квадрата? какво съответства на ден?

  11.   Alex каза той

    Имам проблема, че локално при зареждане на примера работи перфектно, но когато го кача на онлайн сървър, той не ми показва нищо от календара, а само бутоните. Всяка идея какво може да е или какво не е наред със сървъра, за да го поправите, моля.