Skip to Content
Welcome to DayFlow šŸŽ‰
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

Month View

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

Best for:

  • Viewing events across the entire month
  • Getting an overview of upcoming events
  • Drag and drop event management
  • Multi-day event visualization

Features:

  • Virtual scrolling for smooth performance
  • Responsive design (desktop, tablet, mobile)
  • Multi-day event spanning
  • Drag to create events
  • Drag to move events
  • Resize events
  • All-day events support
import {
  useCalendarApp,
  DayFlowCalendar,
  createMonthView,
  ViewType,
} from '@dayflow/core';
 
function MyCalendar() {
  const calendar = useCalendarApp({
    views: [createMonthView()],
    defaultView: ViewType.MONTH,
    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.

Best for:

  • Detailed time management
  • Scheduling meetings and appointments
  • Viewing events with precise timing
  • Time-based event editing

Features:

  • Hourly time slots (24-hour format)
  • Current time indicator
  • All-day events row
  • Multi-day events spanning across the week
  • Drag and drop for event creation and management
  • Resize events to adjust duration
  • Double-click to create events
  • Collision detection and smart event positioning
import {
  useCalendarApp,
  DayFlowCalendar,
  createWeekView,
  ViewType,
} from '@dayflow/core';
 
function MyCalendar() {
  const calendar = useCalendarApp({
    views: [createWeekView()],
    defaultView: ViewType.WEEK,
    initialDate: new Date(),
  });
 
  return <DayFlowCalendar calendar={calendar} />;
}

Day View

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

Best for:

  • Focus on daily tasks
  • Detailed daily planning
  • Avoiding distractions from other days
  • Mobile-friendly single-day view

Features:

  • 24-hour time grid
  • Current time indicator
  • Mini calendar sidebar for date navigation
  • Event list for the selected day
  • All-day events section
  • Drag and drop support
  • Resize events
  • Event detail panel

Layout:

  • Left side (70%): Time grid with events
  • Right side (30%): Mini calendar and event list
import {
  useCalendarApp,
  DayFlowCalendar,
  createDayView,
  ViewType,
} from '@dayflow/core';
 
function MyCalendar() {
  const calendar = useCalendarApp({
    views: [createDayView()],
    defaultView: ViewType.DAY,
    initialDate: new Date(),
  });
 
  return <DayFlowCalendar calendar={calendar} />;
}

Year View

The year view displays all 12 months of a year in a grid layout.

Best for:

  • Long-term planning
  • Viewing annual overview
  • Quick date selection
  • Holiday and milestone visualization

Features:

  • Virtual scrolling for multiple years
  • Responsive grid layout (desktop: 4Ɨ3, tablet: 3Ɨ4, mobile: 2Ɨ6)
  • Quick navigation (keyboard support)
  • Current day highlighting
  • Selected date highlighting
  • Keyboard shortcuts (Arrow keys, Home, PageUp/Down)
import {
  useCalendarApp,
  DayFlowCalendar,
  createYearView,
  ViewType,
} from '@dayflow/core';
 
function MyCalendar() {
  const calendar = useCalendarApp({
    views: [createYearView()],
    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/core';
 
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 flex flex-col">
      {/* View Switcher */}
      <div className="border-b p-4">
        <div className="flex gap-2">
          <button onClick={() => calendar.changeView(ViewType.DAY)}>Day</button>
          <button onClick={() => calendar.changeView(ViewType.WEEK)}>
            Week
          </button>
          <button onClick={() => calendar.changeView(ViewType.MONTH)}>
            Month
          </button>
          <button onClick={() => calendar.changeView(ViewType.YEAR)}>
            Year
          </button>
        </div>
      </div>
 
      {/* Calendar */}
      <div className="flex-1">
        <DayFlowCalendar calendar={calendar} />
      </div>
    </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
SidebarDayFlowCalendar