Getting Started

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

Installation

CLI (Recommended)

Run the interactive setup wizard — it detects your package manager, lets you pick a framework and plugins, then installs everything in one step.

npm create dayflow@latest

pnpm create dayflow@latest

yarn create dayflow

bun create dayflow@latest

Terminal

Manual Installation

Prefer installing packages yourself? Select your framework and package manager:

npm install @dayflow/react @dayflow/core

pnpm add @dayflow/react @dayflow/core

yarn add @dayflow/react @dayflow/core

bun add @dayflow/react @dayflow/core

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';

Using Tailwind CSS?

Import styles.components.css instead to avoid CSS reset conflicts with your existing styles:

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

See Tailwind V4 integration for more details.

Tip: If you use the create-dayflow setup wizard and choose "Yes" for Tailwind CSS, it will add this import for you automatically.

Basic Usage

Select your framework to see how to integrate DayFlow into your application.

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

function App() {
  const calendar = useCalendarApp({
    views: [createDayView(), createWeekView(), createMonthView()],
    plugins: [createDragPlugin(), createEventsPlugin()],
    calendars: [
      {
        id: 'work',
        name: 'Work',
        colors: {
          lineColor: '#2563eb',
          eventColor: '#dbeafe',
          eventSelectedColor: '#bfdbfe',
          textColor: '#1e3a8a',
        },
      },
    ],
    events: [
      createEvent({
        id: '1',
        title: 'Team Meeting',
        start: new Date(2025, 10, 15, 10, 0),
        end: new Date(2025, 10, 15, 11, 0),
        calendarId: 'work',
      }),
      createAllDayEvent({
        id: '2',
        title: 'Conference',
        start: new Date(2025, 10, 20),
        calendarId: 'work',
      }),
    ],
    initialDate: new Date(),
  });

  return <DayFlowCalendar calendar={calendar} />;
}

<template>
  <DayFlowCalendar :calendar="calendar" />
</template>

<script setup>
  import { DayFlowCalendar, useCalendarApp } from '@dayflow/vue';
  import {
    createDayView,
    createWeekView,
    createMonthView,
    createEventsPlugin,
    createEvent,
    createAllDayEvent
  } from '@dayflow/core';
  import { createDragPlugin } from '@dayflow/plugin-drag';
  import '@dayflow/core/dist/styles.css';

  const calendar = useCalendarApp({
    views: [createDayView(), createWeekView(), createMonthView()],
    plugins: [createDragPlugin(), createEventsPlugin()],
    calendars: [
      {
        id: 'work',
        name: 'Work',
        colors: {
          lineColor: '#2563eb',
          eventColor: '#dbeafe',
          eventSelectedColor: '#bfdbfe',
          textColor: '#1e3a8a',
        },
      },
    ],
    events: [
      createEvent({
        id: '1',
        title: 'Team Meeting',
        start: new Date(2025, 10, 15, 10, 0),
        end: new Date(2025, 10, 15, 11, 0),
        calendarId: 'work',
      }),
      createAllDayEvent({
        id: '2',
        title: 'Conference',
        start: new Date(2025, 10, 20),
        calendarId: 'work',
      }),
    ],
    initialDate: new Date(),
  });
</script>

import { Component } from '@angular/core';
import {
  createDayView,
  createWeekView,
  createMonthView,
  createEventsPlugin,
  createEvent,
  createAllDayEvent
} from '@dayflow/core';
import { createDragPlugin } from '@dayflow/plugin-drag';
import { DayFlowCalendarModule } from '@dayflow/angular';
import '@dayflow/core/dist/styles.css';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DayFlowCalendarModule],
  template: `
    <dayflow-calendar [calendar]="calendar"></dayflow-calendar>
  `
})
export class AppComponent {
  calendar = {
    views: [createDayView(), createWeekView(), createMonthView()],
    plugins: [createDragPlugin(), createEventsPlugin()],
    calendars: [
      {
        id: 'work',
        name: 'Work',
        colors: {
          lineColor: '#2563eb',
          eventColor: '#dbeafe',
          eventSelectedColor: '#bfdbfe',
          textColor: '#1e3a8a',
        },
      },
    ],
    events: [
      createEvent({
        id: '1',
        title: 'Team Meeting',
        start: new Date(2025, 10, 15, 10, 0),
        end: new Date(2025, 10, 15, 11, 0),
        calendarId: 'work',
      }),
      createAllDayEvent({
        id: '2',
        title: 'Conference',
        start: new Date(2025, 10, 20),
        calendarId: 'work',
      }),
    ],
    initialDate: new Date(),
  };
}

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

  const calendar = useCalendarApp({
    views: [createDayView(), createWeekView(), createMonthView()],
    plugins: [createDragPlugin(), createEventsPlugin()],
    calendars: [
      {
        id: 'work',
        name: 'Work',
        colors: {
          lineColor: '#2563eb',
          eventColor: '#dbeafe',
          eventSelectedColor: '#bfdbfe',
          textColor: '#1e3a8a',
        },
      },
    ],
    events: [
      createEvent({
        id: '1',
        title: 'Team Meeting',
        start: new Date(2025, 10, 15, 10, 0),
        end: new Date(2025, 10, 15, 11, 0),
        calendarId: 'work',
      }),
      createAllDayEvent({
        id: '2',
        title: 'Conference',
        start: new Date(2025, 10, 20),
        calendarId: 'work',
      }),
    ],
    initialDate: new Date(),
  });
</script>

<DayFlowCalendar {calendar} />

Customizing Styles

By default, the calendar takes up the full width of its container. You can customize the height and other styles using CSS. For example, to set a responsive height:

.df-calendar-container {
  --df-calendar-height: 760px !important;
  height: var(--df-calendar-height, 760px) !important;
}

@media (max-width: 768px) {
  .df-calendar-container {
    --df-calendar-height: 550px !important;
  }
}

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