Get started

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

Install

yarn

yarn add @h6s/calendar

npm

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 (
    <Table>
      <Thead>
        <Tr>
          {headers.weekdays.map(({ key, value }) => {
            return <Th key={key}>{format(value, 'E', { locale })}</Th>
          })}
        </Tr>
      </Thead>
      <Tbody>
        {body.value.map(({ key, value: days }) => (
          <Tr key={key}>
            {days.map(({ key, value }) => (
              <Td key={key}>{getDate(value)}</Td>
            ))}
          </Tr>
        ))}
      </Tbody>
    </Table>
  )
}

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