Week calendar
Display a week in seven shared time columns with horizontal and vertical scrolling.
Default
On this page
Installation
Copy this component and its required dependencies into the consumer-owned Components project.
dotnet fve add week-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 defaultWeekCalendar =
WeekCalendar.create "Coastal training week" calendarDemoDate [ defaultCalendarEvent ]
|> WeekCalendar.render idEvents and date navigation
API reference
type WeekCalendarConfig<'destination>
module WeekCalendar =
val create : label:string -> date:DateOnly -> events:CalendarEvent<'destination> list -> WeekCalendarConfig<'destination>
val withPrevious : destination:'a -> _arg1:WeekCalendarConfig<'a> -> WeekCalendarConfig<'a>
val withNext : destination:'a -> _arg1:WeekCalendarConfig<'a> -> WeekCalendarConfig<'a>
val withToday : date:DateOnly -> destination:'a -> _arg1:WeekCalendarConfig<'a> -> WeekCalendarConfig<'a>
val withSelectedDate : date:DateOnly -> _arg1:WeekCalendarConfig<'a> -> WeekCalendarConfig<'a>
val withDateDestination : destination:(DateOnly -> 'a) -> _arg1:WeekCalendarConfig<'a> -> WeekCalendarConfig<'a>
val withEmptyState : content:HtmlElement -> _arg1:WeekCalendarConfig<'a> -> WeekCalendarConfig<'a>
val loading : _arg1:WeekCalendarConfig<'a> -> WeekCalendarConfig<'a>
val withError : message:string -> _arg1:WeekCalendarConfig<'a> -> WeekCalendarConfig<'a>
val withUnavailable : message:string -> _arg1:WeekCalendarConfig<'a> -> WeekCalendarConfig<'a>
val withStateAction : action:HtmlElement -> _arg1:WeekCalendarConfig<'a> -> WeekCalendarConfig<'a>
val render : resolve:('a -> string) -> _arg1:WeekCalendarConfig<'a> -> HtmlElement