Get started
@h6s/calendar
treat calendar as matrix (2x2)- 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>
)
}
Done
This is all you need to do to draw a complex calendar.