Please see the release notes for upgrading from 0.9.x to 0.10.x as there are many breaking changes.
This plugin is an AngularJS port of the original jQuery bootstrap calendar that can be found here: http://bootstrap-calendar.azurewebsites.net/
The layout and functionality is intended to be exactly the same, but without the overhead of including jQuery just for a calendar.
All credits for the UI/UX and the less files of the calendar go to the original author.
Pull requests are welcome.
The calendar has a few dependencies, these are as follows, and must be included BEFORE the plugin files:
- AngularJS 1.2+
- Bootstrap 3+ (CSS only)
- Moment.js
- ui-bootstrap (optional, include for collapse animations and tooltips on the year and month views)
It is recommended that you install the plugin and its dependencies through bower:
bower install --save angular-bootstrap-calendar
but it is also possible to install through npm so you can use with browserify etc:
npm install --save angular-bootstrap-calendar
You will then need to include the JS and CSS files for the plugin:
<link rel="stylesheet" href="bower_components/angular-bootstrap-calendar/dist/css/angular-bootstrap-calendar.min.css">
<script src="bower_components/angular-bootstrap-calendar/dist/js/angular-bootstrap-calendar-tpls.min.js"></script>
And finally add the module dependency in your AngularJS app (you can remove ui.bootstrap if you don't want the extra dependency - it is only required for collapse animations and tooltips):
angular.module('myModule', ['mwl.calendar', 'ui.bootstrap']);There is a single directive exposed to create the calendar, use it like so:
<mwl-calendar
view="calendarView"
current-day="calendarDay"
events="events"
view-title="calendarTitle"
on-event-click="eventClicked(calendarEvent)"
edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'"
delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'"
on-edit-event-click="eventEdited(calendarEvent)"
on-delete-event-click="eventDeleted(calendarEvent)"
auto-open="true">
</mwl-calendar>An explanation of the properties is as follows:
This variable is a string that can be either 'year', 'month', 'week' or 'day. Changing it will change the view of the calendar.
For the calendar to display this variable needs to be set like so:
$scope.calendarView = 'month';This variable holds the current day the calendar is centralised on. Each view will decide on its current year / month / week / day depending on the value of this variable.
An array of events to display on the calendar. For example:
$scope.events = [
{
title: 'My event title', // The title of the event
type: 'info', // The type of the event (determines its color). Can be important, warning, info, inverse, success or special
startsAt: new Date(2013,5,1,1), // A javascript date object for when the event starts
endsAt: new Date(2014,8,26,15), // A javascript date object for when the event ends
editable: false, // If edit-event-html is set and this field is explicitly set to false then dont make it editable
deletable: false, // If delete-event-html is set and this field is explicitly set to false then dont make it deleteable
incrementsBadgeTotal: true //If set to false then will not count towards the badge total amount on the month and year view
}
];The 4 properties listed are required for all events.
This variable will be assigned to the calendar title. If you want to change the formatting you can use the calendarConfigProvider or just override the appropriate method in the calendarTitle factory.
This expression is called when an event is clicked on the calendar. calendarEvent contains the calendar event that was clicked on.
If provided this piece of html will be displayed next to an event on the year and month view and will fire the function passed to edit-event-click.
If provided this piece of html will be displayed next to an event on the year and month view and will fire the function passed to delete-event-click.
This expression is called when an event edit link is clicked on the calendar. calendarEvent contains the calendar event that was clicked on.
This expression is called when an event delete link is clicked on the calendar. calendarEvent contains the calendar event that was clicked on.
This expression is called when a month or day on the calendar is clicked. calendarDate contains the start of the month or day that was clicked on.
Whether to auto open the year and month view breakdown to the current year / month. Default: false
An interpolated string in the form of hh:mm to start the day view at, e.g. setting it to 06:00 will start the day view at 6am
An interpolated string in the form of hh:mm to end the day view at, e.g. setting it to 22:00 will end the day view at 10pm
The number of chunks to split the day view hours up into. Can be either 10, 15 or 30. Default: 30
An optional expression that is evaluated when the drilldown (clicking on a date to change the view) is triggered. Return false from the expression function to disable the drilldown. calendarDate is available as the date that was selected. calendarNextView is the view that the calendar will be changed to.
There is also a helper directive that you can use for the next, today and previous buttons. Use it like so:
<button
class="btn btn-primary"
mwl-date-modifier
date="calendarDay"
decrement="calendarView">
Previous
</button>
<button
class="btn btn-default"
mwl-date-modifier
date="calendarDay"
set-to-today>
Today
</button>
<button
class="btn btn-primary"
mwl-date-modifier
date="calendarDay"
increment="calendarView">
Next
</button>The calendar directive uses moment.js to produce all months and days of the week etc. Therefore to change the language of the calendar just follow this guide.
tl;dr include the appropriate moment locale file (or all of them) and call moment.locale('YOUR_LOCALE_STRING').
To set Monday as the first day of the week configure it in moment like so:
moment.locale('en', {
week : {
dow : 1 // Monday is the first day of the week
}
});You can easily customise the date formats and i18n strings used throughout the calendar by using the calendarConfigProvider. Please note that all formats are those used by moment.js. Example usage:
angular.module('myModule')
.config(function(calendarConfigProvider) {
calendarConfigProvider.setDateFormats({
hour: 'HH:mm' //this will configure the hour view to display in 24 hour format rather than the default of 12 hour
});
calendarConfigProvider.setTitleFormats({
day: 'ddd D MMM' //this will configure the day view title to be shorter
});
calendarConfigProvider.setI18nStrings({
eventsLabel: 'Events', //This will set the events label on the day view
timeLabel: 'Time' //This will set the time label on the time view
});
});For a full list of all available formats and their defaults see calendarConfig.js
http://mattlewis92.github.io/angular-bootstrap-calendar/
- Install Node.js and NPM (should come with)
- Install global dev dependencies:
npm install -g gulp - Install local dev dependencies:
npm installwhile current directory is this repo
Run gulp watch to start a development server on port 8000 with livereload.
Run gulp test:src to run tests once or test:watch to continually run tests (this is automatic when you run gulp watch).
Run gulp build to build the project files in the dist folder
The MIT License
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.