Data Display

WeekSchedule

Display of a recurring weekly schedule as one row per day with a day, an unbroken time range and a description, today highlighted and a live window marked with a pill.

import { WeekSchedule } from '@lostgradient/cinder';
scheduleweekrecurring
01

Overview

Reference usage

WeekSchedule displays a recurring week as one row per day: a 56px day column, a time range and a description. Today's row carries a tonal fill and a stronger day name and is announced as the current date. A live window carries an inverted "On now" pill, with no accent colour. A time range never breaks across lines, and a window that ends after midnight says "next day" after its end time.

It only displays a schedule. To edit one, use ScheduleBuilder.

Usage

svelte 
<script lang="ts">
  import { WeekSchedule } from '@lostgradient/cinder';
</script>

<WeekSchedule
  label="Happy hour"
  days={[
    { day: 'Mon', start: '2:00 pm', end: '8:00 pm', description: 'Half-price wells' },
    { day: 'Fri', start: '10:00 pm', end: '2:00 am', endsNextDay: true, today: true },
  ]}
/>
Live preview

A week of windows

  1. Mon – Half-price wells
  2. Tue – On now Taco and margarita special
  3. Wed – Draft pints

02

When to use

Use when
  • Showing the days and hours a place or event recurs, such as happy-hour windows, on a detail page.
  • Showing a window that crosses midnight without breaking its time range across lines.
Avoid when
  • Letting the user edit a schedule or a cron expression — use schedule-builder.
  • Showing dated events on a calendar grid — use calendar.
03

Examples

A week of windows

One row per day. Today sits on the surface, a live window carries an inverted On now pill, and a time range never breaks inside.

A window that crosses midnight

Set endsNextDay when the window ends after midnight. The range still reads on one line.

04

Props

Props for week-schedule
Name
Type
Default
Description
days required WeekScheduleDay[] The days in reading order, one row each.
label text Accessible name of the list, such as "Weekly schedule". Left unset, the list is unnamed.
liveLabel text 'On now' Text of the live pill. Defaults to "On now".