大数据安全>> RichCC>> 返回
项目作者： asitparida

项目描述 ：
A rich calendar control for visualizing events implemented on top of AngularJS UI Bootstrap's Datepicker plugin.
高级语言： JavaScript
项目地址: git://github.com/asitparida/RichCC.git
创建时间： 2016-01-29T11:08:51Z
项目社区：https://github.com/asitparida/RichCC
开源协议：MIT License
下载


RichCC (v1.0)

A rich calendar control for visualizing events implemented on top of AngularJS UI Bootstrap’s Datepicker plugin.

Demo

Sample Preview @ http://richcc.azurewebsites.net/

Sample Code Blocks

Intializing Events

  1. [
  2.     { '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' },
  3.     { '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' },
  4.     { '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' },
  5.     { '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' },
  6.     { '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' }
  7. ];

Adding Tags

  1. <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>

Showing Light Mode - ‘light’

  1. <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>

Showing Light Mode With Event Pop Up Hidden - ‘eventPopupHide’

  1. <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>

For Events map on Month Mode

  1. <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>

Defaulting to Month View

  1. <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>

Capabilities

  1. View events for all days in a month

  2. View events for a day

  3. View events for all days in a month with light mode enabled

  4. View events for all months in a year

  5. View events for all months in a year in a heat map mode (inspired by GitHub)

Adding dependency to your project

  1. angular.module('myModule', ['richcc.bootstrap.datepicker']);

Note

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.