Getting started
🚧 This page is under construction, some content may be unusable.
ℹ️ Bootstrap Calendar depends on several libraries. Please be sure to include them.
| Library | Dependencies | Inclusion order |
|---|---|---|
| jQuery | Bootstrap depends on jQuery and Bootstrap Calendar depends on Bootstrap | Include JQuery before Bootstrap and Bootstrap calendar |
| Bootstrap | Bootstrap Calendar depends on Bootstrap | Include Bootstrap before Bootstrap Calendar |
| Underscore | Bootstrap Calendar use Underscore to render its templates (year/month/week/day views) | Include Underscore before Bootstrap Calendar |
| Moment | Bootstrap Calendar use Moment to convert dates | Include Moment before Bootstrap Calendar |
| Bootstrap Calendar | The component itself | Include it before using it in JavaScript |
ℹ️ You can set up an instance of the calendar in various way, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.
e.G. for Ubuntu
sudo apt-get install nodejse.G. for Ubuntu
sudo apt-get install npme.G. for Ubuntu
sudo npm install -g bowerℹ️ if you encounter the error /usr/bin/env: node: No such file or directory, please, follow this link: node: No such file or directory 🔗.
e.G. for Ubuntu
cd /path/to/the/wanted/location
bower install bootstrap-calendare.G. for Ubuntu
bower list --path🚧
e.G.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- ******************************* -->
<!-- ************ jQuery *********** -->
<!-- ******************************* -->
<script src="/path/to/libraries/jquery/dist/jquery.js"></script>
<!-- ******************************* -->
<!-- ********** Bootstrap ********** -->
<!-- ******************************* -->
<!-- ****** depends on jQuery ****** -->
<!-- ******************************* -->
<script src="/path/to/libraries/bootstrap/dist/js/bootstrap.js"></script>
<!-- ******************************* -->
<!-- ********* Underscore ********** -->
<!-- ******************************* -->
<script type="text/javascript" src="/path/to/libraries/underscore/underscore.js"></script>
<!-- ******************************* -->
<!-- *********** Moment ************ -->
<!-- ******************************* -->
<script type="text/javascript" src="/path/to/libraries/moment/moment.js"></script>
<!-- ******************************* -->
<!-- ********** Calendar *********** -->
<!-- ******************************* -->
<!-- **** depends on Underscore **** -->
<!-- ****** depends on Moment ****** -->
<!-- ******************************* -->
<link rel="stylesheet" href="/path/to/libraries/bootstrap-calendar/css/calendar.css">
<script type="text/javascript" src="/path/to/libraries/bootstrap-calendar/js/calendar.js"></script>
</head>
[...]e.G.
<body>
<div id="calendar"></div>
<script type="text/javascript">
var calendar = $('#calendar').calendar({
events_source: [
{
"id": 1,
"title": "Event 1",
"url": "http://example.com",
"class": "event-important",
"start": moment().valueOf(), // Now in milliseconds
"end": moment().add(2, 'days').valueOf() // Now + 2 days in milliseconds
},
{
"id": 2,
"title": "Event 2",
"url": "http://example.com",
"class": "event-default",
"start": moment().add(1, 'days').valueOf(), // Now + 1 day in milliseconds
"end": moment().add(3, 'days').valueOf() // Now + 3 days in milliseconds
},
],
tmpl_path: "/path/to/libraries/bootstrap-calendar/calendar/tmpls/"
});
</script>
</body>tmpl_path option.
Go to your favourite web browser and check your page. It should display the default calendar:
ℹ️ If the calendar does not work, please open the browser console by tapping F12 to see what's the problem and check the common errors page.