Calendar

A month of days to pick from, with its months and years a press away.

size

scheme

Sun

Mon

Tue

Wed

Thu

Fri

Sat

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

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 CalendarStyle = forSlots(CalendarSlots)(Recipes.Calendar({}))

/** The month shown and the focused day are the component's; the date is the Model's. */
export interface CalendarState {
  readonly calendar: UiCalendar.Model
  readonly date: Option.Option<FoldkitCalendar.CalendarDate>
}

export const calendar = <Message>(
  style: NamedStyle<typeof CalendarSlots>,
  state: CalendarState,
  toMessage: (message: UiCalendar.Message) => Message,
  h: HtmlBuilder<Message>,
): Html =>
  h.submodel({
    slotId: state.calendar.id,
    model: state.calendar,
    view: UiCalendar.view,
    viewInputs: {
      maybeSelectedDate: state.date,
      toView: Calendar.toView([style.mixin], { h }),
    },
    toParentMessage: toMessage,
  })

The recipe ↗This code ↗