Day calendar
Display one day's events in a scrollable time grid with accessible event destinations.
Default
On this page
Installation
Copy this component and its required dependencies into the consumer-owned Components project.
dotnet fve add day-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 defaultDayCalendar =
DayCalendar.create "Coastal training day" calendarDemoDate [ defaultCalendarEvent ]
|> DayCalendar.render idOverlapping sessions
API reference
type DayCalendarConfig<'destination>
module DayCalendar =
val create : label:string -> date:DateOnly -> events:CalendarEvent<'destination> list -> DayCalendarConfig<'destination>
val withPrevious : destination:'a -> _arg1:DayCalendarConfig<'a> -> DayCalendarConfig<'a>
val withNext : destination:'a -> _arg1:DayCalendarConfig<'a> -> DayCalendarConfig<'a>
val withToday : date:DateOnly -> destination:'a -> _arg1:DayCalendarConfig<'a> -> DayCalendarConfig<'a>
val withSelectedDate : date:DateOnly -> _arg1:DayCalendarConfig<'a> -> DayCalendarConfig<'a>
val withDateDestination : destination:(DateOnly -> 'a) -> _arg1:DayCalendarConfig<'a> -> DayCalendarConfig<'a>
val withEmptyState : content:HtmlElement -> _arg1:DayCalendarConfig<'a> -> DayCalendarConfig<'a>
val loading : _arg1:DayCalendarConfig<'a> -> DayCalendarConfig<'a>
val withError : message:string -> _arg1:DayCalendarConfig<'a> -> DayCalendarConfig<'a>
val withUnavailable : message:string -> _arg1:DayCalendarConfig<'a> -> DayCalendarConfig<'a>
val withStateAction : action:HtmlElement -> _arg1:DayCalendarConfig<'a> -> DayCalendarConfig<'a>
val render : resolve:('a -> string) -> _arg1:DayCalendarConfig<'a> -> HtmlElement