How do I install the Event Calendar component?

Install the free SDK with `bun add @otfdashkit/ui` (or npm/pnpm) and import { EventCalendar }. Copy-paste distribution is also supported.

Is the Event Calendar component free to use?

Yes. Event Calendar ships in @otfdashkit/ui, part of the free MIT-licensed OTF SDK on npm — use it in personal and commercial projects.

Which platform does this Event Calendar page cover?

This page documents the web version (@otfdashkit/ui); the OTF SDK keeps the same component API across its web and native packages where a counterpart exists.

How to create calendar?

Import EventCalendar from @otfdashkit/ui and pass events. The default view is month. With onEventCreate, a click on an empty month cell sends that whole day, and a click on an empty hour in week or day sends a one-hour range. Without that prop, a month-cell click switches to the day view.

How do I show a weekly calendar?

Set view to week, or use the Week tab. weekStartsOn defaults to 0 (Sunday) and accepts 0 through 6. onEventResize is passed through in week and day, not in the month view.

Is this an editable calendar?

Create and resize run only when you pass onEventCreate and onEventResize. The event list stays in your state. The component has no title editor and no recurring-event field.

Is this a calendar maker?

It is the Event Calendar component you render in an app. It does not print a calendar and it does not write a calendar file.

Monthly Calendar

Display

A monthly calendar with week and day views. Click to create when onEventCreate is set. Drag to resize in week or day when onEventResize is set.

View in Storybook

Event CalendarDisplay · Web

Loading Storybook preview…

Installation

bun add @otfdashkit/ui

Usage

Import Event Calendar from @otfdashkit/ui.

Code

// Event Calendar — A monthly calendar with week and day views. Click to create when onEventCreate is set. Drag to resize in week or day when onEventResize is set.
//
// Install:
//   bun add @otfdashkit/ui

import { EventCalendar } from '@otfdashkit/ui'

export function Example() {
  return (
    <EventCalendar>
      {/* your content */}
    </EventCalendar>
  )
}

Props

Props declared in the EventCalendar source. Inherited HTML attributes are not listed.

Prop	Type	Default	Description
eventsrequired	CalendarEvent[]
date	Date
defaultDate	Date
onDateChange	(date: Date) => void
onEventClick	(event: CalendarEvent) => void
onEventCreate	(range: { start: Date; end: Date; }) => void		Omit to disable click-to-create.
onEventResize	(eventId: string, newEnd: Date) => void		Omit to disable drag-to-resize.
onViewChange	(view: EventCalendarView) => void
view	'month' \| 'week' \| 'day'
weekStartsOn	0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6	0	0 = Sunday, 1 = Monday, etc. Default 0.

Questions

How to create calendar?: Import EventCalendar from @otfdashkit/ui and pass events. The default view is month. With onEventCreate, a click on an empty month cell sends that whole day, and a click on an empty hour in week or day sends a one-hour range. Without that prop, a month-cell click switches to the day view.
How do I show a weekly calendar?: Set view to week, or use the Week tab. weekStartsOn defaults to 0 (Sunday) and accepts 0 through 6. onEventResize is passed through in week and day, not in the month view.
Is this an editable calendar?: Create and resize run only when you pass onEventCreate and onEventResize. The event list stays in your state. The component has no title editor and no recurring-event field.
Is this a calendar maker?: It is the Event Calendar component you render in an app. It does not print a calendar and it does not write a calendar file.

Installation

Usage

Props

Related

Questions