View Customization Guide

Learn how to customize and configure the different calendar views in FullEventCalendar.

Available Views

FullEventCalendar provides five main view types:

Day View: Detailed hourly view of a single day
Week View: Weekly view with hourly divisions
Month View: Traditional monthly calendar grid
Year View: Compact yearly overview
List View: Searchable list of events

View Configuration Options

Each view can be customized through the config prop passed to the EventCalendar component.

Day View Options

const config = {
  dayView: {
    viewType: 'regular', // or 'resource'
    hideHoverLine: false,
    hideTimeline: false,
    enableDoubleClickToAddEvent: true,
  }
};

viewType

'regular': Standard day view with hours displayed vertically
'resource': Resource-based view for showing multiple resources (e.g., rooms, people) in columns

hideHoverLine

When set to true, disables the hover indicator line that follows the cursor.

hideTimeline

When set to true, hides the current time indicator line.

enableDoubleClickToAddEvent

When set to true, allows users to double-click on a time slot to create a new event.

Week View Options

const config = {
  weekView: {
    viewType: 'regular', // or 'resource'
    hideHoverLine: false,
    hideTimeline: false,
    enableDoubleClickToShiftViewToDaily: true,
  }
};

viewType

'regular': Standard week view with days displayed as columns
'resource': Resource-based view for showing multiple resources in rows

hideHoverLine

When set to true, disables the hover indicator line that follows the cursor.

hideTimeline

When set to true, hides the current time indicator line.

enableDoubleClickToShiftViewToDaily

When set to true, allows users to double-click on a day to switch to the day view.

Month View Options

const config = {
  monthView: {
    showOnlyCurrentMonth: false,
    viewType: 'detailed', // or 'basic'
    enableDoubleClickToShiftViewToWeekly: true,
  }
};

showOnlyCurrentMonth

false: Shows days from previous and next months to fill the grid (traditional calendar view)
true: Shows only days from the current month

viewType

'detailed': Shows more comprehensive event information
'basic': Shows minimal event information (better for many events)

enableDoubleClickToShiftViewToWeekly

When set to true, allows users to double-click on a week to switch to the week view.

Year View Options

const config = {
  yearView: {
    enableDoubleClickToShiftViewToMonthly: true,
  }
};

enableDoubleClickToShiftViewToMonthly

When set to true, allows users to double-click on a month to switch to the month view.

List View Features

The list view is automatically available and shows events in a searchable list format. It includes:

Search functionality
Date grouping
Color coding
Detailed event information

Default View Selection

You can set the default view that loads when the calendar first renders:

const config = {
  defaultView: 'month', // 'day', 'week', 'month', 'year'
};

Time Format Configuration

Toggle between 12-hour and 24-hour time formats:

const config = {
  use24HourFormatByDefault: true, // false for 12-hour format with AM/PM
};

View-Specific Rendering

Each view has its own specialized rendering logic:

Day View Rendering

The day view renders:

A vertical time grid with hourly divisions
Events positioned based on their start and end times
Current time indicator (unless disabled)
All-day events in a separate section

Week View Rendering

The week view renders:

Days of the week as columns
A vertical time grid with hourly divisions
Events positioned based on their start and end times
Current time indicator (unless disabled)
All-day events in a separate section

Month View Rendering

The month view renders:

A grid of days
Events as compact items within each day
Multi-day events spanning across days
"More" indicator for days with many events

Year View Rendering

The year view renders:

All months of the year in a grid
Days with events highlighted
Minimal event information due to space constraints

List View Rendering

The list view renders:

Events in chronological order
Date headers to separate different days
Full event details for each event
Search input for filtering events

Custom View Examples

Resource View Example

The resource view is ideal for scenarios like room bookings or staff scheduling:

const config = {
  defaultView: 'day',
  dayView: {
    viewType: 'resource'
  },
  weekView: {
    viewType: 'resource'
  }
};

In a resource-based view, you would typically:

Define resources in your backend (e.g., meeting rooms, staff members)
Assign resources to events in your event data
Display events organized by resource instead of just by time

Agenda View Configuration

For a simplified agenda-style calendar:

const config = {
  defaultView: 'month',
  monthView: {
    viewType: 'basic',
    showOnlyCurrentMonth: true
  }
};

Timeline View (Week)

For a detailed timeline view of your week:

const config = {
  defaultView: 'week',
  weekView: {
    hideHoverLine: false,
    hideTimeline: false
  }
};

Handling View Changes

The calendar automatically manages view navigation, but you can also programmatically control it through the useCalendarNavigation hook.

Example of programmatic view control:

import { useCalendarNavigation } from '@/components/event-calendar/hooks/useCalendarNavigation';
import { englishTranslations } from '@/components/event-calendar/locales/en';

const CalendarControls = () => {
  const navigation = useCalendarNavigation({
    config: {
      defaultView: 'month',
      use24HourFormatByDefault: false
    },
    translations: englishTranslations
  });

  const goToSpecificDate = (date: Date) => {
    navigation.setCurrentDate(date);
  };

  const switchToMonthView = () => {
    navigation.setCurrentView('month');
  };

  return (
    <div>
      <button onClick={() => goToSpecificDate(new Date(2024, 0, 1))}>
        Go to Jan 1, 2024
      </button>
      <button onClick={switchToMonthView}>
        Switch to Month View
      </button>
    </div>
  );
};

Performance Considerations

Different views have different performance characteristics:

Day and Week Views: Most efficient for displaying detailed event information
Month View: 'basic' is more performant than 'detailed' when displaying many events
Year View: Most performant for overview, less detail
List View: Very efficient, especially with search filtering

For optimal performance with many events, consider:

Using 'basic' view type for month view
Disabling hover effects with hideHoverLine: true
Loading events on-demand with onDateRangeChange

Mobile Optimization

All views are responsive, but for the best mobile experience:

Day and list views work best on small screens
Week and month views automatically adjust their layout for mobile
Year view compresses to fit smaller screens

Conclusion

FullEventCalendar's view system provides the flexibility to create a calendar experience perfectly tailored to your application's needs. By configuring the various view options, you can optimize for information density, user interaction, performance, and visual appeal.