Calendar

This page demonstrates a planning calendar that renders month tables, month summaries, quarter summaries, and year totals from the same scheduling rules.

This example shows a planning-oriented calendar pattern that combines day-level visual markers with month, quarter, and year summary statistics. It is useful for release planning, capacity forecasting, and communicating schedule constraints in a format stakeholders can scan quickly.

The controls are part of the feature UI (not just example-page controls) and stay in a sticky panel so they remain available while reviewing the calendar.

Changing Start Day updates the calendar layout (week column order) only. The underlying event, holiday, vacation, planning, and release data remains the same.

Demonstration

Calendar Controls

Today Start Day:

Legend

The legend includes both visual markers used in calendar cells and definitions for the summary metrics shown in each stats panel.

Weekend Day
Planning Day: Preparation for project development cycle.
Release Day: Preparation for project releases.
Holiday: Any day that is a holiday.
Event Day: Any day that is an event day.
Vacation Day: Any day that is a vacation day.
Workday: Any day that is not a weekend, holiday, vacation day. Includes event days.
Off Day: Any day that is a holiday, weekend, or vacation day but is not an event day.
Development Day: Workdays remaining after planning, release, holidays, vacations, and event days are excluded.

Months

Each month includes a collapsible stats panel grouped into four categories: totals, weekday breakdown, schedule-impact day counts, and planning/release/development counts.

January

January Stats

Total Days:
Work Days:
Off Days:

Weekdays Total:
Weekdays On:
Weekdays Off:

Weekend Days:
Holidays:
Vacation Days:
Event Days:

Planning Days:
Development Days:
Release Days:

February

February Stats

Total Days:
Work Days:
Off Days:

Weekdays Total:
Weekdays On:
Weekdays Off:

Weekend Days:
Holidays:
Vacation Days:
Event Days:

Planning Days:
Development Days:
Release Days:

March

March Stats

Total Days:
Work Days:
Off Days:

Weekdays Total:
Weekdays On:
Weekdays Off:

Weekend Days:
Holidays:
Vacation Days:
Event Days:

Planning Days:
Development Days:
Release Days:

April

April Stats

Total Days:
Work Days:
Off Days:

Weekdays Total:
Weekdays On:
Weekdays Off:

Weekend Days:
Holidays:
Vacation Days:
Event Days:

Planning Days:
Development Days:
Release Days:

May

May Stats

Total Days:
Work Days:
Off Days:

Weekdays Total:
Weekdays On:
Weekdays Off:

Weekend Days:
Holidays:
Vacation Days:
Event Days:

Planning Days:
Development Days:
Release Days:

June

June Stats

Total Days:
Work Days:
Off Days:

Weekdays Total:
Weekdays On:
Weekdays Off:

Weekend Days:
Holidays:
Vacation Days:
Event Days:

Planning Days:
Development Days:
Release Days:

July

July Stats

Total Days:
Work Days:
Off Days:

Weekdays Total:
Weekdays On:
Weekdays Off:

Weekend Days:
Holidays:
Vacation Days:
Event Days:

Planning Days:
Development Days:
Release Days:

August

August Stats

Total Days:
Work Days:
Off Days:

Weekdays Total:
Weekdays On:
Weekdays Off:

Weekend Days:
Holidays:
Vacation Days:
Event Days:

Planning Days:
Development Days:
Release Days:

September

September Stats

Total Days:
Work Days:
Off Days:

Weekdays Total:
Weekdays On:
Weekdays Off:

Weekend Days:
Holidays:
Vacation Days:
Event Days:

Planning Days:
Development Days:
Release Days:

October

October Stats

Total Days:
Work Days:
Off Days:

Weekdays Total:
Weekdays On:
Weekdays Off:

Weekend Days:
Holidays:
Vacation Days:
Event Days:

Planning Days:
Development Days:
Release Days:

November

November Stats

Total Days:
Work Days:
Off Days:

Weekdays Total:
Weekdays On:
Weekdays Off:

Weekend Days:
Holidays:
Vacation Days:
Event Days:

Planning Days:
Development Days:
Release Days:

December

December Stats

Total Days:
Work Days:
Off Days:

Weekdays Total:
Weekdays On:
Weekdays Off:

Weekend Days:
Holidays:
Vacation Days:
Event Days:

Planning Days:
Development Days:
Release Days:

Quarter Stats

Quarter summaries aggregate the same month-level rules used to render the calendar so the totals stay consistent with the day-level view.

Q1 (January - March)

Total Days:
Work Days:
Off Days:

Weekdays Total:
Weekdays On:
Weekdays Off:

Weekend Days:
Holidays:
Vacation Days:
Event Days:

Planning Days:
Development Days:
Release Days:

Q2 (April - June)

Total Days:
Work Days:
Off Days:

Weekdays Total:
Weekdays On:
Weekdays Off:

Weekend Days:
Holidays:
Vacation Days:
Event Days:

Planning Days:
Development Days:
Release Days:

Q3 (July - September)

Total Days:
Work Days:
Off Days:

Weekdays Total:
Weekdays On:
Weekdays Off:

Weekend Days:
Holidays:
Vacation Days:
Event Days:

Planning Days:
Development Days:
Release Days:

Q4 (October - December)

Total Days:
Work Days:
Off Days:

Weekdays Total:
Weekdays On:
Weekdays Off:

Weekend Days:
Holidays:
Vacation Days:
Event Days:

Planning Days:
Development Days:
Release Days:

Year Stats

Year totals are also computed from the same scheduling rules, providing a rolled-up view that matches the month and quarter sections.

Total Days:
Work Days:
Off Days:

Weekdays Total:
Weekdays On:
Weekdays Off:

Weekend Days:
Holidays:
Vacation Days:
Event Days:

Planning Days:
Development Days:
Release Days:

Implementation Notes

The control panel is feature UI and is kept sticky in page content for long-page navigation.
Month, quarter, and year totals are calculated from the same date classification rules.
Month, quarter, and year stat groups are presented as reusable panel boxes for faster scanning.
The year navigation and start-day selector are intentionally in-page so they can be copied into real implementations.

Code for This Page

The page keeps a source-like HTML structure (month table targets and stat placeholders) while JavaScript populates tables and summaries at runtime. The page-specific setup is kept separate from the reusable calendar logic module.

This HTML snippet shows the minimum render targets the calendar logic expects: the start-day control and a month table container that will be populated at runtime.

<a id="calendarTodayButton" class="button" href="#calendar-today">Today</a>
<label for="startDaySelect">Start Day:</label>
<select id="startDaySelect">...</select>
<div id="January-table"><table class="calendar"></table></div>

This page setup snippet shows how to initialize the calendar and pass the full scheduling configuration object (holidays, events, vacations, and layout preferences).

document.addEventListener('DOMContentLoaded', function () {
  window.initCalendarPlanningDemo({
    year: new Date().getFullYear(),
    startDayOfWeek: 0,
    holidays: [
      { rule: 'fixed', date: '01-01', name: 'New Year\\'s Day' },
      { rule: 'nthWeekdayOfMonth', month: 0, nth: 3, weekday: 1, name: 'Martin Luther King Jr. Day' },
      { rule: 'nthWeekdayOfMonth', month: 1, nth: 3, weekday: 1, name: 'President\\'s Day' },
      { rule: 'fixed', date: '02-14', name: 'Valentine\\'s Day' },
      { rule: 'fixed', date: '02-29', name: 'Leap Year Day' },
      { rule: 'fixed', date: '03-17', name: 'St. Patrick\\'s Day' },
      { rule: 'lastWeekdayOfMonth', month: 4, weekday: 1, name: 'Memorial Day' },
      { rule: 'fixed', date: '04-20', name: 'Earth Day' },
      { rule: 'nthWeekdayOfMonth', month: 4, nth: 2, weekday: 0, name: 'Mother\\'s Day' },
      { rule: 'fixed', date: '07-04', name: 'Independence Day' },
      { rule: 'nthWeekdayOfMonth', month: 5, nth: 3, weekday: 0, name: 'Father\\'s Day' },
      { rule: 'nthWeekdayOfMonth', month: 7, nth: 1, weekday: 0, name: 'International Friendship Day' },
      { rule: 'nthWeekdayOfMonth', month: 8, nth: 1, weekday: 1, name: 'Labor Day' },
      { rule: 'fixed', date: '10-31', name: 'Halloween' },
      { rule: 'fixed', date: '11-11', name: 'Veteran\\'s Day' },
      { rule: 'nthWeekdayOfMonth', month: 10, nth: 4, weekday: 4, name: 'Thanksgiving Day' },
      { rule: 'fixed', date: '12-24', name: 'Christmas Eve' },
      { rule: 'fixed', date: '12-25', name: 'Christmas Day' },
      { rule: 'fixed', date: '12-31', name: 'New Year\\'s Eve' }
    ],
    events: [
      { start: '2024-04-15', end: '2024-04-19', name: 'Company Retreat' }
    ],
    vacations: [
      { start: '01-01', end: '01-03', name: 'Q4 Vacation (Part 2)' },
      { start: '06-23', end: '06-30', name: 'Q2 Vacation (Part 1)' },
      { start: '07-01', end: '07-07', name: 'Q2 Vacation (Part 2)' },
      { start: '12-19', end: '12-31', name: 'Q4 Vacation (Part 1)' }
    ]
  });
});

Files for This Page

Page HTML: in/example/calendar.html
Page SCSS: in/asset/css/content/example/calendar.scss
Calendar logic JS: in/asset/js/content/example/calendar.js
Page init JS: in/asset/js/content/example/calendar-init.js

Attribution

This page adapts the original calendar concept from the James Steele Seeley project to fit Synticore's example structure and styling conventions.

Source demo adaptation: James Steele Seeley - Calendar (https://jamesseeley.com/web/calendar) .