Calendar Views

Day Flow supports four different view types, each optimized for different use cases and user needs. You can switch between views programmatically or provide a UI for users to switch views.

Available Views

Day View

The day view focuses on a single day with detailed time slots, perfect for managing daily schedules.

Configuration

Property	Type	Default	Description
`showAllDay`	`boolean`	`true`	Whether to show the all-day events row.
`scrollToCurrentTime`	`boolean`	`true`	Whether to scroll to the current time on initial load.
`timeFormat`	`'12h' \| '24h'`	`'24h'`	The time format for the time axis.
`secondaryTimeZone`	`string`	`undefined`	Secondary reference timeline shown in Day view only.

import {
  useCalendarApp,
  DayFlowCalendar,
  createDayView,
  ViewType,
} from '@dayflow/react'; // or '@dayflow/vue', '@dayflow/svelte', '@dayflow/angular'

function MyCalendar() {
  const calendar = useCalendarApp({
    views: [createDayView()],
    defaultView: ViewType.DAY,
    initialDate: new Date(),
  });

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

Week View

The week view displays a 7-day grid with time slots, showing events with their exact start and end times.

Configuration

Property	Type	Default	Description
`showWeekends`	`boolean`	`true`	Whether to show Saturday and Sunday.
`showAllDay`	`boolean`	`true`	Whether to show the all-day events row.
`startOfWeek`	`number`	`1`	The start day of the week (0 for Sunday, 1 for Monday, etc.).
`scrollToCurrentTime`	`boolean`	`true`	Whether to scroll to the current time on initial load.
`timeFormat`	`'12h' \| '24h'`	`'24h'`	The time format for the time axis.
`secondaryTimeZone`	`string`	`undefined`	Secondary reference timeline shown in Week view only.

import {
  useCalendarApp,
  DayFlowCalendar,
  createWeekView,
  ViewType,
} from '@dayflow/react'; // or '@dayflow/vue', '@dayflow/svelte', '@dayflow/angular'

function MyCalendar() {
  const calendar = useCalendarApp({
    views: [createWeekView()],
    defaultView: ViewType.WEEK,
    initialDate: new Date(),
  });

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

Month View

The month view displays a traditional calendar grid showing all days in a month.

Configuration

Property	Type	Default	Description
`showWeekNumbers`	`boolean`	`false`	Whether to show week numbers.
`showMonthIndicator`	`boolean`	`true`	Whether to show the month indicator title when scrolling.
`startOfWeek`	`number`	`1`	The start day of the week (0 for Sunday, 1 for Monday, etc.).
`snapToMonth`	`boolean`	`false`	When enabled, the view snaps to the start of the dominant month after the user stops scrolling.
`scroll`	`MonthScrollConfig`	—	Controls scroll locking and month-switch animation. See below.

MonthScrollConfig

Property	Type	Default	Description
`disabled`	`boolean`	`false`	Disables continuous scrolling. Months can only be changed via the Prev / Next navigation buttons.
`transition`	`'fade'` \| `undefined`	`undefined`	Animation when switching months (only applies when `disabled: true`). `'fade'` fades the current month out with a horizontal slide and fades the next month in. When omitted, the original smooth-scroll animation is preserved.

createMonthView({
  scroll: {
    disabled: true, // lock to one month at a time, Prev/Next only
    transition: 'fade', // optional fade animation (omit to keep smooth scroll)
  },
});

import {
  useCalendarApp,
  DayFlowCalendar,
  createMonthView,
  ViewType,
} from '@dayflow/react'; // or '@dayflow/vue', '@dayflow/svelte', '@dayflow/angular'

function MyCalendar() {
  const calendar = useCalendarApp({
    views: [createMonthView()],
    defaultView: ViewType.MONTH,
    initialDate: new Date(),
  });

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

The year view provides a comprehensive annual overview. DayFlow's Year View supports three modes: year-canvas (continuous grid), fixed-week (fixed 52-week columns), and grid (a 4x3 month grid perfect for heatmaps).

Configuration

Property	Type	Default	Description
`mode`	`'year-canvas' \| 'fixed-week' \| 'grid'`	`'year-canvas'`	The display mode for the year view.
`startOfWeek`	`number`	`1`	The start day of the week (0 for Sunday, 1 for Monday, etc.). Used in `fixed-week` and `grid` modes.
`showTimedEventsInYearView`	`boolean`	`false`	Whether to show timed events (dots/indicators/intensity) in the year view.
`gridDateClick`	`'popup' \| 'day-view' \| 'none' \| function`	`'popup'`	(Grid mode) Action when a date cell is clicked.
`gridDateDoubleClick`	`'day-view' \| 'none' \| function`	`'day-view'`	(Grid mode) Action when a date cell is double-clicked.
`gridPopupContent`	`function`	`undefined`	(Grid mode) Custom renderer for the day popup content.
`gridHeatmapLevels`	`number`	`5`	(Grid mode) Number of heatmap intensity levels to use.

Heatmap Customization (Grid Mode)

When using mode: 'grid', the calendar acts as a heatmap where the intensity (color) of each day is determined by the number of events. You can customize the colors by overriding the following CSS variables in your global CSS:

/* Light Mode Heatmap */
.df-year-grid-month {
  --heat-1: #ebf5ff;
  --heat-2: #cfe8ff;
  --heat-3: #91d5ff;
  --heat-4: #60a5fa;
  --heat-5: #3b82f6;
}

/* Dark Mode Heatmap */
.dark .df-year-grid-month {
  --heat-1: #1e3a5f;
  --heat-2: #2563eb;
  --heat-3: #1e40af;
  --heat-4: #3b82f6;
  --heat-5: #93c5fd;
}

If you change gridHeatmapLevels to a different number (e.g., 3), you should provide variables up to that number (e.g., --heat-1 to --heat-3).

import {
  useCalendarApp,
  DayFlowCalendar,
  createYearView,
  ViewType,
} from '@dayflow/react';

function MyCalendar() {
  const calendar = useCalendarApp({
    views: [
      createYearView({
        mode: 'grid',
        showTimedEventsInYearView: true,
        gridHeatmapLevels: 5,
      }),
    ],
    defaultView: ViewType.YEAR,
  });

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

Using Multiple Views

You can register multiple views and allow users to switch between them:

import {
  useCalendarApp,
  DayFlowCalendar,
  createDayView,
  createWeekView,
  createMonthView,
  createYearView,
  ViewType,
} from '@dayflow/react'; // or '@dayflow/vue', '@dayflow/svelte', '@dayflow/angular'

function MultiViewCalendar() {
  const calendar = useCalendarApp({
    views: [
      createDayView(),
      createWeekView(),
      createMonthView(),
      createYearView(),
    ],
    defaultView: ViewType.MONTH,
    initialDate: new Date(),
    callbacks: {
      onViewChange: view => {
        console.log('View changed to:', view);
      },
    },
  });

  return (
    <div className='h-screen'>
      <DayFlowCalendar calendar={calendar} />
    </div>
  );
}

Programmatic View Control

Changing Views

// Change to a specific view
calendar.changeView(ViewType.WEEK);

// Get current view
const currentView = calendar.app.getCurrentView();
console.log(currentView.type); // 'week'

All views support the same navigation methods:

// Go to today
calendar.goToToday();

// Go to previous period (day/week/month/year depending on current view)
calendar.goToPrevious();

// Go to next period
calendar.goToNext();

// Go to a specific date
calendar.selectDate(new Date(2024, 9, 15));

ViewType Enum

enum ViewType {
  DAY = 'day',
  WEEK = 'week',
  MONTH = 'month',
  YEAR = 'year',
}

Calendar Views

Available Views

Day View

Configuration

Week View

Configuration

Month View

Configuration

MonthScrollConfig

Year View

Configuration

Heatmap Customization (Grid Mode)

Using Multiple Views

Programmatic View Control

Changing Views

Navigation

ViewType Enum

On this page