Open-Source React Event Calendar

DayFlow is an MIT-licensed calendar component for React. Switch between day, week, and month views, drag events to move them, and resize events to adjust their duration.

Try the interactive DayFlow demo

The shared demo lets you try the calendar interactions. Use the Reactexample below to integrate them into your app.

Plan the day or scan the whole month

Use the day view to schedule appointments, the week view to coordinate a team, or the month view to spot busy stretches. The same events stay in view as users switch between layouts.

Create and adjust events on the calendar

Drag across the time grid to create an event. Move it to reschedule or resize it to change its duration. Connect the calendar to yourReact app’s event data so edits can follow your scheduling rules.

Add DayFlow to a React app

Install the React component, calendar core, and drag plugin.

npm install @dayflow/react @dayflow/core @dayflow/plugin-drag

Add this component to your app. It opens with a sample event for today that you can move or resize in the time grid.

'use client';

import { DayFlowCalendar, useCalendarApp } from '@dayflow/react';
import {
  createDayView, createWeekView, createMonthView,
  createEvent, createEventsPlugin,
} from '@dayflow/core';
import { createDragPlugin } from '@dayflow/plugin-drag';
import '@dayflow/core/dist/styles.css';

export default function TeamCalendar() {
  const calendar = useCalendarApp({
  views: [createDayView(), createWeekView(), createMonthView()],
  plugins: [createDragPlugin(), createEventsPlugin()],
  events: [
    createEvent({
      id: 'team-meeting',
      title: 'Team meeting',
      start: new Date(new Date().setHours(10, 0, 0, 0)),
      end: new Date(new Date().setHours(11, 0, 0, 0)),
    }),
  ],
});
  return <DayFlowCalendar calendar={calendar} />;
}

Read the DayFlow installation guide