Navigation Back to home

Segment

A timeline segment block for labeled schedule ranges such as shifts, phases or reserved periods.

Import
the javascript logo
import { Segment } from "@schukai/monster/source/components/time/timeline/segment.mjs";
Source
the git logo
Package
Since
3.112.0
Support Rotation

Introduction

The Monster Segment component marks a labeled range within a timeline. Use it for shifts, reserved periods, phases or other broader schedule blocks that frame smaller appointments.

When to use Segment

  • Use it for wider schedule ranges: Segments communicate larger temporal structure than single appointments.
  • Use it when labels should define a block of time: Useful for lanes, phases or grouped periods.
  • Do not use it for one-off event points: A discrete appointment block is usually the better fit.

Segment Simple

Places several segments on a positioned timeline track. Each host receives the geometry that a calendar normally calculates from its start, duration and lane.

Support rotation

Javascript

import "@schukai/monster/source/components/time/timeline/segment.mjs";<script type="module">import "./script.mjs";</script>

HTML

<div class="timeline-segment-demo">
  <strong>Support rotation</strong>
  <div class="timeline-segment-demo-track" aria-label="Support rotation timeline">
    <monster-appointment-segment class="timeline-segment-demo-morning" data-monster-option-labels-text="Morning shift"></monster-appointment-segment>
    <monster-appointment-segment class="timeline-segment-demo-core" data-monster-option-labels-text="Core overlap"></monster-appointment-segment>
    <monster-appointment-segment class="timeline-segment-demo-handover" data-monster-option-labels-text="Evening handover"></monster-appointment-segment>
  </div>
</div>

Stylesheet

.timeline-segment-demo {
  display: grid;
  gap: var(--monster-space-3);
}

.timeline-segment-demo-track {
  position: relative;
  min-block-size: calc(var(--monster-space-7) + var(--monster-space-6) + var(--monster-space-2));
  overflow: hidden;
  padding: var(--monster-space-2);
  border: 1px solid var(--monster-color-border-1);
  border-radius: var(--monster-border-radius);
  background: var(--monster-bg-color-primary-2);
  color: var(--monster-color-primary-2);
}

.timeline-segment-demo monster-appointment-segment {
  block-size: var(--monster-space-5);
  border-radius: var(--monster-border-radius);
  background: var(--monster-bg-color-secondary-2);
  color: var(--monster-color-secondary-2);
}

.timeline-segment-demo monster-appointment-segment::part(control) {
  align-items: center;
}

.timeline-segment-demo-morning {
  inset-block-start: var(--monster-space-2);
  inset-inline-start: var(--monster-space-2);
  inline-size: 42%;
}

.timeline-segment-demo-core {
  inset-block-start: calc(var(--monster-space-5) + var(--monster-space-4));
  inset-inline-start: 28%;
  inline-size: 50%;
}

.timeline-segment-demo-handover {
  inset-block-start: calc(var(--monster-space-7) + var(--monster-space-5));
  inset-inline-start: 60%;
  inline-size: calc(40% - var(--monster-space-2));
}
Open in playground

Segment Actions

Updates a segment label and its host geometry through public APIs, mirroring the work a calendar performs when a scheduled range changes.

Move to afternoonCurrent window: 09:00–12:00.

Javascript

import "@schukai/monster/source/components/form/button.mjs";
import "@schukai/monster/source/components/time/timeline/segment.mjs";

await Promise.all([
  customElements.whenDefined("monster-button"),
  customElements.whenDefined("monster-appointment-segment"),
]);

const segment = document.getElementById("action-segment");
const moveButton = document.getElementById("move-action-segment");
const status = document.getElementById("action-segment-status");
let afternoon = false;

moveButton.addEventListener("click", () => {
  afternoon = !afternoon;
  segment.setOption(
    "labels.text",
    afternoon ? "Afternoon delivery window" : "Core delivery window",
  );
  segment.style.insetInlineStart = afternoon ? "48%" : "8%";
  segment.style.inlineSize = afternoon ? "44%" : "42%";
  moveButton.textContent = afternoon ? "Move to morning" : "Move to afternoon";
  status.textContent = afternoon
    ? "Current window: 14:00–17:00."
    : "Current window: 09:00–12:00.";
});<script type="module">import "./script.mjs";</script>

HTML

<div class="timeline-segment-action-demo">
  <div class="timeline-segment-action-track" aria-label="Editable delivery window">
    <monster-appointment-segment id="action-segment" data-monster-option-labels-text="Core delivery window"></monster-appointment-segment>
  </div>
  <monster-button id="move-action-segment">Move to afternoon</monster-button>
  <output id="action-segment-status" aria-live="polite">Current window: 09:00–12:00.</output>
</div>

Stylesheet

.timeline-segment-action-demo {
  display: grid;
  gap: var(--monster-space-3);
}

.timeline-segment-action-track {
  position: relative;
  min-block-size: calc(var(--monster-space-7) + var(--monster-space-5));
  overflow: hidden;
  border: 1px solid var(--monster-color-border-1);
  border-radius: var(--monster-border-radius);
  background: var(--monster-bg-color-primary-2);
  color: var(--monster-color-primary-2);
}

.timeline-segment-action-track monster-appointment-segment {
  inset-block-start: var(--monster-space-5);
  inset-inline-start: 8%;
  inline-size: 42%;
  block-size: var(--monster-space-5);
  border-radius: var(--monster-border-radius);
  background: var(--monster-bg-color-tertiary-2);
  color: var(--monster-color-tertiary-2);
  transition: inset-inline-start 180ms ease, inline-size 180ms ease;
}

.timeline-segment-action-track monster-appointment-segment::part(control) {
  align-items: center;
}

#action-segment-status {
  display: block;
}
Open in playground

Component Design

The segment component mirrors the same simple structure as the appointment component but is intended for broader grouped periods instead of a single appointment item.

Styling Hooks

  • ::part(control): Styles the segment wrapper.
  • ::part(appointment): Styles the visible segment label.

HTML Structure

<monster-appointment-segment></monster-appointment-segment>

JavaScript Initialization

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

Exported

Segment

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
Label definitions
actions
object
undefined
Callbacks
actions.click
string
throw Error
Callback when clicked
features
object
undefined
Features
classes
object
undefined
CSS classes
disabled
boolean
false
Disabled state

  • 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.

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.

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.