MonthCalendar

A month calendar for appointments and date-based planning, with optional datasource-driven event loading.

Import

import { MonthCalendar } from "@schukai/monster/source/components/time/month-calendar.mjs";

Source

View source code

Package

@schukai/monster

Since

3.112.0

Introduction

The Monster MonthCalendar shows appointments across a monthly grid. Use it when users should browse planned items, availability or simple scheduling information in a familiar calendar format.

When to use MonthCalendar

Use it for month-based planning: Good for availability overviews, event calendars and lightweight scheduling.
Use it when a datasource can provide appointments: The component can render remote planning data inside the calendar grid.
Do not use it for minute-level planning: Detailed time allocation usually wants a timeline or agenda view.

Calendar Simple

This is a monster calendar component. It is a simple calendar that displays the current month. No more no less.

Javascript

//import '@schukai/monster/source/components/time/month-calendar.mjs';<script type="module">//import '@schukai/monster/source/components/time/month-calendar.mjs';</script>

HTML

<monster-month-calendar>
</monster-month-calendar>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Calendar Date Range

Constrains the visible month range and toggles between a seven-day calendar and a five-column Monday-to-Friday planning view.

Javascript

import "@schukai/monster/source/components/time/month-calendar.mjs";

await customElements.whenDefined("monster-month-calendar");

const calendar = document.getElementById("release-calendar");
const weekendButton = document.getElementById("release-calendar-weekends");
calendar.setOption("startDate", "2026-10-01");
calendar.setOption("endDate", "2026-10-31");
calendar.setOption("locale.weekdayFormat", "short");

weekendButton.addEventListener("click", () => {
  const weekendsVisible = calendar.getOption("features.showWeekend") !== false;
  calendar.setOption("features.showWeekend", !weekendsVisible);
  weekendButton.textContent = weekendsVisible ? "Show weekends" : "Hide weekends";
  weekendButton.setAttribute("aria-pressed", String(weekendsVisible));
});

HTML

<section style="display:grid;gap:var(--monster-space-3)">
  <monster-month-calendar id="release-calendar"></monster-month-calendar>
  <button id="release-calendar-weekends" type="button" aria-pressed="false">Hide weekends</button>
</section>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Move Overlapping Appointments

Enables the opt-in appointment move interaction and persists the accepted monster-appointment-move event. Moving a multi-day appointment preserves its duration, while Monster keeps overlapping appointments in separate rows.

Monster updates its local data option after the cancelable event. Persist event.detail.movedAppointment in the event listener, or call event.preventDefault() synchronously when the move must not be accepted.

Drag an appointment to another day. With the keyboard, focus an appointment, press Space, choose a day with the arrow keys and press Enter.

No appointment has been moved yet.

Javascript

import "@schukai/monster/source/components/datatable/datasource/dom.mjs";
import "@schukai/monster/source/components/time/month-calendar.mjs";

await Promise.all([
  customElements.whenDefined("monster-datasource-dom"),
  customElements.whenDefined("monster-month-calendar"),
]);

const calendar = document.getElementById("appointment-move-calendar");
const status = document.getElementById("appointment-move-status");
const savedAppointments = new Map();
const visibilityObserver = new IntersectionObserver((entries) => {
  if (!entries.some(({ isIntersecting }) => isIntersecting)) return;
  visibilityObserver.disconnect();
  requestAnimationFrame(() => calendar.refresh());
});

visibilityObserver.observe(calendar);

calendar.addEventListener("monster-appointment-move", (event) => {
  const { appointmentId, appointmentIndex, inputType, movedAppointment } =
    event.detail;

  savedAppointments.set(appointmentId ?? appointmentIndex, movedAppointment);

  status.textContent = `${appointmentId} saved for ${movedAppointment.startDate}–${movedAppointment.endDate} (${inputType}).`;
});

HTML

<section class="month-calendar-move-demo">
  <p id="month-calendar-move-instructions">
    Drag an appointment to another day. With the keyboard, focus an appointment,
    press Space, choose a day with the arrow keys and press Enter.
  </p>
  <monster-month-calendar
    id="appointment-move-calendar"
    aria-describedby="month-calendar-move-instructions"
    data-monster-option-datasource-selector="#appointment-move-datasource"
    data-monster-option-features-appointment-move="true"
    data-monster-option-startdate="2026-10-01"
    data-monster-option-enddate="2026-10-31"
  ></monster-month-calendar>
  <output id="appointment-move-status" aria-live="polite">
    No appointment has been moved yet.
  </output>
  <monster-datasource-dom id="appointment-move-datasource">
    <script type="application/json">
      [
        {
          "id": "release",
          "label": "Release window",
          "startDate": "2026-10-05",
          "endDate": "2026-10-08",
          "color": "rgb(30, 95, 72)"
        },
        {
          "id": "review",
          "label": "Security review",
          "startDate": "2026-10-06",
          "endDate": "2026-10-07",
          "color": "rgb(116, 72, 36)"
        },
        {
          "id": "migration",
          "label": "Data migration",
          "startDate": "2026-10-06",
          "endDate": "2026-10-10",
          "color": "rgb(54, 74, 126)"
        }
      ]
    </script>
  </monster-datasource-dom>
</section>

Stylesheet

.month-calendar-move-demo {
  display: grid;
  gap: var(--monster-space-3);
}

#appointment-move-status {
  display: block;
}

Open in playground

Component Design

This component is built using the Shadow DOM, which allows it to encapsulate its internal structure and styling. By using a shadow root, the component's internal elements are isolated from the rest of the webpage, ensuring that external styles or scripts cannot accidentally modify its internal layout or behavior.

Shadow DOM and Accessibility

Since the component is encapsulated within a shadow root, direct access to its internal elements is restricted. This means that developers cannot manipulate or style these elements from outside the component. The Shadow DOM helps maintain consistency in the design and behavior of the component by preventing external interference.

Customizing Through Exported Parts

While the Shadow DOM restricts direct access to the component's internal structure, customization is still possible through exported parts. Specific parts of the component are made accessible for styling by being explicitly marked for export. These exported parts can be targeted and customized using CSS, allowing you to modify the appearance of the component without compromising its encapsulation.

Available Part Attributes

control: This part represents the entire control area of the slider, including navigation buttons and thumbnails. Use this to style the general layout and background of the control panel.

Below is an example of how to use CSS part attributes to customize different parts of the Control.


monster-component::part(control) {
    background-color: #f0f0f0;
    padding: 10px;
}

Explanation of the Example

monster-slider::part(control): Styles the entire control panel, giving it a light background color and some padding.

Accessibility

Accessibility is a key consideration in the design of this component. By following best practices for web accessibility, the component ensures that users of all abilities can interact with it effectively. This includes support for keyboard navigation, screen readers, and other assistive technologies to provide an inclusive user experience.

HTML Structure

<monster-month-calendar></monster-month-calendar>

JavaScript Initialization

const element = document.createElement('monster-month-calendar');
document.body.appendChild(element);

Exported

MonthCalendar

Derived from

CustomElement

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the CustomElement.

Option

Type

Default

Description

templates

object

Template definitions

templates.main

string

undefined

Main template

labels

object

undefined

Labels for the control

classes

object

undefined

Classes for the control

disabled

boolean

false

Disables the control

features

object

Features for the control

features.showWeekend

boolean

true

Show the weekend

features.monthOneLine

boolean

false

Show the month in one line

features.appointmentMove

boolean

false

Allow appointments to be moved by drag and drop or keyboard

actions

object

undefined

Actions for the control

locale

object

Locale for the control

locale.weekdayFormat

string

short

Weekday format

startDate

string

undefined

Start date

endDate

string

End date

datasource

object

Datasource

datasource.selector

string

Datasource selector

since
deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the CustomElement.

data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the CustomElement.

Behavioral methods

refresh()

Returns

{Promise}

This method is called when the component is created.

Static methods

[instanceSymbol]()

Returns

{symbol}

This method is called by the instanceof operator.

getCSSStyleSheet()

Returns

{CSSStyleSheet[]}

No description available.

getTag()

Returns

{string}

No description available.

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()

Returns

{Components.Time.Calendar

No description available.

[initMethodSymbol]()

No description available.

Events

The component emits the following events:

monster-appointment-move
Cancelable before the local data option is updated. Detail contains the original and moved appointment, stable id/index, source and target dates, day delta and input type.

For more information on how to handle events, see the mdn documentation.

The current width of the area is too small to display the content correctly.