We are increasingly impressed by the immense community that revolves around Bootstrap, a well-known CSS framework , created by Twitter. This time I present you a Bootstrap-based calendar programmed with Javascript and JQueryIn addition, I will explain in detail part of the operation of the calendar and I will add some tricks and improvements that you can do.
This Bootstrap calendar has a clean design and is totally responsive, it will look good from all devices! It also incorporates a translation into more than 7 languages and all the festive dates of each country are highlighted and noted. A luxury!
The operation of this Bootstrap Calendar is somewhat complex, it extracts the user's dates from a JSON file initially, but, exclusively for users of Creativos OnlineI will explain how extract the events from a MYSQL database for its perfect implementation in any system.
Well known Database system
Functions of the main files of the application:
INDEX.HTML
- Bootstrap 2.3.2 loading
- Calendar Design
- List of Events
- Navigating the Calendar
- Different Calendar views (Day / Week / Month / Year)
- Loading the application in JS
- Language selection
INDEX-BS3.HTML
- Bootstrap 3.0 loading
- Calendar Design
- List of events
- Navigating the Calendar
- Different calendar views (Day / Week / Month / Year)
- Loading the application in JS
- Language selection
EVENTS.JSON.PHP
- List of Events with the following data:
- id: event identifier
- title: event title
- url: url of the event
- class: event type (info | warning |…) for subsequent colors.
- start: start date
- end: termination date
APP.JS
- Variables that store the application configuration.
- Extra JQuery functions
CALENDAR.JS
- Main application settings
- Main functions of the Calendar
- Extraction and Treatment of events
- Festive dates
- Language Loading
- Loading the Events list
- Loading the different Calendar views (Day / Week / Month / Year)
CALENDAR.CSS
- Calendar Styles
- Event list styles
- Calendar styles for other devices
Extract events from a database
To extract the events from a MYSQL database we will replace the lines of the file events.json.php per:
<?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 Calendar
Download | Bootstrap Calendar
Learn more | Bootstrap: CSS Framework
as I check the code Sergio
The code is already checked! The only thing, you have to create the table «events» in your database with the following fields: {id | home | end | name | class | url} and configure access to your database!
I have changed those variables for others, and it has allowed me to add the event to my database, but I don't see it reflected in the calendar. And how could I recover the data of the events depending on the day I click on the calendar?
To do and perform the creation of events then a database must be created, but what is the point is that I can append events to it and by default the language to Spanish because it is defined as English by default
To preset the language to Spanish, it is best to replace the existing strings in the Spanish language file with those in English in the calendar.js file. However, there are other neater methods, you can find them on the main website of the script or in the Github community, attached to this post.
Also, I will try to upload a new post in a few weeks where I will explain how to create the insertion of events in the database.
Thank you very much, I will appreciate the post to insert events :)
hello I have a problem when I fix everything to connect and extract my data from the database it does not show me any events
does not insert event in database
Could you post how to insert events? in the start and end fields what kind of data is it? timestamp? there are "0" left over, I need to insert and be able to edit the events. Thank you
CREATE DATABASE IF NOT EXISTS `bootstrap_calendar` / *! 40100 DEFAULT CHARACTER SET utf8 COLLATE utf8_spanish_ci * /;
USE `bootstrap_calendar`;
- MySQL dump 10.13 Distrib 5.6.13, for Win32 (x86)
—
- Host: 127.0.0.1 Database: bootstrap_calendar
- ——————————————————
- Server version 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 SET NAMES 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 * /;
—
- Table structure for table `events`
—
DROP TABLE IF EXISTS `events`;
/ *! 40101 SET @saved_cs_client = @@ character_set_client * /;
/ *! 40101 SET character_set_client = utf8 * /;
CREATE TABLE `events` (
`id` int (10) unsigned NOT NULL AUTO_INCREMENT,
`title` varchar (150) COLLATE utf8_spanish_ci DEFAULT NULL,
`body` text COLLATE utf8_english_ci NOT NULL,
`url` varchar (150) COLLATE utf8_spanish_ci NOT NULL,
`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,
PRIMARY KEY(`id`)
) ENGINE = InnoDB DEFAULT CHARSET = utf8 COLLATE = utf8_spanish_ci;
/ *! 40101 SET character_set_client = @saved_cs_client * /;
—
- Dumping data for table `events`
—
LOCK TABLES `events` WRITE;
/ *! 40000 ALTER TABLE `events` DISABLE KEYS * /;
/ *! 40000 ALTER TABLE `events` ENABLE KEYS * /;
UNLOCK TABLES;
/ *! 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 * /;
- Dump completed on 2014-05-31 14:38:23
hello migos is there any way to change the JSON date format
The calendar is very good, only when adding a new event the date that it takes by default both in the beginning and in the end is in English format, how do I change it to Spanish? It would be DD / MM / YYYY. Thank you very much and greetings
Hello, the calendar is very good, but when updating a date it is not immediately reflected in the calendar. What I can do ?
I also have another problem, how can I make all the points display in the monthly view, is it possible to enlarge the square? what corresponds to a day?
I have the problem that locally when loading the example it works perfectly but when I upload it to an online server it does not show me anything from the calendar only the buttons. Any idea what may be or what is wrong with the server to fix it please.