Hello, folks!
We’re going to learn how we can add bootstrap calendar in our web page, that exhibits Year, Month, Dates, Events and additional features of previous and next month buttons.
You can refer to our attractive bootstrap templates for a quick solution.
Let’s take a look at the files we’re going to use in this tutorial.
Files to be included
- fullcalendar.css
- fullcalendar.print.css
- moment.min.js
- jQuery.min.js
- fullcalendar.min.js
Now we’ll move towards the coding part.
Firstly, we’ll include the files we’re going to use in the head section of our web page.
Include Files
<head>
<!--Sylesheets and JavaScript files to be included-->
<link href='fullcalendar.css' rel='stylesheet' />
<link href='fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='moment.min.js'></script>
<script src='jquery.min.js'></script>
<script src='fullcalendar.min.js'></script>
</head>Make sure you’re including Full calendar stylesheets, Full calendar, jQuery and Moment javascript files.
Without them it is not going to work.
jQuery and Moment must be loaded before theFullcalendar’s javascript.
Now we need to include the javascript code that initializes the calendar with the header section including previous, next and today buttons. This will go in the head section as well.
Script in the Head section
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
<!--Header Section Including Previous,Next and Today-->
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
<!--Default Date-->
defaultDate: '2015-02-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
});
});
</script>Now if we want to add events in our calender, then we just have to include code inside the javascript function and after the code “eventLimit:true”.
Code we need to include :
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
<!--Header Section Including Previous,Next and Today-->
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
<!--Default Date-->
defaultDate: '2015-02-12',
editable: true,
<!--Event Section-->
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2015-02-01'
},
{
title: 'Long Event',
start: '2015-02-07',
end: '2015-02-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-02-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-02-16T16:00:00'
},
{
title: 'Conference',
start: '2015-02-11',
end: '2015-02-13'
},
{
title: 'Meeting',
start: '2015-02-12T10:30:00',
end: '2015-02-12T12:30:00'
},
{
title: 'Lunch',
start: '2015-02-12T12:00:00'
},
{
title: 'Meeting',
start: '2015-02-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2015-02-12T17:30:00'
},
{
title: 'Dinner',
start: '2015-02-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2015-02-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2015-02-28'
}
]
});
});
</script>We can clearly see the event list added in the javascript.Similiarly more events can be added.
Now we need to add the css code inside the head section.
CSS Code
<!--Styling for calendar-->
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>DIV section
Our next step is to add the following html code in our body section.
<div id='calendar'></div>Our Bootstrap calendar is successfully added to our page.
Conclusion
So, this is how we can add a bootstrap calendar in ourwebpage. I hope it was helpful for you. Keep visiting our website.
2 Replies to “Bootstrap Calendar”
Hi,
Just wanted to let you know that the Download Script above emails a link to download the bootstrap navbar instead of the calendar…
Thanks!
i want to load current day view as default in bootstrap calendar view can i able to change this can u help me out