Calendar Views
Day Flow supports five 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. |
hourHeight | number | 72 | Height in pixels of each hour row in the time grid. |
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. |
gridDateClick | 'day-view' | 'none' | function | undefined | Action when a date cell is clicked. |
gridDateDoubleClick | 'create-event' | 'day-view' | 'none' | function | 'create-event' | Action when a date cell is double-clicked. 'create-event' (default) creates a 1-hour timed event at the clicked position (hour). |
hourHeight | number | 72 | Height in pixels of each hour row in the time grid. |
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. |
gridDateClick | 'week-view' | 'day-view' | 'none' | function | undefined | Action when a date cell is clicked. |
gridDateDoubleClick | 'create-event' | 'week-view' | 'day-view' | 'none' | function | 'create-event' | Action when a date cell is double-clicked. 'create-event' (default) creates a timed event from 9:00 to 10:00 on the clicked date. |
eventHeight | number | 16 | Height in pixels of each event row in the month grid. |
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} />;
}Agenda View
The agenda view displays events as a chronological list grouped by day. It works especially well for mobile layouts, long-range planning, and feeds where users want to scan upcoming events quickly.
Configuration
| Property | Type | Default | Description |
|---|---|---|---|
daysToShow | number | 14 | Number of consecutive days to render in the agenda list. |
showEmptyDays | boolean | true | Whether to keep days with no events visible in the list. |
timeFormat | '12h' | '24h' | '24h' | Time format used for timed event rows. |
gridDateClick | 'day-view' | 'none' | function | undefined | Action when a day section is clicked. |
gridDateDoubleClick | 'day-view' | 'none' | function | 'day-view' | Action when a day section is double-clicked. |
import {
useCalendarApp,
DayFlowCalendar,
createAgendaView,
ViewType,
} from '@dayflow/react'; // or '@dayflow/vue', '@dayflow/svelte', '@dayflow/angular'
function MyCalendar() {
const calendar = useCalendarApp({
views: [
createAgendaView({
daysToShow: 14,
timeFormat: '12h',
gridDateDoubleClick: 'day-view',
}),
],
defaultView: ViewType.AGENDA,
initialDate: new Date(),
});
return <DayFlowCalendar calendar={calendar} />;
}Year View
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 | 'create-event' | 'day-view' | 'none' | function | 'create-event' | (Grid mode) Action when a date cell is double-clicked. 'create-event' (default) creates a timed event from 9:00 to 10:00. |
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,
createAgendaView,
createDayView,
createWeekView,
createMonthView,
createYearView,
ViewType,
} from '@dayflow/react'; // or '@dayflow/vue', '@dayflow/svelte', '@dayflow/angular'
function MultiViewCalendar() {
const calendar = useCalendarApp({
views: [
createAgendaView({ daysToShow: 10 }),
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'Navigation
All views support the same navigation methods:
// Go to today
calendar.goToToday();
// Go to previous period (day/week/month/agenda/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',
AGENDA = 'agenda',
YEAR = 'year',
}