A rich calendar control for visualizing events implemented on top of AngularJS UI Bootstrap's Datepicker plugin.
A rich calendar control for visualizing events implemented on top of AngularJS UI Bootstrap’s Datepicker plugin.
Sample Preview @ http://richcc.azurewebsites.net/
[
{ 'id': '1', 'initial': 'A', 'name': 'Event A', 'startDt': '01-02-2016', 'endDt': '01-06-2016', 'bgcolor': '#2ecc71', 'color': '#ffffff', 'subject': 'Will not have have access to e-mails. You can contact me on XXX-XXX-XXXX' },
{ 'id': '2', 'initial': 'B', 'name': 'Event B', 'startDt': '01-02-2016', 'endDt': '01-02-2016', 'bgcolor': '#47a1de', 'color': '#ffffff', 'subject': 'Will not have have access to e-mails. You can contact me on XXX-XXX-XXXX' },
{ 'id': '5', 'initial': 'E', 'name': 'Event E', 'startDt': '01-10-2016', 'endDt': '02-10-2016', 'bgcolor': '#ffc310', 'color': '#000000', 'subject': 'Will not have have access to e-mails. You can contact me on XXX-XXX-XXXX' },
{ 'id': '3', 'initial': 'C', 'name': 'Event C', 'startDt': '01-07-2016', 'endDt': '01-08-2016', 'bgcolor': '#e67e22', 'color': '#ffffff', 'subject': 'Will not have have access to e-mails. You can contact me on XXX-XXX-XXXX' },
{ 'id': '4', 'initial': 'D', 'name': 'Event D', 'startDt': '01-06-2016', 'endDt': '01-09-2016', 'bgcolor': '#e74c3c', 'color': '#ffffff', 'subject': 'Will not have have access to e-mails. You can contact me on XXX-XXX-XXXX' }
];
<richcc-datepicker datepicker-mode="'day'" ng-model="sample.dt" year-map-heat="true" events="sample.sampleEvents" show-weeks="false" class="well well-sm"></richcc-datepicker>
<richcc-datepicker ng-model="sample.dt" light="true" events="sample.sampleEvents" event-popup-hide="false" prevent-cal-nav="true" show-weeks="false" class="well well-sm"></richcc-datepicker>
<richcc-datepicker ng-model="sample.dt" light="true" events="sample.sampleEvents" event-popup-hide="false" prevent-cal-nav="true" show-weeks="false" class="well well-sm"></richcc-datepicker>
<richcc-datepicker datepicker-mode="'day'" ng-model="sample.dt" year-map-heat="false" events="sample.sampleEvents" show-weeks="false" class="well well-sm"></richcc-datepicker>
<richcc-datepicker datepicker-mode="'month'" ng-model="sample.dt" year-map-heat="false" events="sample.sampleEvents" show-weeks="false" class="well well-sm"></richcc-datepicker>
View events for all days in a month
View events for a day
View events for all days in a month with light mode enabled
View events for all months in a year
View events for all months in a year in a heat map mode (inspired by GitHub)
angular.module('myModule', ['richcc.bootstrap.datepicker']);
Since all modules have been built by refactoring the Angular JS UI BootStrap’s Datepicker module, the module names have been changed so as to mitigate/prevent any instance clash.
Inline documentation + README last updated 15/03/2016. Please refer sample app in the repo for updated capabilities.