Calendar

A simple calendar component with liftable day cells making it easy to build custom interfaces.

Usage

With React.js

Get up and running quickly with React.

import React from 'react';
import { Calendar } from 'calendar-widgets';
import 'calendar-widgets/styles/Calendar-grid.css';

const App = () => {
  return <Calendar />
}

With Next.js

Get up and running quickly with Next.js. Most components are stateful, so you'll need to use dynamic imports to prevent server-side rendering errors.

import dynamic from 'next/dynamic';
import 'calendar-widgets/styles/Calendar-grid.css';

const DynamicCalendar = dynamic(() => import('calendar-widgets').then((mod) => mod.Calendar), {
  ssr: false
});


const App = () => {
  return <DynamicCalendar />
}

Props

date (optional)

The date to display in the calendar. If an object is passed, it should have year, month, and day properties.

Default value: new Date().

type date = Date | {year: number, month: number, day: number};

onChange (optional) ⚠️

Coming soon. This prop is not yet implemented, but will be in a future release. For now, you can define your own onChange handler by using the customDay prop.

showAdjacentDays (optional)

Whether to display days from the previous and next months that are adjacent to the displayed month.

Default value: true

type showAdjacentDays = boolean;

dayNames (optional)

An array of strings that represent the names of the days of the week. The first element represents Sunday, the second represents Monday, and so on.

Default value: ['S', 'M', 'T', 'W', 'T', 'F', 'S']

type dayNames = string[];

dayNameToolTips (optional)

An optional array of strings that represent the tooltips to display for each day name. If provided, it should have 7 elements in the same order as dayNames.

Default value: undefined

type dayNameToolTips = string[] | undefined;

style (optional)

An object containing the inline style of the top-level element of the calendar.

Default value: undefined

type style = React.CSSProperties | undefined;

className (optional)

The CSS class name to apply to the top-level element of the calendar.

Default value: undefined

type className = string | undefined;

customClassNames (optional)

An object containing CSS class names to override the default class names used by the component.

Default value: classNames

type className = {
  componentInterface?: string; 
  customHeader?: string; 
  component?: string; 
  dayName?: string; 
  customFooter?: string; 
  emptyCell?: string;
};

customHeader (optional)

A function that returns the custom header element for the calendar. It receives an object with the following properties: handleNextMonth, handlePrevMonth, nextMonth, prevMonth, selectedMonth, selectedYear and today.

Default value: undefined

type customHeader = (props: {
  handleNextMonth: () => void;
  handlePrevMonth: () => void;
  nextMonth: () => void;
  prevMonth: () => void;
  selectedMonth: number;
  selectedYear: number;
  today: Date;
}) => React.ReactElement;

customFooter (optional)

A function that returns the custom footer element for the calendar. It receives an object with the following properties: handleNextMonth, handlePrevMonth, nextMonth, prevMonth, selectedMonth, selectedYear, and today.

Default value: undefined

type customFooter = (props: {
  handleNextMonth: () => void;
  handlePrevMonth: () => void;
  nextMonth: () => void;
  prevMonth: () => void;
  selectedMonth: number;
  selectedYear: number;
  today: Date;
}) => React.ReactElement;

customDay (optional)

The component used to display each day in the calendar.

Default value: BaseDayComponent.

interface BaseDayComponentProps {
  date: Date;
  isCurrentDay: boolean;
  inSelectedMonth: boolean;
}

type customDay = BaseDayComponentProps | ((props: BaseDayComponentProps) => React.ReactElement)

customDayName (optional)

The component used to display each day name in the calendar.

Default value: BaseDayNameComponent

export interface BaseDayNameComponentProps {
  label: string;
  className?: string;
  tooltip?: string;
}

type customDayName = (props: BaseDayNameComponentProps) => React.ReactElement

customDates (optional)

An array of custom dates to be displayed on the calendar. Each object in the array should have a name, date, and optionally a className and tooltip property. The date property should be a Date object. If there is a match, the user-defined custom date will be accesible it's corresponding day component via the customDate prop.

Default value: undefined

export interface CustomDate {
  name: string;
  date: Date;
  className?: string;
  tooltip?: string;
  meta?: {
    [key: string]: unknown;
  }
}

export type CustomDates = CustomDate[];