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.

Using Next.js Pages Router or Node.js require()?

@dayflow/core is ESM-only and does not ship a CommonJS build. This means:

require('@dayflow/core') will throw an error. Use import instead.
Next.js Pages Router does not transpile node_modules ESM by default. Add the package to transpilePackages in your next.config.js:

// next.config.js
module.exports = {
  transpilePackages: ['@dayflow/core'],
};

Next.js App Router (with "use client" / Server Components) works out of the box — no extra config needed.
SSR frameworks (Nuxt, SvelteKit, etc.) generally handle ESM natively. If you encounter import errors, check that your bundler's ssr.noExternal or equivalent option includes @dayflow/core.

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.