Bootstrap full calendar plugin
Note: This documentation is for an older version of Bootstrap [v.4]. A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5
Bootstrap full calendar plugin is an extension that allows you to create calendar functionality.
Thanks to this plugin you will be able to easily create new events, manage current events, move existing events between other days, and integrate with your Google Calendar.
To start working with full calendar plugin see "Getting Started" tab on this page.
Basic Example
A few predefined events allowing you to see how the plugin looks like.
Dynamically added events
Find out how easy it is to add new events with the Full Calendar plugin! One button, and the event is already in your calendar.
Events with tooltips
You can easily add tooltip to an event in the calendar. This way you can easily remember what this event is all about.
Movable events
Didn't you do something today? Set it aside for tomorrow! Full Calendar allows you to move events between other days.
Long dynamic events
Select few days and create an event with one click! Just like in Google Calendar.
Full Calendar options list
Below options are available to use in Full Calendar.
header
| object | left: 'title', center: ' ', right: 'today prev, next' | Defines the buttons and title at the top of the calendar. | title, prev, next, prevYear, nextYear, today
| header: {left: 'title', center: ' ', right: 'today prev, next' }
|
footer
| object | false | Defines the controls at the bottom of the calendar. | title, prev, next, prevYear, nextYear, today
| footer: {left: 'title', center: ' ', right: 'today prev, next' }
|
titleFormat
| object | - | Determines the text that will be displayed in the header’s title. | -
| titleFormat: 'MM/YYYY'
|
buttonText
| object | buttonText: {today: 'today', month: 'month, week: 'week', day: 'day', list: 'list'} | Defines the buttons and title at the top of the calendar. | -
| buttonText: {today: 'today', month: 'month, week: 'week', day: 'day', list: 'list'}
|
buttonIcons
| object | prev: 'left-single-arrow', next: 'right-single-arrow', prevYear: 'left-double-arrow', nextYear: 'right-double-arrow' | Icons that will be displayed in buttons of the header/footer. | 'left-single-arrow', 'right-single-arrow', 'left-double-arrow', 'right-double-arrow'
| buttonIcons: {next: 'right-single-arrow', prevYear: 'left-double-arrow', nextYear: 'right-double-arrow'}
|
customButtons
| object | - | Defines custom buttons that can be used in the header/footer. Specify a hash of custom buttons. Then reference them from the header setting. | text, click, icon, themeIcon, bootstrapGlyphicon
| customButtons: { myCustomButton: { text: 'Custom', click: function[] { alert['Clicked the custom button']; } } }, header: {left: 'myCustomButton', center: ' ', right: ' ' }
|
Below events are available to use in Full Calendar.
eventClick
| any | The event is fired when user has clicked the event. | eventClick: function[calEvent, jsEvent, view] { console.log['click', calEvent.title]; }
|
eventMouseover
| any | The event is fired when user has mouseover the event. | eventMouseover: function[calEvent, jsEvent, view] { console.log['mouseover', calEvent]; }
|
eventMouseout
| any | The event is fired when user has mouseout the event. | eventMouseout: function[calEvent, jsEvent, view] { console.log['mouseout', calEvent]; }
|
In this section, we are going to learn about Integrate jQuery Fullcalendar. We will use MySQL, Bootstrap, and PHP to do this. In our example, we will use Php, Bootstrap, and MySQL to integrate full calendar events CRUD operation. JQuery library is a part of Fullcalendar, which is used to provide the facility to display a calendar with events and more things.
The facility of displaying week, month, year, and day calendars is provided by the Fullcalendar JS. It also has the facility to perform drag & drop event management. It will be very good to use an event calendar such as Fullcalendar when we are working on task management, event management, or any other thing related to date to date. In our below example, we will use the MySQL database to create a table named "events". We will also use JQuery Ajax to create the CRUD operation, which is described as follows:
- Event Lists
- Create Event
- Update Event
- Delete Event
In order to integrate fullcalendar events by using the Php MySQL, the step by step process is described as follows:
Step 1:
In this step, we are going to Create Events Table. Here, we will use our database and create a new table named "events" into it. In order to create this table, we will use the SQL query, which is described as follows:
item table:
Step 2:
In this step, we are going to Create DB Configuration File. For this, we have to set some details on the database like username, password, and database name. After that, we will use our root directory and create a new file named "db_config.php" and add the following code into it like this:
db_config.php
Step 3:
In this step, we are going to Create View File. Here, a new view file named index.php will be created. This file is used to render a full calendar layout. The Ajax code and jQuery code will be written in this file. This file will contain the various js and css file, which is described as follows:
- Jquery.mim.js
- Fullcalendar.css
- Fullcalendar.min.js
- Bootstrap.css
- Moment.min.js
Now we will create a file named index.php and then add the following code into it like this:
index.php
Step 4:
In this step, we are going to Create Ajax File. In our application, four files for the Ajax method will be created, which is described as follows:
- Events.php
- Add_events.php
- Delete_events.php
- Update_events.php
Now, the creation of the above four files is described as follows. We will add the following code into these files one by one. Firstly we will create the events.php file and put the following code into it like this:
events.php
Now we will create an add_events.php file and add the following code into it like this:
add_events.php
After that, we will create an delete_event.php file and add the following code into it like this:
delete_event.php
Lastly, we will create an update_events.php file and add the following code into it like this:
update_events.php
Now our above code is ready to run. In order to run the above code quickly, we will use our root directory and run the following command:
Now we can use our browser to open the below URL:
After open this, we can see the following output: