Непрекъснато сме впечатлени от огромната общност около Bootstrap, добре позната CSS рамка, създадена от Twitter. Този път представям календар, базиран на Bootstrap, програмиран с JavaScript и jQuery . Ще обясня подробно как работи календарът и ще добавя някои съвети и подобрения, които можете да направите.
Този календар на Bootstrap има изчистен дизайн и е напълно адаптивен , така че ще изглежда страхотно на всички устройства! Той също така включва преводи на повече от 7 езика , а всички празници за всяка държава са маркирани и отбелязани . Истинско удоволствие!
Работата на този Bootstrap календар е донякъде сложна; първоначално той извлича датите на потребителя от JSON файл. Въпреки това, ексклузивно за потребителите на Creativos Online, ще обясня как да извличате събития от MySQL база данни за безпроблемно внедряване на всяка система.
Известна система от бази данни
Функции на основните файлове на приложението:
INDEX.HTML
- Bootstrap 2.3.2 зареждане
- Дизайн на календара
- Списък на събитията
- Навигиране в календара
- Различни изгледи на календара (ден / седмица / месец / година)
- Зареждането на приложението в JS
- Избор на език
ИНДЕКС-BS3.HTML
- Bootstrap 3.0 зареждане
- Дизайн на календара
- Списък на събитията
- Навигиране в календара
- Различни изгледи на календара (ден / седмица / месец / година)
- Зареждането на приложението в JS
- Избор на език
СЪБИТИЯ.JSON.PHP
- Списък на събитията със следните данни:
- ID: идентификатор на събитие
- заглавие: заглавие на събитието
- URL адрес: url на събитието
- клас: тип на събитието (информация | предупреждение |…) за следващите цветове.
- започнете: начална дата
- край: дата на прекратяване
APP.JS
- Променливи, които съхраняват конфигурацията на приложението.
- Допълнителни функции на JQuery
КАЛЕНДАР.JS
- Основни настройки на приложението
- Основни функции на календара
- Извличане и лечение на събития
- Празнични дати
- Зареждане на езика
- Зареждане на списъка със събития
- Зареждане на различните изгледи на календара (ден / седмица / месец / година)
КАЛЕНДАР.CSS
- Календарни стилове
- Стилове на списъка на събитията
- Календарни стилове за други устройства
Извличане на събития от база данни
За да извлечем събития от MySQL база данни, ще заменим редовете във файла events.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 рамка