calendar

calendar

Minimal module to compute a calendar

---

Calendar module for AppDatepicker.

Table of contents

• Usage
• API Reference
  • Typings
    • WeekNumberType
    • CalendarOptions
    • Calendar
    • GetWeekdaysOptions
    • CalendarWeekday
  • calendar(options)
  • getWeekdays(options)
  • getFormatter(formatter)
• License

Usage

import { calendar } from 'nodemod/dist/calendar/index.js';
import { getWeekdays } from 'nodemod/dist/calendar/helpers/get-weekdays.js';
import { getFormatter } from 'nodemod/dist/calendar/helpers/get-formatter.js';

const weekdaysOptions = {
  longWeekdayFormat: getFormatter(Intl.DateTimeFormat('en-US', { weekday: 'long' })),
  narrowWeekdayFormat: getFormatter(Intl.DateTimeFormat('en-US', { weekday: 'narrow' })),

  // Optional properties and their default values:
  // firstDayOfWeek: 0,
  // showWeekNumber: false,
  // weekLabel: 'Wk',
};
const weekdays = getWeekdays(weekdaysOptions);

const calendarOptions = {
  dayFormat: getFormatter(Intl.DateTimeFormat('en-US', { day: 'numeric' })),
  fullDateFormat: getFormatter(Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'short', day: 'numeric' })),
  locale: 'en-US',
  selectedDate: new Date('2020-02-02'),

  // Optional properties and their default values:
  // disabledDates: [],
  // disabledDays: [],
  // firstDayOfWeek: 0,
  // max,
  // min,
  // showWeekNumber: false,
  // weekNumberType: 'first-4-day-week',
};
const calendarData = calendar(calendarOptions);

console.table([
  weekdays.map(n => n.value),
  ...calendarData.calendar.map(n => n.map(o => o.value)),
]);

API Reference

Typings

WeekNumberType

type WeekNumberType = 'first-4-day-week' | 'first-day-of-year' | 'first-full-week';

CalendarOptions

interface CalendarOptions {
  dayFormat: Intl.DateTimeFormat['format'];
  fullDateFormat: Intl.DateTimeFormat['format'];
  locale: string;
  selectedDate: Date;

  disableDates?: Date[]; // Default: []
  disabledDays?: number[]; // Default: []
  firstDayOfWeek?: number; // Default: 0
  max?: Date;
  min?: Date;
  showWeekNumber?: boolean; // Default: false
  weekLabel?: string; // Default: 'Week'
  weekNumberType?: WeekNumberType; // Default: 'first-4-day-week'
}

Calendar

interface CalendarDay {
  disabled: boolean;
  fullDate: Date | null;
  key: string;
  label: string | null;
  value: string | null;
}

interface Calendar {
  calendar: CalendarDay[][];
  disabledDatesSet: Set<number>;
  disabledDaysSet: Set<number>;
  key: string;
}

GetWeekdaysOptions

longWeekdayFormat: Intl.DateTimeFormat['format'];
narrowWeekdayFormat: Intl.DateTimeFormat['format'];

firstDayOfWeek?: number; // Default: 0
showWeekNumber?: boolean; // Default: false
weekLabel?: string; // Default: 'Wk'

CalendarWeekday

interface CalendarWeekday {
  label: string;
  value: string;
}

calendar(options)

• options <CalendarOptions> Calendar options.
  • dayFormat <Intl.DateTimeFormat.prototype.format> DateTime formatter for day. It is recommended to use getFormatter().
  • fullDateFormat <Intl.DateTimeFormat.prototype.format> DateTime formatter for fullDate. It is recommended to use getFormatter().
  • locale <string> ISO-693 language code. See ISO Language Code Table.
  • selectedDate <Date> Selected date. Calendar displays based on the current month of the selected date.
  • firstDayOfWeek <?number> Optional first day of a week. Defaults to 0 (Sunday).
  • showWeekNumber <?boolean> If true, show week number. Defaults to false.
  • weekLabel <?string> Optional label for week number. Defaults to Week.
  • disabledDates <?Array<Date>> Optional list of disabled dates. Each disabled dates on the calendar are not selectable nor focusable. Defaults to [].
  • disabledDays <?Array<number>> Optional list of disabled days. Each value represents the week day to be disabled, i.e. 1 means all dates which are Monday are disabled, not selectable nor focusable. Defaults to [].
  • max <?Date> Optional max date.
  • min <?Date> Optional min date.
  • weekNumberType <?WeekNumberType> Optional week number type. Defaults to first-4-day-week.
• returns: <Calendar> An object that contains the 2D array of the calendar, unique key of the calendar, a Set of disabled dates, and a Set of disabled days.

getWeekdays(options)

• options <GetWeekdaysOptions> Weekdays options.
  • longWeekdayFormat <Intl.DateTimeFormat.prototype.format> DateTime formatter for long weekday. It is recommended to use getFormatter().
  • narrowWeekdayFormat <Intl.DateTimeFormat.prototype.format> DateTime formatter for narrow weekday. It is recommended to use getFormatter().
  • firstDayOfWeek <?number> Optional first day of a week. Defaults to 0 (Sunday).
  • showWeekNumber <?boolean> If true, show week number. Defaults to false.
  • weekLabel <?string> Optional label for week number. Defaults to Wk.
• returns: <Array<CalendarWeekday>> A list of calendar weekday.

getFormatter(formatter)

• formatter <Intl.DateTimeFormat.prototype.format> DateTime formatter.
• returns: <Function> A wrapper to the DateTime formatter.

This helper function strips any LTR marking in a formatted date/ time string. IE11 includes LTR mark in all formatted output however all modern browsers do not do that anymore.

License

MIT License © Rong Sen Ng