PHPackages                             serhioromano/bootstrap-calendar - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. serhioromano/bootstrap-calendar

ActiveLibrary[Utility & Helpers](/categories/utility)

serhioromano/bootstrap-calendar
===============================

Bootstrap full view calendar.

0.2.5(10y ago)3.0k5.9k1.3k[201 issues](https://github.com/Serhioromano/bootstrap-calendar/issues)2BSDJavaScript

Since Jan 30Pushed 4y ago212 watchersCompare

[ Source](https://github.com/Serhioromano/bootstrap-calendar)[ Packagist](https://packagist.org/packages/serhioromano/bootstrap-calendar)[ Docs](http://bootstrap-calendar.azurewebsites.net/)[ RSS](/packages/serhioromano-bootstrap-calendar/feed)WikiDiscussions master Synced today

READMEChangelog (7)Dependencies (4)Versions (8)Used By (2)

Bootstrap Calendar
==================

[](#bootstrap-calendar)

A Full view calendar based on Twitter Bootstrap. Please try the [demo](http://bootstrap-calendar.eivissapp.com/).

[![Bootstrap full calendar](https://camo.githubusercontent.com/b5f70af4b48915ea6d2c7137519bc051f76d38bf8dc05b3ed408793a14ad946a/68747470733a2f2f696d6731352e686f7374696e67706963732e6e65742f706963732f313837333431616e696d61746564707265766965772e676966)](https://camo.githubusercontent.com/b5f70af4b48915ea6d2c7137519bc051f76d38bf8dc05b3ed408793a14ad946a/68747470733a2f2f696d6731352e686f7374696e67706963732e6e65742f706963732f313837333431616e696d61746564707265766965772e676966)

### Why?

[](#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

[](#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
----------

[](#how-to-use)

### Install

[](#install)

You can install it with [bower](http://bower.io/) 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

[](#quick-setup)

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

```
	>

		Minimum Setup

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

```

Bootstrap Calendar depends on [jQuery](http://jquery.com/) and [underscore.js](http://underscorejs.org/) 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:

```

```

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

```

		var calendar = $('#calendar').calendar({language: 'xx-XX'});

```

Feed with events
----------------

[](#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](https://github.com/Serhioromano/bootstrap-calendar/blob/master/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

[](#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

[](#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

[](#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

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

```