Configuration

Views

The Event Calendar supports four view modes. On mobile screens (< 768px), the week view automatically switches to day view.

// Set initial view
calendar.viewMode = 'week';

// Switch views programmatically
calendar.viewMode = 'month';

// Navigate
calendar.today();
calendar.next();
calendar.previous();
calendar.goToDate(new Date('2027-03-15'));

// Listen for view changes
calendar.events.viewModeChanged$.subscribe(mode => {
  console.log('Switched to', mode);
});

First Day of Week

Configure which day starts the week in month and week views.

// Sunday = 0, Monday = 1, ..., Saturday = 6
calendar.settings.firstDayOfWeek = 1; // Monday

Working Hours

Define the working hours range displayed in week and day views. Non-working hours are visually distinguished.

calendar.settings.workingHours = { start: 8, end: 18 }; // 8 AM – 6 PM

Slot Duration

Configure the time slot granularity in week and day views. Each slot corresponds to one row in the time grid.

calendar.settings.slotDuration = 15; // 15-minute slots

Sidebar

The sidebar contains a mini calendar for date navigation and a calendar list for toggling calendar visibility. Show or hide it programmatically.

// Toggle sidebar visibility
calendar.sidebarVisible = true;
calendar.sidebarVisible = false;

Week Numbers

Show ISO week numbers in the month and week views.

calendar.settings.showWeekNumbers = true;

Agenda Days

Configure how many days the agenda view displays.

// Show 14 days in agenda view (default is 7)
calendar.settings.agendaDays = 14;

Navigation Sync

React to navigation and view mode changes to synchronize with the URL or external state.

// Sync current date to URL
calendar.events.currentDateChanged$.subscribe(date => {
  const params = new URLSearchParams(window.location.search);
  params.set('date', date.toISOString().slice(0, 10));
  history.replaceState(null, '', '?' + params.toString());
});

// Sync view mode to URL
calendar.events.viewModeChanged$.subscribe(mode => {
  const params = new URLSearchParams(window.location.search);
  params.set('view', mode);
  history.replaceState(null, '', '?' + params.toString());
});

// Restore from URL on init
const params = new URLSearchParams(window.location.search);
if (params.has('date')) calendar.goToDate(new Date(params.get('date')));
if (params.has('view')) calendar.viewMode = params.get('view');

Custom Rendering

Override the default entry rendering with a custom function. Return true to indicate you handled the rendering, or false to fall back to default.

calendar.entryRendering = ({ entry, element, isAllDay, viewMode, color }) => {
  // Add a custom icon based on item type
  const icon = entry.item.type === 'meeting' ? '📅' : '📌';
  const label = document.createElement('span');
  label.textContent = icon + ' ' + entry.title;
  element.innerHTML = '';
  element.appendChild(label);

  return true; // handled
};

// Reset to default rendering
calendar.entryRendering = null;

EntryRenderArgs

Custom Tooltips

Customize the tooltip content shown when hovering over an entry. Return null to hide the tooltip.

calendar.entryTooltip = ({ entry, viewMode }) => {
  return {
    title: entry.title,
    rows: [
      { label: 'Time', value: entry.startTime.toLocaleTimeString() + ' – ' + entry.endTime.toLocaleTimeString() },
      { label: 'Calendar', value: calendar.data.getCalendarById(entry.item.calendarId)?.name ?? '' },
      { label: 'Location', value: entry.location ?? '—' },
    ],
  };
};

// Disable tooltips
calendar.entryTooltip = () => null;

// Reset to default
calendar.entryTooltip = null;