Skip to Content
Welcome to DayFlow 🎉
IntroductionGetting started

Getting Started

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

Installation

Install DayFlow

Before all start, you may need install yarn  or pnpm  or bun .

npm install @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.

Last updated on
Events