Skip to content
LucileDT edited this page Jun 26, 2017 · 14 revisions

🚧 This page is under construction, some content may be unusable.

Table of contents

separator

Dependencies

ℹ️ 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

separator

Download

ℹ️ 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.

⚠️ commands are given for Ubuntu, they may not be appropriate for all Linux distributions. If one of them doesn't work, feel free to search with your favourite search engine how to do the described step with your own distribution.

separator

Install with Bower

Step 1 : Install NodeJS

e.G. for Ubuntu

sudo apt-get install nodejs

Step 2 : Install NPM

e.G. for Ubuntu

sudo apt-get install npm

Step 3 : Install Bower

e.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 🔗.

Step 4 : Install Bootstrap Calendar

e.G. for Ubuntu

cd /path/to/the/wanted/location
bower install bootstrap-calendar

Step 5 : List files you need to include in your document

e.G. for Ubuntu

bower list --path

separator

Install with Composer

🚧

separator

Usage

Step 1 : Include files in your document

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>
[...]

Step 2 : Render the default calendar

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>

⚠️ Be sure to set the path to templates using tmpl_path option.

⚠️ Bootstrap Calendar works only with web paths, not locals ones. Be sure to use a web server (Apache, nginx, PHP built-in server, Symfony built-in server...) if you want to use it.

Step 3 : Check if it works

Go to your favourite web browser and check your page. It should display the default calendar:

Default calendar in your web browser

ℹ️ 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.