bootstrap-calendar

Full view calendar with year, month, week and day views based on templates with Twitter Bootstrap.

3,023

1,291

3,023

200

View on GitHub View on NPM

Top Related Projects

fullcalendar

18,432

Full-sized drag & drop event calendar in JavaScript

tui.calendar

11,862

🍞📅A JavaScript calendar that has everything you need.

react-big-calendar

7,712

gcal/outlook like calendar component

bootstrap-datepicker

12,664

A datepicker for twitter bootstrap (@twbs)

tempus-dominus

7,152

A powerful Date/time picker widget.

flatpickr

16,122

lightweight, powerful javascript datetimepicker with no dependencies

Quick Overview

Bootstrap Calendar is a full-sized, drag & drop event calendar plugin for Bootstrap. It provides a clean and intuitive interface for managing events, with support for various views (year, month, week, day) and customizable event handling.

Pros

Seamless integration with Bootstrap, inheriting its styling and responsiveness
Supports multiple calendar views (year, month, week, day)
Drag & drop functionality for easy event management
Customizable event handling and appearance

Cons

Limited documentation and examples
Not actively maintained (last commit was in 2019)
Some reported issues with newer versions of Bootstrap
Lack of built-in localization support

Code Examples

Basic calendar initialization:

$('#calendar').calendar({
    tmpl_path: "/tmpls/",
    events_source: '/events.json'
});

Customizing event colors:

$('#calendar').calendar({
    classes: {
        months: {
            general: 'label'
        }
    },
    events_source: function () {
        return [
            {
                id: 1,
                title: 'Event 1',
                url: 'http://example.com',
                class: 'event-important',
                start: 1396373400000,
                end: 1396373400000
            }
        ];
    }
});

Adding a custom view:

$('#calendar').calendar({
    views: {
        custom: {
            name: 'Custom View',
            period: 'days',
            rows: 2,
            cols: 3
        }
    },
    view: 'custom'
});

Getting Started

Include the necessary files in your HTML:

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-calendar.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/underscore-min.js"></script>
<script src="js/calendar.js"></script>

Add a container for the calendar in your HTML:

<div id="calendar"></div>

Initialize the calendar in your JavaScript:

$(document).ready(function() {
    $('#calendar').calendar({
        tmpl_path: "/tmpls/",
        events_source: '/events.json'
    });
});

Competitor Comparisons

fullcalendar

18,432

Full-sized drag & drop event calendar in JavaScript

Pros of FullCalendar

More feature-rich and customizable
Better documentation and community support
Regular updates and active maintenance

Cons of FullCalendar

Steeper learning curve due to more complex API
Larger file size, which may impact page load times
Premium features require a paid license

Code Comparison

bootstrap-calendar:

$('#calendar').calendar({
    tmpl_path: "/tmpls/",
    events_source: function () { return []; }
});

FullCalendar:

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    events: []
  });
  calendar.render();
});

Both libraries offer easy initialization, but FullCalendar provides more options out of the box and uses modern JavaScript practices. bootstrap-calendar relies on jQuery, while FullCalendar can be used with or without it. FullCalendar's API is more extensive, allowing for greater customization but requiring more code for complex setups.

tui.calendar

11,862

🍞📅A JavaScript calendar that has everything you need.

Pros of tui.calendar

More feature-rich with advanced functionalities like drag-and-drop, resizing events, and multiple views
Better documentation and examples, making it easier for developers to implement and customize
Actively maintained with regular updates and bug fixes

Cons of tui.calendar

Steeper learning curve due to its complexity and extensive API
Larger file size, which may impact page load times for smaller projects
Requires more setup and configuration compared to simpler alternatives

Code Comparison

bootstrap-calendar:

$('#calendar').calendar({
    tmpl_path: "/tmpls/",
    events_source: function () { return []; }
});

tui.calendar:

const calendar = new Calendar('#calendar', {
    defaultView: 'week',
    taskView: true,
    scheduleView: ['allday', 'time'],
    template: {
        milestone: function(schedule) {
            return '<span style="color:red;">' + schedule.title + '</span>';
        }
    }
});

The code comparison shows that tui.calendar offers more customization options and features out of the box, while bootstrap-calendar provides a simpler initialization process. tui.calendar's code demonstrates its ability to handle different views and custom templates for various event types, showcasing its flexibility and power compared to the more straightforward approach of bootstrap-calendar.

react-big-calendar

7,712

gcal/outlook like calendar component

Pros of react-big-calendar

Built specifically for React, offering seamless integration with React applications
More actively maintained with frequent updates and bug fixes
Offers more customization options and flexibility in styling

Cons of react-big-calendar

Steeper learning curve for developers not familiar with React
Requires additional setup and configuration compared to bootstrap-calendar
May have a larger bundle size due to React dependencies

Code Comparison

bootstrap-calendar:

$('#calendar').calendar({
    tmpl_path: "/tmpls/",
    events_source: function () { return []; }
});

react-big-calendar:

import { Calendar, momentLocalizer } from 'react-big-calendar'
import moment from 'moment'

const localizer = momentLocalizer(moment)

<Calendar
  localizer={localizer}
  events={myEventsList}
  startAccessor="start"
  endAccessor="end"
/>

The code comparison shows that bootstrap-calendar uses jQuery for initialization, while react-big-calendar uses React components and props. react-big-calendar requires more setup but offers a more React-friendly approach to calendar implementation.

bootstrap-datepicker

12,664

A datepicker for twitter bootstrap (@twbs)

Pros of bootstrap-datepicker

More focused on date picking functionality, providing a simpler and more streamlined user experience
Extensive documentation and examples, making it easier for developers to implement and customize
Wider browser compatibility, including support for older versions of Internet Explorer

Cons of bootstrap-datepicker

Limited to date selection only, lacking full calendar view and event management features
Less suitable for applications requiring complex scheduling or event visualization

Code Comparison

bootstrap-datepicker:

$('#datepicker').datepicker({
    format: 'mm/dd/yyyy',
    startDate: '-3d',
    autoclose: true
});

bootstrap-calendar:

$('#calendar').calendar({
    tmpl_path: "/tmpls/",
    events_source: function () { return []; }
});

The code snippets demonstrate the initialization of each plugin. bootstrap-datepicker focuses on configuring date selection options, while bootstrap-calendar emphasizes event sourcing and template customization for a full calendar view.

bootstrap-datepicker is ideal for simple date input scenarios, offering a lightweight solution with extensive customization options. bootstrap-calendar, on the other hand, provides a more comprehensive calendar system suitable for applications requiring event management and visualization. The choice between the two depends on the specific requirements of your project.

tempus-dominus

7,152

A powerful Date/time picker widget.

Pros of tempus-dominus

More actively maintained with frequent updates
Supports both date and time selection
Better documentation and examples

Cons of tempus-dominus

Steeper learning curve for beginners
Larger file size and potentially heavier on resources

Code Comparison

bootstrap-calendar:

$('#calendar').calendar({
    tmpl_path: "/tmpls/",
    events_source: '/events.json'
});

tempus-dominus:

new tempusDominus.TempusDominus(document.getElementById('datetimepicker'), {
    display: {
        components: {
            calendar: true,
            date: true,
            month: true,
            year: true,
            decades: true,
            clock: true,
            hours: true,
            minutes: true,
            seconds: true
        }
    }
});

The code comparison shows that tempus-dominus offers more granular control over the components displayed in the picker, while bootstrap-calendar has a simpler initialization process. tempus-dominus uses a more modern JavaScript approach, whereas bootstrap-calendar relies on jQuery.

flatpickr

16,122

lightweight, powerful javascript datetimepicker with no dependencies

Pros of flatpickr

Lightweight and dependency-free, resulting in faster load times
Extensive customization options and support for various date/time formats
Active development with frequent updates and bug fixes

Cons of flatpickr

Lacks built-in calendar view for displaying multiple events
May require additional plugins or custom code for more complex calendar functionality
Learning curve can be steeper for advanced features

Code Comparison

bootstrap-calendar:

$("#calendar").calendar({
    tmpl_path: "/tmpls/",
    events_source: "/events.json"
});

flatpickr:

flatpickr("#datepicker", {
    enableTime: true,
    dateFormat: "Y-m-d H:i",
    minDate: "today"
});

While bootstrap-calendar focuses on creating a full calendar view with events, flatpickr primarily serves as a date/time picker. The code examples demonstrate the different approaches: bootstrap-calendar initializes a calendar with event data, while flatpickr sets up a date input with various options.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Bootstrap Calendar

A Full view calendar based on Twitter Bootstrap. Please try the demo.

Bootstrap full calendar

Why?

Why did I start this project? Well, I believe there are no good full view calendar's out there with native Bootstrap support. In fact I could not find even one. A different UI and UX concept approach is also used.

Features

Reusable - there is no UI in this calendar. All buttons to switch view or load events are done separately. You will end up with your own uniquie calendar design.
Template based - all view like year, month, week or day are based on templates. You can easily change how it looks or style it or even add new custom view.
LESS - easy adjust and style your calendar with less variables file.
AJAX - It uses AJAX to feed calendar with events. You provide URL and just return by this URL JSON list of events.
i18n - language files are connected separately. You can easily translate the calendar into your own language. Holidays are also diplayed on the calendar according to your language

How to use

Install

You can install it with bower package manager.

$ bower install bootstrap-calendar

Bower will automatically install all dependencies. Then by running

$ bower list --path

You will see list of the files you need to include to your document.

Quick setup

You will need to include the bootstrap css and calendar css. Here is the minimum setup.


	<!DOCTYPE html>
	<html>
	<head>
		<title>Minimum Setup</title>
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" href="css/calendar.css">
	</head>
	<body>

		<div id="calendar"></div>

		<script type="text/javascript" src="js/vendor/jquery-1.9.1.js"></script>
		<script type="text/javascript" src="js/vendor/underscore-min.js"></script>
		<script type="text/javascript" src="js/calendar.js"></script>
		<script type="text/javascript">
			var calendar = $("#calendar").calendar(
				{
					tmpl_path: "/tmpls/",
					events_source: function () { return []; }
				});			
		</script>
	</body>
	</html>

Bootstrap Calendar depends on jQuery and underscore.js is used as a template engine. For the calendar you only have to include the calendar.css and calendar.js files. If you want to localize your Calendar, it's enough to add this line before including calendar.js:


	<script type="text/javascript" src="js/language/xx-XX.js"></script>

Where xx-XX is the language code. When you initializing the calendar, you have to specify this language code:


	<script type="text/javascript">
		var calendar = $('#calendar').calendar({language: 'xx-XX'});
	</script>

Feed with events

To feed the calendar with events you should use events_source parameter. It may be a function, array or URL. In all cases you have to set it with valid events array.

See events.json.php file for more details.

start and end contain dates when event starts (inclusive) and ends (exclusive) in Unix timestamp. Classes are event-important, event-success, event-warning, event-info, event-inverse and event-special. This wil change the color of your event indicators.

Feed URL

var calendar = $('#calendar').calendar({events_source: '/api/events.php'});

It will send two parameters by GET named from and to, which will tell you what period is required. You have to return it in JSON structure like this

{
	"success": 1,
	"result": [
		{
			"id": 293,
			"title": "Event 1",
			"url": "http://example.com",
			"class": "event-important",
			"start": 12039485678000, // Milliseconds
			"end": 1234576967000 // Milliseconds
		},
		...
	]
}

Feed array

You can set events list array directly to events_source parameter.


	var calendar = $('#calendar').calendar({
	    events_source: [
            {
                "id": 293,
                "title": "Event 1",
                "url": "http://example.com",
                "class": "event-important",
                "start": 12039485678000, // Milliseconds
                "end": 1234576967000 // Milliseconds
            },
            ...
        ]});

Feed function

Or you can use function. You have to return array of events.


	var calendar = $('#calendar').calendar({events_source: function(){
	    return  [
           {
               "id": 293,
               "title": "Event 1",
               "url": "http://example.com",
               "class": "event-important",
               "start": 12039485678000, // Milliseconds
               "end": 1234576967000 // Milliseconds
           },
           ...
       ];
	}});

PHP example

Note that start and end dates are in milliseconds, thus you need to divide it by 1000 to get seconds. PHP example.


    $start = date('Y-m-d h:i:s', ($_GET['start'] / 1000));

If you have an error you can return

	{
		"success": 0,
		"error": "error message here"
	}

Here is the example of PHP script.

<?php
$db    = new PDO('mysql:host=localhost;dbname=testdb;charset=utf8', 'username', 'password');
$start = $_REQUEST['from'] / 1000;
$end   = $_REQUEST['to'] / 1000;
$sql   = sprintf('SELECT * FROM events WHERE `datetime` BETWEEN %s and %s',
    $db->quote(date('Y-m-d', $start)), $db->quote(date('Y-m-d', $end)));

$out = array();
foreach($db->query($sql) as $row) {
    $out[] = array(
        'id' => $row->id,
        'title' => $row->name,
        'url' => Helper::url($row->id),
        'start' => strtotime($row->datetime) . '000',
        'end' => strtotime($row->datetime_end) .'000'
    );
}

echo json_encode(array('success' => 1, 'result' => $out));
exit;

Another example of PHP script (without connecting with the Database).

<?php
$out = array();
 
 for($i=1; $i<=15; $i++){ 	//from day 01 to day 15
	$data = date('Y-m-d', strtotime("+".$i." days"));
	$out[] = array(
     	'id' => $i,
		'title' => 'Event name '.$i,
		'url' => Helper::url($id),
		'class' => 'event-important',
		'start' => strtotime($data).'000'
	);
}
 
echo json_encode(array('success' => 1, 'result' => $out));
exit;
?>

Usage warning.

You cannot use the calendar from a local file. The following error will be displayed : Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin.

Using Ajax with local resources (file:///), is not permited. You will need to deploy this to the web instead.

Modal popup

You can enable a bootstrap modal popup to show when clicking an event instead of redirecting to event.url. To enable boostrap modal, first add the modal html to your page and provide boostrap-calendar with the ID:


    <div class="modal hide fade" id="events-modal">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3 class="modal-title">Event</h3>
        </div>
        <div class="modal-body" style="height: 400px">
        </div>
        <div class="modal-footer">
            <a href="#" data-dismiss="modal" class="btn">Close</a>
        </div>
    </div>

and then set:

modal: "#events-modal"

This will enable the modal, and populate it with an iframe with the contents of event.url .

For Bootstrap v3, use


    <div class="modal fade" id="events-modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h3 class="modal-title">Event</h3>
                </div>
                <div class="modal-body" style="height: 400px">
                </div>
                <div class="modal-footer">
                    <a href="#" data-dismiss="modal" class="btn">Close</a>
                </div>
            </div>
        </div>
    </div>

Modal content source

There are three options for populating the contents of the modal, controlled by the modal_type option:

iframe (default) - populates modal with iframe, iframe.src set to event.url
ajax - gets html from event.url, this is useful when you just have a snippet of html and want to take advantage of styles in the calendar page
template - will render a template (example in tmpls/modal.html) that gets the event and a reference to the calendar object.

Modal title

The modal title can be customized by defining the modal_title option as a function. This function will receive the event as its only parameter. For example, this could be used to set the title of the modal to the title of the event:

modal_title: function(event) { return event.title }

A calendar set up to use modals would look like this:

$("#calendar").calendar({modal : "#events-modal", modal_type : "ajax", modal_title : function (e) { return e.title }})

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of FullCalendar

Cons of FullCalendar

Code Comparison

Pros of tui.calendar

Cons of tui.calendar

Code Comparison

Pros of react-big-calendar

Cons of react-big-calendar

Code Comparison

Pros of bootstrap-datepicker

Cons of bootstrap-datepicker

Code Comparison

Pros of tempus-dominus

Cons of tempus-dominus

Code Comparison

Pros of flatpickr

Cons of flatpickr

Code Comparison

Convert designs to code with AI

README

Bootstrap Calendar

Why?

Features

How to use

Install

Quick setup

Feed with events

Feed URL

Feed array

Feed function

PHP example

Usage warning.

Modal popup

Modal content source

Modal title

Top Related Projects

Convert designs to code with AI

NPM DownloadsLast 30 Days