Day

A day control that displays the day, month, weekday and a label.

Import

import { Day } from "@schukai/monster/source/components/time/day.mjs";

Source

View source code

Package

@schukai/monster

Since

3.113.0

Introduction

The monster-day component is a versatile web element designed to display date-related information in an interactive and structured manner. It enhances the presentation of date elements by offering a clear and user-friendly layout that adapts to various applications. Whether integrated into a simple calendar interface or a more complex scheduling system, this component ensures a seamless and accessible user experience.

Key Features

Dynamic date updates: Automatically updates based on the provided date value, ensuring accurate and real-time information.
Customizable appearance: Supports CSS customization through part attributes, allowing developers to tailor its look to fit their application design.
Accessibility: Built with accessibility in mind, supporting screen readers and keyboard navigation for inclusive usage.
Localized formatting: Displays date information in the appropriate format based on the document’s locale settings.
Structured layout: Organizes date elements into distinct sections, including day, month, weekday, and a customizable label.

Enhancing User Experience

The monster-day component enhances user experience by presenting date-related information in a structured and visually appealing way. The ability to customize its appearance ensures consistency with the application's design, while its accessibility features make it usable for all audiences.

By integrating localized formatting and clear date representation, users can quickly understand and interact with date information, improving usability and engagement.

Efficient Integration in Development

Integrating the monster-day component into web applications is straightforward. It is built using standard web technologies and follows best practices for modular design, ensuring easy implementation and compatibility with existing projects.

The component’s adaptability makes it suitable for various use cases, from simple calendar displays to advanced scheduling systems. Developers can efficiently integrate it into their workflows, reducing development time while maintaining flexibility and scalability.

Day Simple

This example renders a date using the <monster-day> component. The displayed output consists of:

Day: 4
Month: May
Weekday: Saturday
Label: (Empty, as the date does not correspond to today, yesterday, or tomorrow)

The component automatically formats the provided date (2030-05-04) and structures it into separate sections:

The month appears at the top.
The day number is prominently displayed in the center.
The weekday is shown below the day.
The label is only displayed if the date matches today, yesterday, or tomorrow.

This ensures a clear and user-friendly representation of the selected date.

Javascript

import '@schukai/monster/source/components/time/day.mjs';

HTML

<monster-day data-monster-option-date="2030-05-04"></monster-day>

Stylesheet

/** no additional stylesheet is defined **/

Day Simple Small

This example renders a date using the <monster-day> component with the small class applied. The displayed output consists of:

Day: 4
Month: May
Weekday: Saturday
Label: (Empty, as the date does not correspond to today, yesterday, or tomorrow)

The small class modifies the layout of the component, making it more compact. The structural changes include:

The elements are displayed inline instead of stacked vertically.
The month and day appear next to each other.
The weekday is placed beside the date.
The label (if applicable) is aligned inline instead of below the weekday.

This layout is optimized for cases where space is limited, such as within tables, toolbars, or condensed UI elements.

Javascript

import '@schukai/monster/source/components/time/day.mjs';

HTML

<monster-day data-monster-option-date="2030-05-04" class="small"></monster-day>

Stylesheet

/** no additional stylesheet is defined **/

Component Design

The monster-day component is built using the Shadow DOM, ensuring encapsulation of its internal structure and styling. By utilizing a shadow root, the internal elements remain isolated, preventing unintended modifications by external styles or scripts.

Shadow DOM and Accessibility

Since the component is encapsulated within a shadow root, direct access to its internal elements is restricted. This ensures consistent behavior and styling across different implementations. The component also follows best practices to maintain accessibility, allowing for interaction via keyboard navigation and screen readers.

Customizing Through Exported Parts

Although the Shadow DOM restricts direct manipulation of internal elements, customization is still possible through exported parts. Specific parts of the component are exposed for styling using the part attribute, enabling developers to apply custom styles while preserving the component’s integrity.

Available Part Attributes

control: Represents the main container of the component.
month: Represents the month display section.
day: Represents the numerical day display.
weekday: Represents the weekday display.
label: Represents the label section, which can display contextual information such as "Today" or "Tomorrow".

Below is an example of how to use CSS part attributes to customize different sections of the monster-day component.


monster-day::part(control) {
    background-color: #f8f8f8;
    padding: 8px;
    border-radius: 4px;
}

monster-day::part(day) {
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
}

monster-day::part(label) {
    background-color: #0073e6;
    color: white;
    padding: 4px 8px;
    border-radius: 2px;
}

Explanation of the Example

monster-day::part(control): Styles the main container, adding background color, padding, and rounded corners.
monster-day::part(day): Adjusts the font size and weight for the day display.
monster-day::part(label): Styles the label with a background color, text color, and padding.

Accessibility

The monster-day component is designed with accessibility in mind. It supports assistive technologies by providing meaningful structure and semantic elements. Users can navigate through the component using a keyboard or screen readers, ensuring an inclusive experience.

HTML Structure

<monster-day></monster-day>

JavaScript Initialization

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

Exported

Day

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

date

string

The date of the day

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.

Constructor

constructor()

Static methods

[instanceSymbol]()

This method is called by the instanceof operator.

getCSSStyleSheet()

Returns

{CSSStyleSheet[]}

getTag()

Returns

{string}

observedAttributes()

Returns

{string[]}

Lifecycle methods

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

[assembleMethodSymbol]()

Returns

{Components.Time.Day

Events

This component does not fire any public events. It may fire events that are inherited from its parent classes.

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