Skip to main content
The Calendar application provides a simple, interactive monthly calendar view with authentic CDE styling. Navigate through months to view dates and track the current day.
The Calendar is implemented in calendar.ts (147 lines) and launched from the front panel Clock icon or Application Manager.

​
Opening Calendar

There are three ways to access the Calendar:
Click the Clock icon in the front panel to open the Calendar window.

​
Interface Overview

The Calendar window displays:

Header

Month/year display with previous/next navigation buttons

Weekday Labels

Su, Mo, Tu, We, Th, Fr, Sa labels

Calendar Grid

Days of the month in a 7-column grid layout

Status Bar

Shows current date: “Today: DD/MM/YYYY”

​
Month Navigation

Navigate between months using the header controls:
  • Previous Month: Click the left arrow button with previous icon
  • Next Month: Click the right arrow button with right icon
  • Current Month: Displays in header as “Month YYYY” (e.g., “March 2026”)
The calendar maintains your viewing position as you navigate. The status bar always shows today’s actual date for reference.

​
Visual Indicators

The current day is automatically highlighted with the .today CSS class when viewing the current month. This makes it easy to identify today’s date at a glance.Implementation: calendar.ts:82-84
if (isCurrentMonth && day === today.getDate()) {
  dayEl.classList.add('today');
}
Days before the first of the month appear as empty cells with the .empty class, properly aligning the calendar grid to start on the correct weekday.Padding Logic: calendar.ts:68-72
for (let i = 0; i < firstDay; i++) {
  const empty = document.createElement('div');
  empty.className = 'cal-day empty';
  daysContainer.appendChild(empty);
}

​
Features

​
Month Rendering

The calendar dynamically renders based on the selected month:
  1. Calculate First Day: Determines which weekday the month starts on
  2. Days in Month: Calculates total days (28-31 depending on month/year)
  3. Grid Layout: Creates proper alignment with empty cells for padding
  4. Today Detection: Highlights current day when viewing current month
The calendar correctly handles leap years and different month lengths automatically using JavaScript’s Date object.

​
Window Management

The Calendar window includes:
  • Non-Maximizable: The disableMaximize={true} attribute prevents maximizing (fixed size)
  • Minimizable: Can be minimized to the panel
  • Draggable: Move the window by dragging the titlebar
  • Audio Feedback: Plays window open/close sounds via AudioManager
Window Operations: calendar.ts:95-126 
function open(): void {
  const win = document.getElementById('calendar-window');
  if (win) {
    win.style.display = 'flex';
    requestAnimationFrame(() => {
      if (window.centerWindow) window.centerWindow(win);
      if (window.focusWindow) window.focusWindow('calendar-window');
    });
    if (window.AudioManager) window.AudioManager.windowOpen();
  }
}

​
Implementation Details

​
CalendarManager

The Calendar is managed by the CalendarManager singleton exported from calendar.ts:

init()

Initializes the calendar, binds event handlers, and renders the current month

render()

Renders the calendar grid for the currently selected month

open()

Opens and centers the calendar window

close()

Closes the calendar window

toggle()

Toggles calendar visibility (open if closed, close if open)

changeMonth()

Changes displayed month by delta (+1 for next, -1 for previous)

​
Month Array

Defined in: calendar.ts:13-26 
const months = [
  'January', 'February', 'March', 'April',
  'May', 'June', 'July', 'August',
  'September', 'October', 'November', 'December'
];

​
State Management

  • currentDate: Date object tracking the displayed month/year
  • initialized: Boolean flag preventing duplicate initialization
The Calendar does not persist appointments or events. It’s a view-only date display tool, not a full calendar application with scheduling features.

​
Usage Tips

1

Quick Date Reference

Keep the Calendar open in a separate workspace for quick date reference while working in other applications.
2

Month Planning

Navigate forward to view upcoming months when planning dates or deadlines.
3

Historical Dates

Navigate backward to check dates from previous months. The calendar correctly renders any historical date.
The Calendar window is sized appropriately for the grid layout and cannot be maximized. This maintains the authentic CDE calendar appearance.

​
Keyboard Shortcuts

The Calendar primarily uses mouse interactions:
ActionMethod
Previous MonthClick left arrow button
Next MonthClick right arrow button
Close WindowClick X button or Ctrl+W (window close)
MinimizeClick minimize button
While there’s no dedicated keyboard shortcut to open the Calendar, you can use standard window management shortcuts (Ctrl+W to close, Ctrl+M to minimize) once the window is focused.

Application Manager

Launch Calendar from the Application Manager

Window Management

Understanding window operations and management

Workspaces

Use workspaces to organize Calendar with other tools