calendar-view-utils

Utilities for generating calendar views.

Usage no npm install needed!

<script type="module">
  import calendarViewUtils from 'https://cdn.skypack.dev/calendar-view-utils';
</script>

README

NPM Version CI codecov

Calendar View Utilities

Utilities for building calendar views.

Table of Contents

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

See the example folder for a working example.

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]

Development

npm install
npm run build