Configuration Options Reference

Comprehensive documentation of all configuration options available for the EventCalendar component.

EventCalendarConfigType

The EventCalendarConfigType interface defines all configuration options:

type EventCalendarConfigType = {
  defaultView?: CalendarViewType;
  use24HourFormatByDefault?: boolean;
  dayView?: {
    viewType?: "regular" | "resource";
    hideHoverLine?: boolean;
    hideTimeline?: boolean;
    enableDoubleClickToAddEvent?: boolean;
  };
  weekView?: {
    viewType?: "regular" | "resource";
    hideHoverLine?: boolean;
    hideTimeline?: boolean;
    enableDoubleClickToShiftViewToDaily?: boolean;
  };
  monthView?: {
    showOnlyCurrentMonth?: boolean;
    viewType?: "basic" | "detailed";
    enableDoubleClickToShiftViewToWeekly?: boolean;
  };
  yearView?: {
    enableDoubleClickToShiftViewToMonthly?: boolean;
  };
  localization?: EventCalendarTranslations;
};

Global Configuration Options

defaultView

Type: 'day' | 'week' | 'month' | 'year'
Default: 'month'
Description: The initial view to display when the calendar loads.

const config = {
  defaultView: 'week'
};

use24HourFormatByDefault

Type: boolean
Default: false
Description: Determines whether to use 24-hour time format (true) or 12-hour AM/PM format (false).

const config = {
  use24HourFormatByDefault: true  // Use 24-hour format (14:00 instead of 2:00 PM)
};

Day View Configuration

The dayView object configures options specific to the day view.

viewType

Type: 'regular' | 'resource'
Default: 'regular'
Description: The type of day view to display. 'resource' view is designed for resources like rooms or people.

hideHoverLine

Type: boolean
Default: false
Description: When true, hides the hover indicator line that follows cursor movement.

hideTimeline

Type: boolean
Default: false
Description: When true, hides the current time indicator line.

enableDoubleClickToAddEvent

Type: boolean
Default: true
Description: When true, allows users to double-click a time slot to add a new event.

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

Week View Configuration

The weekView object configures options specific to the week view.

viewType

Type: 'regular' | 'resource'
Default: 'regular'
Description: The type of week view to display. 'resource' view is designed for resources like rooms or people.

hideHoverLine

Type: boolean
Default: false
Description: When true, hides the hover indicator line that follows cursor movement.

hideTimeline

Type: boolean
Default: false
Description: When true, hides the current time indicator line.

enableDoubleClickToShiftViewToDaily

Type: boolean
Default: true
Description: When true, allows users to double-click a day to switch to day view.

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

Month View Configuration

The monthView object configures options specific to the month view.

showOnlyCurrentMonth

Type: boolean
Default: false
Description: When true, shows only days in the current month. When false, shows days from adjacent months to fill the grid.

viewType

Type: 'basic' | 'detailed'
Default: 'detailed'
Description: 'basic' shows minimal event information, while 'detailed' shows more comprehensive event details.

enableDoubleClickToShiftViewToWeekly

Type: boolean
Default: true
Description: When true, allows users to double-click a week to switch to week view.

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

Year View Configuration

The yearView object configures options specific to the year view.

enableDoubleClickToShiftViewToMonthly

Type: boolean
Default: true
Description: When true, allows users to double-click a month to switch to month view.

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

Localization Configuration

The localization property allows you to provide translated strings for the calendar interface.

const config = {
  localization: {
    // Date formatting
    months: ["January", "February", /* ... */],
    monthsShort: ["Jan", "Feb", /* ... */],
    weekdays: ["Sunday", "Monday", /* ... */],
    weekdaysShort: ["Sun", "Mon", /* ... */],
    
    // UI elements
    today: "Today",
    viewDay: "Day",
    viewWeek: "Week",
    viewMonth: "Month",
    viewYear: "Year",
    viewList: "List",
    
    // Event-related
    newEvent: "New Event",
    editEvent: "Edit Event",
    deleteEvent: "Delete Event",
    
    // ... other translation keys
  }
};

Default Configuration

If no configuration is provided, the following defaults are used:

const defaultConfig = {
  defaultView: 'month',
  use24HourFormatByDefault: false,
  dayView: {
    viewType: 'regular',
    hideHoverLine: false,
    hideTimeline: false,
    enableDoubleClickToAddEvent: true
  },
  weekView: {
    viewType: 'regular',
    hideHoverLine: false,
    hideTimeline: false,
    enableDoubleClickToShiftViewToDaily: true
  },
  monthView: {
    showOnlyCurrentMonth: false,
    viewType: 'detailed',
    enableDoubleClickToShiftViewToWeekly: true
  },
  yearView: {
    enableDoubleClickToShiftViewToMonthly: true
  },
  localization: englishTranslations  // Default English translations
};

Configuration Examples

Minimal Configuration

const minimalConfig = {
  defaultView: 'month',
  use24HourFormatByDefault: true
};

Resource View Configuration

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

Performance-Optimized Configuration

const performanceConfig = {
  monthView: {
    viewType: 'basic'  // Less detailed view for better performance with many events
  },
  weekView: {
    hideHoverLine: true,  // Disable hover effects for better performance
    hideTimeline: true   // Disable timeline for better performance
  }
};