Getting started
🚧 This page is under construction, some content may be unusable.
🚧
ℹ️ 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/bower_components/jquery/dist/jquery.js"></script>
<!-- ******************************* -->
<!-- ********** Bootstrap ********** -->
<!-- ******************************* -->
<!-- ****** depends on jQuery ****** -->
<!-- ******************************* -->
<script src="/path/to/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- ******************************* -->
<!-- ********* Underscore ********** -->
<!-- ******************************* -->
<script type="text/javascript" src="/path/to/bower_components/underscore/underscore.js"></script>
<!-- ******************************* -->
<!-- *********** Moment ************ -->
<!-- ******************************* -->
<script type="text/javascript" src="/path/to/bower_components/moment/moment.js"></script>
<!-- ******************************* -->
<!-- ********** Calendar *********** -->
<!-- ******************************* -->
<!-- **** depends on Underscore **** -->
<!-- ****** depends on Moment ****** -->
<!-- ******************************* -->
<link rel="stylesheet" href="/path/to/bower_components/bootstrap-calendar/css/calendar.css">
<script type="text/javascript" src="/path/to/bower_components/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/bower_components/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.