AngularJS Calendar
A simple AngularJS Calendar that will allow you modify the individual day format.
Usage
Install the plugin via npm.
npm i @renante/rdacalendar
Load necessary files.
calendar.css is mandatory for layout.
calendar-theme.css is optional and you can ignore if you like to full control the layout.
<link href="/node_modules/@renante/rdacalendar/dist/calendar.css" rel="stylesheet"/>
<link href="/node_modules/@renante/rdacalendar/dist/calendar-theme.css" rel="stylesheet"/>
<script src="/node_modules/angular/angular.min.js"></script>
<script src="/node_modules/angular-sanitize/angular-sanitize.min.js"></script>
<script src="/node_modules/@renante/rdacalendar/dist/calendar.js"></script>
Add calendar module as dependency.
var app = angular.module('app', ['rdaCalendar']);
Options
prev
Override 'Previous' text.
<calendar prev="<< Previous"></calendar>
next
Override 'Next' text.
<calendar next="Next >>"></calendar>
first-day
The day of the week begin. 0 = Sunday, 1 = Monday.
Methods
onCalendarUpdated
This will fire everytime the calendar is updated (eg. when navigating months).
It will allow you to modify the individual days before it render on the calendar by setting the dayFormat or class.
<calendar on-calendar-updated="onCalendarUpdated(info)"></calendar>
Example:
$scope.onCalendarUpdated = function(info) {
angular.forEach(info.days, function(day){
day.dayFormat = `<span class='day'>${ day.day }</span>`;
day.class = 'pink-bg';
});
}
onDaySelected
When a day is selected, it will return the day number.
<calendar on-day-selected="onDaySelected(day)"></calendar>
Example
$scope.onDaySelected = function (day) {
console.log(`The day selected is ${day}`);
}
Events
changeDayFormat
Manually change day format.
It will fire some methods like onCalendarUpdated.
$scope.$broadcast('changeDayFormat', { day: 1, dayFormat: 'first day of the month' });
updateCalendar
Call updateCalendar event manually.
$scope.$broadcast('updateCalendar');