Skip to content
Get Pro
Data, new

Calendar

A full scheduling calendar with Day, Week, Month and Agenda views.

$149 once · every Pro piece

Customize

Overlapping events share the day side by side, a live now-line runs across the hour grid, and periods slide in the direction of travel. Drag to move with a 15-minute snap, pull the bottom edge to resize, draw on empty time to create, and drag between days in Month; every move springs into place and is announced. Arrow keys walk slots and days, Enter opens or creates, T jumps to today and 1–4 switch views. The mini-month sidebar tucks behind a header toggle when the week needs the room, and below 640px it settles into Day and Agenda.

Install

npx shadcn@latest add @obsyde/calendar

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { Calendar } from '@/components/obsyde/ember/calendar/Calendar';

export function Example() {
  return (
    <Calendar />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/calendar/Calendar.tsxcomponent
  • ember/calendar/calendar-demo.cssstyles
  • ember/calendar/calendar.cssstyles
  • ember/calendar/time.tsmodule
  • ember/calendar/layout.tsmodule
  • ember/calendar/kit.tsxmodule
  • ember/calendar/Popovers.tsxmodule
  • ember/calendar/Side.tsxmodule
  • ember/calendar/MonthView.tsxmodule
  • ember/calendar/TimeGrid.tsxmodule
  • ember/calendar/CalendarDemo.tsxdemo
  • ember/shared/spring.tsshared
  • ember/shared/accent.tsshared
  • ember/shared/rolling-number.cssshared
  • ember/shared/RollingNumber.tsxshared
  • ember/shared/ember.cssshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
viewView'day' | 'week' | 'month' | 'agenda''week'
weekStartWeek starts'monday' | 'sunday''monday'
timeFormatClock'24' | '12''24'
miniMonthMini-month'auto' | 'on' | 'off''auto'
densityDensity'comfortable' | 'compact''comfortable'
scheduleSchedule'calm' | 'busy''calm'
readOnlyRead onlybooleanfalse