calendar-builder :calendar:

All the logic you need to quickly build a custom calendar or date-picker for any framework or plain vanilla JavaScript.

Features

• Generates data to populate a grid
• Split your events by date
• Supports fill or fitted weeks (filled weeks always shows 6 weeks)
• Supports before and after date
• Supports start of week
• Supports range selection
• Supports disabling certains days
• Supports disabling days of the week

| Feature | Example | | --------------------- | --------------------------------------------------------------------------------------- | | Plain | Today is marked with a dot | | First day of week | First day of week is now 'Sunday' (default) | | Selection: single | | | Selection: range | | | After | Only dates after the 12th of May 2021 are valid | | Before | Only dates before the 14th of May 2021 are valid | | Disable days of week | Tuesdays and Thursdays are disabled | | Disable specific days | The days: 11, 12, 13, and 18 are disabled |

Example usage

const options = {
  firstDay: 1 // Monday
}

let calendar = create(Date.now(), options)

const nextMonth = () => {
  calendar = create(calendar.next, options)
}

const prevMonth = () => {
  calendar = create(calendar.prev, options)
}

Output

Sample output from calling create()

Options

Note that the

• month in CalendarDate is 1-based and that,
• day is what is called 'date' in the Date APi.

type CalendarDate =
  | { year: number; month: number; day?: number }
  | string
  | number
  | Date;

interface CalendarEvent<T = any> {
  label: string,
  date: Date
  value?: T
}

type CalendarBuilderOptions = {
  /**
   * The first day of the week
   *
   * Default: 0
   */
  firstDay: number;
  /**
   * Add a fill week to the end even if not needed. This is useful to avoid
   * "flicker" when some months are 4-6 weeks only.
   *
   * Default: true
   */
  fillWeek: boolean;
  /**
   * Mark dates before this time invalid (excluding)
   *
   * E.g. after = 2021-05-29, then first valid date is 2021-05-30.
   */
  after: CalendarDate;
  /**
   * Mark dates after this time invalid (excluding)
   *
   * E.g. before = 2021-05-29, then last valid date is 2021-05-28.
   */
  before: CalendarDate;
  /**
   * Mark days in this range as selected. The selection state of the day may
   * vary if it is the first, last, middle, or only day in the selection.
   */
  selection: [CalendarDate, CalendarDate];
  /**
   * Optionally pas in date for when is 'now'.
   */
  now: CalendarDate;
  /**
   * Disable days of the week
   */
  disableDaysOfWeek: number[];
  /**
   * Disable specific days
   */
  disableDays: CalendarDate[];
  /**
   * Events to "bucket". Will distribute an array of events into the
     event-bucket on each of the calendar days.
   */
  events: CalendarEvent[];
};