Calendar

App

Month / week / day / agenda / resource calendar with view switcher, full keyboard nav (PageUp/Down + T + arrow keys for day-step), per-event color and icon, all-day bars + timed pills, TR/EN locales, full interactions (anchored popover with Edit/Delete, drag-move, edge-resize, drag-create), in-house RRULE expansion (FREQ/INTERVAL/COUNT/UNTIL/BYDAY + exceptions, server-side), multi-calendar overlay with per-calendar visibility legend, ResourceView lanes with O(n²) conflict highlighting, agenda list (search + date grouping), composable MiniCalendar sibling (modules/app/MiniCalendar), and WAI-ARIA grid pattern with live-region nav announcements + descriptive cell aria-labels. Pixel-identical React sibling at modules/app/Calendar/index.tsx.

Month view — Türkçe

Preview

Mayıs 2026

Pzt
Sal
Çar
Per
Cum
Cmt
Paz
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
Code
<%- include('modules/app/Calendar', {
  id: 'main-cal',
  view: 'month',
  defaultDate: new Date(2026, 4, 13),
  events: events,
  locale: 'tr'
}) %>

Week view — working hours shading

Preview

11 – 17 Mayıs 2026

Pzt
11
Sal
12
Çar
13
Per
14
Cum
15
Cmt
16
Paz
17
Tüm gün
01:00
02:00
03:00
04:00
05:00
06:00
07:00
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
22:00
23:00
Code
<%- include('modules/app/Calendar', {
  id: 'main-cal',
  view: 'week',
  defaultDate: new Date(2026, 4, 13),
  events: events,
  locale: 'tr',
  workingHours: { start: 9, end: 18, days: [1,2,3,4,5] }
}) %>

Day view — English

Preview

13 May 2026

Wednesday 13
01:00
02:00
03:00
04:00
05:00
06:00
07:00
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
22:00
23:00
Code
<%- include('modules/app/Calendar', {
  id: 'main-cal',
  view: 'day',
  defaultDate: new Date(2026, 4, 13),
  events: events,
  locale: 'en',
  workingHours: { start: 9, end: 18, days: [1,2,3,4,5] }
}) %>

Recurring — RRULE expansion

Preview

10 – 16 May 2026

Sun
10
Mon
11
Tue
12
Wed
13
Thu
14
Fri
15
Sat
16
01:00
02:00
03:00
04:00
05:00
06:00
07:00
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
22:00
23:00
Code
<%- include('modules/app/Calendar', {
  id: 'main-cal',
  view: 'week',
  defaultDate: new Date(2026, 4, 13),
  slotMinutes: 15,
  workingHours: { start: 9, end: 18, days: [1,2,3,4,5] },
  events: [
    { id: 'standup', title: 'Daily standup',
      start: new Date(2026, 4, 11, 9, 30), end: new Date(2026, 4, 11, 9, 45),
      rrule: 'FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR;COUNT=20',
      exceptions: [new Date(2026, 4, 13)] },
    { id: 'coffee', title: 'Coffee with Ada',
      start: new Date(2026, 4, 12, 8, 30), end: new Date(2026, 4, 12, 9, 0),
      rrule: 'FREQ=WEEKLY;INTERVAL=2;BYDAY=TU;COUNT=5' }
  ]
}) %>

Interactive — drag, resize, popover

Preview

10 – 16 May 2026

Sun
10
Mon
11
Tue
12
Wed
13
Thu
14
Fri
15
Sat
16
All-day
01:00
02:00
03:00
04:00
05:00
06:00
07:00
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
22:00
23:00
Code

<%- include('modules/app/Calendar', {
  id: 'interactive-cal',
  view: 'week',
  defaultDate: new Date(2026, 4, 13),
  events: events,
  slotMinutes: 30
}) %>

Resource view — rooms with conflict highlight

Preview

May 2026

13
Studio A
Studio B
Boardroom
01:00
02:00
03:00
04:00
05:00
06:00
07:00
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
22:00
23:00
Code
<%- include('modules/app/Calendar', {
  id: 'rooms-cal',
  view: 'resource',
  defaultDate: new Date(2026, 4, 13),
  slotMinutes: 15,
  workingHours: { start: 9, end: 18, days: [1,2,3,4,5] },
  resources: [
    { id: 'room-a', name: 'Studio A',  color: 'primary' },
    { id: 'room-b', name: 'Studio B',  color: 'success' },
    { id: 'room-c', name: 'Boardroom', color: 'warning' }
  ],
  events: events // each carries a resourceId
}) %>

Agenda view — date-grouped + search

Preview

May 2026

11 Monday May 2026
12 Tuesday May 2026
13 Wednesday May 2026
14 Thursday May 2026
15 Friday May 2026
Code
<%- include('modules/app/Calendar', {
  id: 'agenda-cal',
  view: 'agenda',
  defaultDate: new Date(2026, 4, 13),
  events: events,
  locale: 'en'
}) %>

MiniCalendar sidebar — composes with Calendar via CustomEvent

Preview
May 2026
S
M
T
W
T
F
S

10 – 16 May 2026

Sun
10
Mon
11
Tue
12
Wed
13
Thu
14
Fri
15
Sat
16
All-day
01:00
02:00
03:00
04:00
05:00
06:00
07:00
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
22:00
23:00
Code
<%- include('modules/app/MiniCalendar', { id: 'mini', value: new Date(2026, 4, 13), locale: 'en' }) %> <%- include('modules/app/Calendar', { id: 'main', view: 'week', defaultDate: new Date(2026, 4, 13), events: events }) %>

Multi-calendar overlay — toggle visibility

Preview

10 – 16 May 2026

Calendars
Sun
10
Mon
11
Tue
12
Wed
13
Thu
14
Fri
15
Sat
16
01:00
02:00
03:00
04:00
05:00
06:00
07:00
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
22:00
23:00
Code
<%- include('modules/app/Calendar', {
  id: 'multi-cal',
  view: 'week',
  defaultDate: new Date(2026, 4, 13),
  calendars: [
    { id: 'work',     name: 'Work',     color: 'primary' },
    { id: 'personal', name: 'Personal', color: 'success' },
    { id: 'family',   name: 'Family',   color: 'warning' }
  ],
  events: events // each carries a calendarId
}) %>
Source modules/app/Calendar/Calendar.ejs