Calendar-view-utils NPM

Calendar View Utilities

Utilities for building calendar views.

⚡Live demo

Features

📅 Tools to create your own UI or component.
🛠 Works with native Date objects, no library required.
🎉 Written in TypeScript.

Installation

npm install calendar-view-utils --save

Usage

import { CalendarMonth } from 'calendar-view-utils';

const date = new Date(2021, 0, 1);

const view = new CalendarMonth(date);
console.log(view);

`CalendarMonth`

Create a CalendarMonth for the target date. A CalendarMonth contains all the needed information for building a standard month view.

new CalendarMonth(date);

Property	Description	Type
`year`	Year value	`number`
`month`	Month value	`number`
`weeks`	Collection of weeks with the month	`CalendarWeek[]`

`CalendarWeek`

Create a CalendarWeek for the target date. A CalendarWeek contains all the needed information for building a standard week view.

new CalendarWeek(date);

Property	Description	Type
`isoWeek`	ISO week value	`number`
`days`	Collection of days within the week	`CalendarDay[]`

`CalendarDay`

Create a CalendarDay for the target date.

new CalendarDay(date);

Property	Description	Type
`isoString`	ISO string value (date)	`string`
`day`	Day of month value	`number`
`month`	Month value	`number`
`year`	Year value	`number`
`isToday`	Indicates if the day is today.	`boolean`
`isPast`	Indicates if the day is before today	`boolean`
`isFuture`	Indicates if the day is after today	`boolean`

Options

import { DayOfWeek } from 'calendar-view-utils';

const options = {
  weekStartsOn: DayOfWeek.Monday,
};

const view = new CalendarWeek(date, options);

Property	Description	Type	Default
`weekStartsOn`	Which day the week starts on	`DayOfWeek`	`Sunday`

Utilities

import { DayOfWeek, getWeekDays } from 'calendar-view-utils';

const example1 = getWeekDays();
// => [Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday]

const example2 = getWeekDays(DayOfWeek.Monday);
// => [Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday]