angular-clndr

Getting Started

1. Install with bower: bower install --save angular-clndr
2. Include angular-clndr.js.
3. Make sure to include all CLNDR.js dependencies.
4. Add tien.clndr to you app modules.
5. Use the tien-clndr directive.

Demo

Usage

Use the tien-clndr directive as element, all childs of this element have CLNDR.js data available on the object provided with the tien-clndr-object attributes. With this object on the child's scope, you can for example ng-repeat over the days and render the template Angular-style.

Optionally pass an array of events to the directive with the tien-clndr-events attribute. Events are available on the scope at day.events, as shown in the example below:

To pass additional options on initialization of CLNDR, provide an options object to the tien-clndr-options attribute. See CLNDR Usage for all possible settings. Heads up: the tien-clndr-options object is only read once during transclusion!

<tien-clndr class="clndr" tien-clndr-object="clndr" tien-clndr-events="events">
  <div class="clndr-controls">
    <div class="clndr-previous-button" ng-click="clndr.back()">
      &lsaquo;
    </div>
    <div class="month">
      {{month}}
    </div>
    <div class="clndr-next-button" ng-click="clndr.forward()">
      &rsaquo;
    </div>
  </div>
  <div class="clndr-grid">
    <div class="days-of-the-week">
      <div class="header-day" ng-repeat="day in daysOfTheWeek track by $index">
        {{day}}
      </div>
    </div>
    <div class="days">
      <div class="{{day.classes}}" ng-repeat="day in days">
        <div class="event-indicator" ng-show="day.events.length" ng-click="showEvents(day.events)">{{day.events.length}}</div>
        {{day.day}}
      </div>
    </div>
  </div>
</tien-clndr>

angular-clndr 0.3.0 · Created by 10KB
Based on CLNDR.js.

GitHub Project