ko-calendar

ko-calendar

An opinionated Knockout Calendar ViewModel in TypeScript

Requirements

Knockout (ko object) should be globally available or accessible via require('knockout')

Installation

Browser:

Make ko-calendar.js available to the client

<script src='https://rawgit.com/seikho/ko-calendar/master/ko-calendar.js'></script>
<script>
    var calendar = new Calender();
</script> 
    

TypeScript:

Type definitions are available in src/typings/ko-calendar/ko-calendar.d.ts.
TypeScript ^1.6.0 will resolve the type definitions automatically if the package is a node_module.

npm install ko-calendar --save

Usage

Examples
Without RequireJS/Cajon
With RequireJS/Cajon

Basic usage:
If your objects are DateRange object, Date, string that are valid date string, or number that are valid date values:
then the default parser will correctly parse these objects.

var Calendar = require('ko-calendar').Calendar;
var calendar = new Calendar();

Better usage:
If you have more complex objects that might resemble something like { date: ..., id: ..., eventName: ... } You will need to provide a function to ko-calendar to tell it how to extract the Date or DateRange from your custom objects.

var Calendar = require('ko-calendar').Calendar;
//or
import { Calendar } from 'ko-calendar';
 
// Return a single date
var calParser = function(myObject) {
    return myObject.date;
}
 
//Return a date range
var calParser = function(myObject) {
    return {
        start: new Date(myObject.startDate),
        end: new Date(myObject.endDate)
    }
}
var calendar = new KoCal.Calendar(calParser);

API

All examples assume an instantiated Calendar object called calendar is available

startDay(dayOfWeek: number)

The day of week to use when performing week calculations.
This is based on JavaScript's dayOfWeek. This is zero-based where 0 is Sunday and 6 is Saturday.

addEvent

Also: addEvents
Usage: calendar.addEvent(object: any) or calendar.addEvents(object: any[])
Returns `void
Add an event to the collection. These objects must be parseable by the parser function

calendar.addEvent({ date: new Date() });
calendar.addEvents([{ date: new Date() }, { date: new Date(2015, 1, 1) }]);

eventsForDate

Usage: calendar.eventsForDate(date: Date)
Returns DayEvent object
Returns an ordered array of events that fall on the same day as the date provided.

var events = calender.eventsForDate(new Date(2015, 8, 18)); // Sep 18 2015

eventsByDay

Usage: calendar.eventsByDay() Returns Array<DayEvent> object
Returns an ordered array of DayEvent objects derived from the events collection.
The first DayEvent will always be start of week of the first Date in the events collection.
The last DayEvent will always be end of the week of the last Date in the events collection.

var events = calendar.eventsByDay();

eventsByWeek

Usage: calendar.eventsByWeek()
Returns Array<WeekEvent> object

var events = calendar.eventsByWeek();

eventsForMonth

Usage: calendar.eventsForMonth() Returns Array<WeekEvent> object

var events = calendar.eventsForMonth()`

previousMonth

Update the month that eventsForMonth will return Usage: calendar.previousMonth() Returns void

nextMonth

Update the month that eventsForMonth will return Usage: calendar.nextMonth() Returns void

DateRange

interface {
    start: Date;
    end: Date;
}

Event

interface Event {
    date: Date;
    value: any; // User object
}

DayEvent

interface DayEvent {
    date: Date;
    events: Event[]
}

WeekEvent

interface {
    start: Date;
    end: Date;
    weekNumber: number;
    days: Array<DayEvent>;
}

License

MIT