Crafting the Future of Calendars & Scheduling

import { Calendar } from 'react-big-schedule';
import 'react-big-schedule/dist/css/style.css';

<Calendar
  events={events}
  initialView="dayGridMonth"
  views={['dayGridMonth', 'timeGridWeek', 'listWeek', 'multiMonthYear']}
  editable
  selectable
  onEventDrop={({ event }) => save(event)}
/>

import { Scheduler, SchedulerData, ViewType, wrapperFun } from 'react-big-schedule';

const DndScheduler = wrapperFun(Scheduler);
const data = new SchedulerData(new Date(), ViewType.Week);
data.setResources(resources);
data.setEvents(events);

<DndScheduler schedulerData={data} prevClick={prev} nextClick={next}
  onViewChange={change} onSelectDate={select} />

<Calendar
  events={async ({ start, end }, signal) => {
    const res = await fetch(`/api/events?start=${start.format()}&end=${end.format()}`, { signal });
    return res.json();
  }}
  eventSources={[{ url: '/holidays.json', color: '#6fa088' }]}
  onLoading={setLoading}
/>

const events = [
  { id: 1, title: 'Standup', rrule: 'DTSTART:20261012T090000\nRRULE:FREQ=WEEKLY;BYDAY=MO,WE,FR',
    exceptions: ['2026-10-14'] },
  { id: 2, title: 'Office hours', recurrence: { daysOfWeek: [2, 4], startTime: '14:00', endTime: '15:00' } },
];

<Calendar events={events} timeZone="Asia/Kolkata" nowIndicator businessHours />

<Calendar theme="dark" events={events} />

.my-app {
  --rbs-accent: #e8814f;
  --rbs-radius: 10px;
  --rbs-surface: #101010;
}