Skip to main content

Get started

  1. @h6s/calendar treat calendar as matrix (2x2)
  2. Quickly create calendar UI with table HTML elements!



yarn add @h6s/calendar


npm install --save @h6s/calendar

Get calendar data

useCalendar hooks are the most important functions and everything in Calendar. These hooks return almost everything you need to construct a calendar.

import { useCalendar } from '@h6s/calendar'

const { headers, body, view } = useCalendar()

Build UI with anything

You can use anything UI frameworks (like Chakra UI, MUI, etc ...)

import { useCalendar } from '@h6s/calendar'

export default function Calendar() {
const { headers, body, view } = useCalendar()

return (
{{ key, value }) => {
return <Th key={key}>{format(value, 'E', { locale })}</Th>
{{ key, value: days }) => (
<Tr key={key}>
{{ key, value }) => (
<Td key={key}>{getDate(value)}</Td>

This is all you need to do to draw a complex calendar.