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

┌ DayFlow — Calendar component setup

◆ Which framework are you using?

│ ● React (@dayflow/react)

│ ○ Vue

│ ○ Svelte

│ ○ Angular

└◆ Select plugins to install (space to toggle, enter to confirm)

│ ◼ Drag & Drop (@dayflow/plugin-drag)

│ ◼ Keyboard Shortcuts

│ ◼ Localization

│ ◼ Sidebar

└◆ Which package manager do you use?

│ ● npm (detected) (npm install)

│ ○ pnpm

│ ○ yarn

│ ○ bun

└Installation plan

│ Framework: @dayflow/react

│ Plugins: @dayflow/plugin-drag, @dayflow/plugin-keyboard-shortcuts ...

│ Command: npm install @dayflow/core @dayflow/react @dayflow/plugin-drag ...

◆ Proceed with installation?

│ Yes

◇ Packages installed successfully

✓ DayFlow is ready!

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

/* DayFlow: scan compiled JS so Tailwind generates utility classes used inside DayFlow components */
@source '../node_modules/@dayflow/core/dist/**/*.js';
@source '../node_modules/@dayflow/plugin-drag/dist/**/*.js'; /* if using drag plugin */
@source '../node_modules/@dayflow/plugin-sidebar/dist/**/*.js'; /* if using sidebar plugin */

See Tailwind V4 integration for more details.

Tip: If you use the create-dayflow setup wizard and choose "Yes" for Tailwind CSS, these configurations will be added to your root CSS file 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()],
events: [
createEvent({
id: '1',
title: 'Team Meeting',
start: new Date(2025, 10, 15, 10, 0),
end: new Date(2025, 10, 15, 11, 0),

}),
createAllDayEvent('2', 'Conference', new Date(2025, 10, 20)),
],
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()],
  events: [
  createEvent({
  id: '1',
  title: 'Team Meeting',
  start: new Date(2025, 10, 15, 10, 0),
  end: new Date(2025, 10, 15, 11, 0),
}),
  createAllDayEvent('2', 'Conference', new Date(2025, 10, 20)),
  ],
  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()],
events: [
createEvent({
id: '1',
title: 'Team Meeting',
start: new Date(2025, 10, 15, 10, 0),
end: new Date(2025, 10, 15, 11, 0),
}),
createAllDayEvent('2', 'Conference', new Date(2025, 10, 20)),
],
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()],
  events: [
  createEvent({
  id: '1',
  title: 'Team Meeting',
  start: new Date(2025, 10, 15, 10, 0),
  end: new Date(2025, 10, 15, 11, 0),
}),
  createAllDayEvent('2', 'Conference', new Date(2025, 10, 20)),
  ],
  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.