Getting Started

Welcome to Day Flow! This guide will help you get up and running quickly.

Installation

Install DayFlow

Install the package using your preferred package manager:


npm install @dayflow/core lucide-react
# or
yarn add @dayflow/core lucide-react
# or
pnpm add @dayflow/core lucide-react

Configure Tailwind CSS

DayFlow uses Tailwind CSS for styling. You need to set up Tailwind CSS in your project:

1. Install Tailwind CSS dependencies:


npm install -D tailwindcss @tailwindcss/postcss autoprefixer

2. Create postcss.config.mjs in your project root:


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

3. Import Tailwind in your CSS file:


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

Import DayFlow Styles

Important: You must import the DayFlow styles in your application. Add this import to your main App component or layout file:


// In App.tsx or layout.tsx
import '@dayflow/core/dist/styles.css';

Alternatively, you can import it in your CSS file:


/* src/index.css */
@import '@dayflow/core/dist/styles.css';

Basic Usage

Import and use the Calendar component in your React application:


import {
  useCalendarApp,
  DayFlowCalendar,
  createDayView,
  createWeekView,
  createMonthView,
} from '@dayflow/core';
import '@dayflow/core/dist/styles.css';
 
function App() {
  const dragPlugin = createDragPlugin();
  const events = [
    createEvent({
      id: '1',
      title: 'Team Meeting',
      start: new Date(2025, 10, 15, 10, 0),
      end: new Date(2025, 10, 15, 11, 0),
    }),
    createEvent({
      id: '2',
      title: 'Project Review',
      start: new Date(2025, 10, 16, 14, 0),
      end: new Date(2025, 10, 16, 16, 0),
    }),
    createAllDayEvent('3', 'Conference', new Date(2025, 10, 20)),
    createEvent({
      id: '4',
      title: 'Client Call',
      start: new Date(2025, 10, 18, 9, 0),
      end: new Date(2025, 10, 18, 10, 30),
    }),
  ];
 
  const calendar = useCalendarApp({
    views: [createDayView(), createWeekView(), createMonthView()],
    plugins: [dragPlugin],
    events,
    initialDate: new Date(),
  });
 
  return (
    <div>
      <h1>My Calendar</h1>
      <DayFlowCalendar calendar={calendar} />
    </div>
  );
}

With Events

You can easily create and pass events to the calendar:


import {
  useCalendarApp,
  DayFlowCalendar,
  createMonthView,
  createEvent,
  createAllDayEvent,
} from '@dayflow/core';
import '@dayflow/core/dist/styles.css';
 
const events = [
  // Simple timed event
  createEvent({
    id: '1',
    title: 'Team Meeting',
    start: new Date(2024, 9, 10, 10, 0),
    end: new Date(2024, 9, 10, 11, 0),
  }),
  // All-day event
  createAllDayEvent('2', 'Project Deadline', new Date(2024, 9, 15)),
];
 
function App() {
  const calendar = useCalendarApp({
    views: [createMonthView()],
    initialDate: new Date(),
    events,
  });
 
  return <DayFlowCalendar calendar={calendar} />;
}

Note: The library uses the modern Temporal API for date/time handling. The helper functions (createEvent, createAllDayEvent) make it easy to create events without dealing with Temporal directly.

Next Steps

Learn about Configuration
Explore API Reference
Check out Examples