ko-calendar

$3

An opinionated Knockout Calendar ViewModel in TypeScript


$3

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

$3

##### Browser:
Make ko-calendar.js available to the client
``html



`

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

`javascript
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.

`javascript
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);
`

$3

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
``javascript
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.
`javascript
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.
`javascript
var events = calendar.eventsByDay();
`

$3

Usage: calendar.eventsByWeek()
Returns Array<WeekEvent> object
`javascript
var events = calendar.eventsByWeek();
`

$3

Usage: calendar.eventsForMonth()
Returns Array<WeekEvent> object
`javascript
var events = calendar.eventsForMonth()
``

$3

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

$3

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


#### DateRange
`javascript
interface {
start: Date;
end: Date;
}
`

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

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

#### WeekEvent
`javascript
interface {
start: Date;
end: Date;
weekNumber: number;
days: Array;
}
``

$3

MIT