Full-featured Event Calendar Component with Drag & Drop – DayFlow

Description:

DayFlow is a full-featured React calendar component that allows you to build complex scheduling and event management interfaces with drag-and-drop, multiple calendar views, and responsive design.

Features

• 🗓️ Multiple Views: Day, week, month, and year display options with independent configurations.
• 🎨 Customizable Styling: Tailwind CSS integration enables rapid theme adjustments and brand alignment.
• 📱 Responsive Design: Automatic adaptation to desktop, tablet, and mobile viewports.
• 🔌 Plugin Architecture: Extensible system for adding custom features without core modifications.
• 🎯 Drag & Drop Support: Move and resize events with real-time visual feedback.
• ⚡ TypeScript Support: Complete type definitions cover all APIs and callbacks.
• 🎨 Event Management: Create, update, delete, and categorize events programmatically.
• 🔄 Virtual Scrolling: High-performance rendering for large event datasets in month and year views.
• 🎭 Custom Renderers: Override default event appearance and behavior with React components.
• 📅 Multi-Day Events: Span events across multiple days with continuous visual indicators.
• 🌅 All-Day Events: Dedicated header section for full-day and multi-day entries.
• 📚 Event Stacking: Intelligent overlap detection with configurable stack levels prevents clutter.
• 📊 Sidebar Support: Built-in sidebar component for calendar management and filtering.

Use Cases

• 📅 Scheduling Applications: Build employee shift planners, appointment booking systems, or academic timetables with intuitive drag-and-drop rescheduling.
• 🎫 Event Management: Create conference schedules, festival lineups, or community event calendars that handle multi-day presentations and overlapping sessions.
• 🏢 Project Management: Visualize project timelines, track sprint milestones, and manage task deadlines in a shared team view with color-coded categories.
• 💼 Resource Booking: Manage meeting room availability, equipment reservations, or shared workspace allocation with real-time conflict detection.

How to Use It

1. dd the DayFlow core package and its peer dependency, lucide-react, to your project using your preferred package manager.

npm install @dayflow/core lucide-react

2. DayFlow relies on Tailwind CSS for styling. You need to install Tailwind and its dependencies.

npm install -D tailwindcss @tailwindcss/postcss autoprefixer

Create a postcss.config.mjs file in your project’s root directory with the following content.

const config = {
  plugins: ['@tailwindcss/postcss'],
};
export default config;

mport the Tailwind directives into your main CSS file.

/* src/index.css */
@import 'tailwindcss';

3. Import the DayFlow stylesheet into your application. Add the import to your main component, such as App.tsx.

import '@dayflow/core/dist/styles.css';

5. To render a calendar, use the useCalendarApp hook to configure its state and pass the result to the DayFlowCalendar component. The hook requires an array of views you want to support.

import {
  useCalendarApp,
  DayFlowCalendar,
  createWeekView,
  createMonthView,
  createEvent,
} from '@dayflow/core';
import '@dayflow/core/dist/styles.css';
function MyCalendar() {
  // Define some initial events for the calendar
  const initialEvents = [
    createEvent({
      id: 'evt-1',
      title: 'Design Sync',
      start: new Date(2025, 10, 12, 11, 0),
      end: new Date(2025, 10, 12, 12, 30),
    }),
    createEvent({
      id: 'evt-2',
      title: 'Frontend Standup',
      start: new Date(2025, 10, 14, 9, 0),
      end: new Date(2025, 10, 14, 9, 30),
    }),
  ];
  // Configure the calendar app state
  const calendar = useCalendarApp({
    views: [createWeekView(), createMonthView()],
    events: initialEvents,
    initialDate: new Date(),
    defaultView: 'week',
  });
  return (
    <div style={{ height: '90vh' }}>
      <DayFlowCalendar calendar={calendar} />
    </div>
  );
}
export default MyCalendar;

API Reference

DayFlowCalendar Props

useCalendarApp Options

Related Resources

• FullCalendar: Full-featured JavaScript calendar with React connector. Supports multiple view types and event handling.
• React Big Calendar: Open-source calendar component for React with customizable views and event management.

FAQs

Q: Can I use DayFlow without Tailwind CSS?
A: DayFlow is built with Tailwind CSS classes. You can override styles with custom CSS, but Tailwind CSS is the recommended and documented approach.

Q: How does the plugin system work?
A: Plugins receive the calendar instance during installation and can hook into lifecycle events, modify behavior, and add new functionality without changing core code.

Q: Is server-side rendering supported?
A: Yes, DayFlow works with Next.js and other SSR frameworks. Import styles in your root layout to prevent hydration mismatches.

Q: How do I persist events to a database?
A: Use the callbacks option in useCalendarApp to capture create, update, and delete operations, then sync them with your backend API.