Skip to Content
IntroductionViews

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

PropertyTypeDefaultDescription
showAllDaybooleantrueWhether to show the all-day events row.
scrollToCurrentTimebooleantrueWhether to scroll to the current time on initial load.
timeFormat'12h' | '24h''24h'The time format for the time axis.
secondaryTimeZonestringundefinedSecondary time zone to display.
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

PropertyTypeDefaultDescription
showWeekendsbooleantrueWhether to show Saturday and Sunday.
showAllDaybooleantrueWhether to show the all-day events row.
startOfWeeknumber1The start day of the week (0 for Sunday, 1 for Monday, etc.).
scrollToCurrentTimebooleantrueWhether to scroll to the current time on initial load.
timeFormat'12h' | '24h''24h'The time format for the time axis.
secondaryTimeZonestringundefinedSecondary time zone to display.
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

PropertyTypeDefaultDescription
showWeekNumbersbooleanfalseWhether to show week numbers.
showMonthIndicatorbooleantrueWhether to show the month indicator title when scrolling.
startOfWeeknumber1The start day of the week (0 for Sunday, 1 for Monday, etc.).
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} />;
}

Year View

The year view provides a comprehensive annual overview using a continuous grid layout. Unlike traditional year views that just show 12 small calendars, DayFlow’s Year View renders a unified grid where you can visualize multi-day events spanning across days, weeks, and even months.

Configuration

PropertyTypeDefaultDescription
mode'year-canvas' | 'fixed-week''year-canvas'The display mode for the year view.
startOfWeeknumber1The start day of the week (0 for Sunday, 1 for Monday, etc.). Only used in fixed-week mode.
showTimedEventsInYearViewbooleanfalseWhether to show timed events (dots/indicators) in the year view.
import {
  useCalendarApp,
  DayFlowCalendar,
  createYearView,
  ViewType,
} from '@dayflow/react'; // or '@dayflow/vue', '@dayflow/svelte', '@dayflow/angular'
 
function MyCalendar() {
  const calendar = useCalendarApp({
    views: [
      createYearView({
        showTimedEventsInYearView: true,
      }),
    ],
    defaultView: ViewType.YEAR,
    initialDate: new Date(),
  });
 
  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',
}
Last updated on
EventsDayFlowCalendar