Convenient date tools for building calendars.
8 people use it
Author: 1090535?v=3 Beckon
Submitted by: 7648995?v=3 douglas-at-beckon


Calendrical is intended to make building calendar interfaces easier, especially in Angular.

There are many existing calendar plugins, including Datepicker for jQuery UI, FullCalendar, and AngularUI Calendar. However, it's inconvenient that these calendar plugins tie together the date calculations that make the calendar possible and the visualization of the calendar. Calendrical is intended to provide the date calculations that will enable users to easily produce their own calendar visualizations.

Basic usage

The setUtcMode method can be used to select whether dates are returned relative to the local time zone or to UTC.

Only one other method is intended for use: getWeeksInMonth.

getWeeksInMonth(any Date in the month, [_options_])

Where options is an object which may have the following properties: weekStartsWith (0 Sunday, 6 Saturday, based on JavaScript's Date object)

Now weeks is an array of weeks, which each are an array of day objects.

The day objects contain a dayOfMonth number (1 to 31), a date (a JavaScript Date) for the day, and one of three boolean flags set to true: inCurrentMonth, trailingDay, or leadingDay.

This should make it easy to build a calendar interface by looping over the weeks, then looping over the days, and styling each day based on whether it is in the current month, previous month, or next month.

Usage within Angular

<div class="calendar-week" ng-repeat="week in weeks track by $index"> <div class="calendar-day" ng-click="select(day)" ng-repeat="day in week track by $index" ng-class="{hide: !day.inCurrentMonth, 'selection-end': isAtSelectionEnd(day), selected: isInSelectedRange(day)}"> {{day.dayOfMonth}} </div> </div>

comments powered by Disqus
This page was last updated over 3 years ago.