Components

Date range

A start and an end day, and the band between them, picked on one calendar.

size
scheme
Sun
Mon
Tue
Wed
Thu
Fri
Sat

forSlots(CalendarSlots)(Recipes.DateRange({}))

Usage

The function that drew the preview, over the theme module Create a theme writes. The preview passes it the style picked above instead of its default.

export const DateRangeStyle = forSlots(CalendarSlots)(Recipes.DateRange({}))

/** The month shown and the focused day are the component's; the range is the Model's. */
export interface DateRangeState {
  readonly trip: UiCalendar.Model
  readonly tripDates: DateRange.Range
}

export const dateRange = <Message>(
  style: NamedStyle<typeof CalendarSlots>,
  state: DateRangeState,
  toMessage: (message: UiCalendar.Message) => Message,
  h: HtmlBuilder<Message>,
): Html =>
  h.submodel({
    slotId: state.trip.id,
    model: state.trip,
    view: UiCalendar.view,
    viewInputs: {
      // The marks show the chosen days; the Calendar's own marker would show one.
      maybeSelectedDate: Option.none(),
      toView: DateRange.toView(state.tripDates, [style.mixin], { h }),
    },
    toParentMessage: toMessage,
  })

The recipe ↗This code ↗