Все повече се впечатляваме от огромната общност, която се върти наоколо Bootstrap, добре позната CSS рамка , създаден от Twitter. Този път ви представям календар, базиран на Bootstrap програмиран с Javascript и JQuery, Ще обясня подробно и част от работата на календара и ще добавя някои трикове и подобрения, които можете да направите.
Този Bootstrap календар има изчистен дизайн и е напълно отзивчив, ще изглежда добре от всички устройства! Той също така включва a превод на повече от 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 ние ще заменим редовете на файла събития.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
докато проверявам кода на Серджо
Кодът вече е проверен! Единственото нещо, което трябва да създадете на таблицата «събития» във вашата база данни със следните полета: {id | начало | край | име | клас | url} и конфигурирайте достъпа до вашата база данни!
Промених тези променливи за други и ми позволи да добавя събитието към моята база данни, но не виждам това да е отразено в календара. И как бих могъл да възстановя данните за събитията в зависимост от деня, в който щракна върху календара?
За да направите и извършите създаването на събития, трябва да се създаде база данни, но това, за което става дума, е, че мога да добавя събития към нея и по подразбиране езика към испански, тъй като по подразбиране е дефиниран като английски
За да зададете езика по подразбиране на испански, най-добре е да замените съществуващите низове в испанския езиков файл с тези на английски във файла calendar.js. Има обаче и други по-чисти методи, можете да ги намерите на основния уебсайт на скрипта или в общността на Github, прикачен към тази публикация.
Също така ще се опитам да кача нова публикация след няколко седмици, където ще обясня как да създам вмъкването на събития в базата данни.
Благодаря ви много, ще оценя публикацията за вмъкване на събития :)
здравей Имам проблем, когато поправя всичко, за да се свържа и извлека данните си от базата данни, не ми показва никакви събития
не вмъква събитие в базата данни
Бихте ли публикували как да вмъкнете събития? в полетата за начало и край какъв вид данни са? клеймо за време? Остава „0“, трябва да вмъкна и да мога да редактирам събитията. Благодаря
СЪЗДАЙТЕ БАЗАТА ДАННИ, АКО НЕ СЪЩЕСТВУВА `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
здравей migos има ли някакъв начин да промените формата на датата на JSON
Календарът е много добър, само когато добавяте ново събитие, датата, която отнема по подразбиране както в началото, така и в края, е в английски формат, как да го променя на испански? Би било DD / MM / YYYY. Благодаря ви много и поздрави
Здравейте, календарът е много добър, но при актуализиране на датата не се отразява веднага в календара. Какво мога да направя ?
Имам и друг проблем, как мога да накарам всички точки да се показват в месечния изглед, възможно ли е да увеличите квадрата? какво съответства на ден?
Имам проблема, че локално при зареждане на примера работи перфектно, но когато го кача на онлайн сървър, той не ми показва нищо от календара, а само бутоните. Всяка идея какво може да е или какво не е наред със сървъра, за да го поправите, моля.