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().

Example

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

const App = () => {
  const defaultDate = new Date(2021, 0, 1);
  return (
    <Calendar date={defaultDate} />
  )
}

Types

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

showAdjacentDays (optional)

If set to true, days from the previous and next months that are adjacent to the displayed month will be displayed. If set to false, only days from the displayed month will be displayed.

Default value: true

Example

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

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

Types

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. If you need to localize the day names, you can do that here.

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

Example

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

const App = () => {
  const dayNames = ['Sun', 'Mon', 'Tues', 'Wed', 'Thu', 'Fri', 'Sat'];
  return (
    <Calendar dayNames={dayNames} />
  )
}

Types

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

Example

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

const App = () => {
  const dayNameToolTips = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  return (
    <Calendar dayNameToolTips={dayNameToolTips} />
  )
}

Types

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

Example

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

const CustomHeader = (props) => {
  const { handleNextMonth, handlePrevMonth, nextMonth, prevMonth, selectedMonth, selectedYear, today } = props;
  return (
    <div>
      <button onClick={handlePrevMonth}>Prev</button>
      <button onClick={handleNextMonth}>Next</button>
      <div>{selectedMonth} {selectedYear}</div>
      <div>{today.toDateString()}</div>
    </div>
  )
};

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

Types

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.

Generally speaking, you wouldn't use both the customFooter and customHeader props at the same time as they are intended to serve the same purpose. However, you can use both if you want to.

Default value: undefined

Example

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

const CustomFooter = (props) => {
  const { handleNextMonth, handlePrevMonth, nextMonth, prevMonth, selectedMonth, selectedYear, today } = props;
  return (
    <div>
      <button onClick={handlePrevMonth}>Prev</button>
      <button onClick={handleNextMonth}>Next</button>
      <div>{selectedMonth} {selectedYear}</div>
      <div>{today.toDateString()}</div>
    </div>
  )
};

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

Types

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.

Example

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

const CustomDay = (props) => {
  const { date, isCurrentDay, inSelectedMonth } = props;
  return (
    <div style={{opacity: inSelectedMonth ? '50%' : ''}}>
      <div>{date.getDate()}</div>
      {isCurrentDay && (
        <span>*</span>
      )}
    </div>
  )
};

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

Types

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

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

customDayName (optional)

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

Default value: BaseDayNameComponent

Example

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

const CustomDayName = (props) => {
  const { label, className, tooltip } = props;
  return (
    <div className={className} title={tooltip}>
      {label}
    </div>
  )
};

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

Types

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

Example

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

const customDates = [
  {
    name: 'Custom Date',
    date: new Date('2023-06-01'),
    className: 'custom-date',
    tooltip: 'This is a custom date',
    meta: {
      foo: 'bar'
    }
  }
];

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

Types

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

export type CustomDates = CustomDate[];