JSPM

  • Created
  • Published
  • Downloads 19
  • Score
    100M100P100Q65165F
  • License MIT

Headless Calendar UI Library with react hooks

Package Exports

  • @veccu/react-calendar

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@veccu/react-calendar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Headless Calendar UI Library

GitHub Action Statussemantic-releaseCommitizen friendlynpm version

Installation

yarn add @veccu/react-calendar

peerDependencies

"peerDependencies": {
  "date-fns": ">= 2",
  "react": ">= 16.8",
  "react-dom": ">= 16.8"
}

Getting Started

import useCalendar from '@veccu/react-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.weeks.map(({ key, value: days }) => (
          <Tr key={key}>
            {days.map(({ key, value }) => (
              <Td key={key}>{getDate(value.date)}</Td>
            ))}
          </Tr>
        ))}
      </Tbody>
    </Table>
  )
}

RoadMap

  • Support view type (month, week, day)
  • Support navigation (to next, to prev, to Today)
  • Support a11y (Keyboard navigate)
  • Documentation
  • Add some examples about each case
  • Support i18n

Show your support

Give a ⭐️ if this project helped you!

Managed by @Jbee