Month calendar
Display a month in full or compact form, or select a date or range.
Default
On this page
Installation
Copy this component and its required dependencies into the consumer-owned Components project.
dotnet fve add month-calendar --config src/Acme.Components/fve.jsonThe CLI resolves dependencies and preserves consumer-authored files. See Installation for project initialization and Tailwind source detection.
Usage
open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar
let private calendarDemoDate = DateOnly(2026, 9, 17)
let private calendarEventDestination id =
"/components/page-examples/scheduling?item=" + id
let defaultCalendarEvent =
CalendarEvent.create "lesson-201-default" "Coastal trail lesson" calendarDemoDate (calendarEventDestination "lesson-201-default")
let defaultMonthCalendar =
MonthCalendar.create "Coastal training month" calendarDemoDate [ defaultCalendarEvent ]
|> MonthCalendar.render idEvents and date navigation
Compact month
Single-date selection
Clearable single date
Date range
Bounds, unavailable dates and Monday start
Month and year selectors
Pending availability
API reference
type CalendarEvent<'destination>
type CalendarState =
| Ready
| Loading
| Error of string
| Unavailable of string
type MonthCalendarWeekStart =
| Sunday
| Monday
type MonthCalendarCaptionLayout =
| Label
| Dropdown
type MonthCalendarSelection =
| Single of DateOnly option
| Range of DateOnly option * DateOnly option
type MonthCalendarLayout =
| Full
| Compact
type MonthCalendarConfig<'destination>
type MonthCalendarSelectionConfig
/// Full layout reserves three event rows per day; all-day ranges keep their lane across week boundaries.
/// All-day end dates are inclusive. Overflow opens the complete day list, including continuing events.
/// Use withId for distinct stable DOM scopes when calendars share a label.
/// Form selection submits date-only values; display calendars use destination navigation.
module MonthCalendar =
val create : label:string -> date:DateOnly -> events:CalendarEvent<'destination> list -> MonthCalendarConfig<'destination>
val withId : id:string -> config:MonthCalendarConfig<'destination> -> MonthCalendarConfig<'destination>
val withLayout : layout:MonthCalendarLayout -> config:MonthCalendarConfig<'destination> -> MonthCalendarConfig<'destination>
val withPrevious : destination:'destination -> config:MonthCalendarConfig<'destination> -> MonthCalendarConfig<'destination>
val withNext : destination:'destination -> config:MonthCalendarConfig<'destination> -> MonthCalendarConfig<'destination>
val withToday : date:DateOnly -> destination:'destination -> config:MonthCalendarConfig<'destination> -> MonthCalendarConfig<'destination>
val withSelectedDate : date:DateOnly -> config:MonthCalendarConfig<'destination> -> MonthCalendarConfig<'destination>
val withDateDestination : destination:(DateOnly -> 'destination) -> config:MonthCalendarConfig<'destination> -> MonthCalendarConfig<'destination>
val withEmptyState : content:HtmlElement -> config:MonthCalendarConfig<'destination> -> MonthCalendarConfig<'destination>
val loading : config:MonthCalendarConfig<'destination> -> MonthCalendarConfig<'destination>
val withError : message:string -> config:MonthCalendarConfig<'destination> -> MonthCalendarConfig<'destination>
val withUnavailable : message:string -> config:MonthCalendarConfig<'destination> -> MonthCalendarConfig<'destination>
val withStateAction : action:HtmlElement -> config:MonthCalendarConfig<'destination> -> MonthCalendarConfig<'destination>
val render : resolve:('destination -> string) -> config:MonthCalendarConfig<'destination> -> HtmlElement
val createSelection : id:string -> label:string -> name:string -> selection:MonthCalendarSelection -> MonthCalendarSelectionConfig
val withDisplayMonth : month:DateOnly -> config:MonthCalendarSelectionConfig -> MonthCalendarSelectionConfig
val withBounds : minimum:DateOnly -> maximum:DateOnly -> config:MonthCalendarSelectionConfig -> MonthCalendarSelectionConfig
val withUnavailableDates : dates:DateOnly list -> config:MonthCalendarSelectionConfig -> MonthCalendarSelectionConfig
val withLocale : locale:string -> config:MonthCalendarSelectionConfig -> MonthCalendarSelectionConfig
val withWeekStart : weekStart:MonthCalendarWeekStart -> config:MonthCalendarSelectionConfig -> MonthCalendarSelectionConfig
val withCaptionLayout : captionLayout:MonthCalendarCaptionLayout -> config:MonthCalendarSelectionConfig -> MonthCalendarSelectionConfig
val withRangeEndName : name:string -> config:MonthCalendarSelectionConfig -> MonthCalendarSelectionConfig
val clearable : config:MonthCalendarSelectionConfig -> MonthCalendarSelectionConfig
val closeOnSelection : config:MonthCalendarSelectionConfig -> MonthCalendarSelectionConfig
val disabled : config:MonthCalendarSelectionConfig -> MonthCalendarSelectionConfig
val pending : config:MonthCalendarSelectionConfig -> MonthCalendarSelectionConfig
val withAttributes : attributes:HtmlAttribute list -> config:MonthCalendarSelectionConfig -> MonthCalendarSelectionConfig
val renderSelection : config:MonthCalendarSelectionConfig -> HtmlElement
/// create supplies a single-day all-day event. withEndDate extends it through an inclusive end date.
/// Timed events remain same-day; split overnight intervals and resolve time zones before rendering.
module CalendarEvent =
val create : id:string -> title:string -> date:DateOnly -> destination:'a -> CalendarEvent<'a>
val withEndDate : endDate:DateOnly -> event:CalendarEvent<'destination> -> CalendarEvent<'destination>
val withTime : start:TimeOnly -> finish:TimeOnly -> event:CalendarEvent<'destination> -> CalendarEvent<'destination>
val withDetail : detail:string -> event:CalendarEvent<'destination> -> CalendarEvent<'destination>