Year calendar
Survey a year through twelve responsive compact month calendars.
Default
On this page
Installation
Copy this component and its required dependencies into the consumer-owned Components project.
dotnet fve add year-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 defaultYearCalendar =
YearCalendar.create "Coastal training year" calendarDemoDate [ defaultCalendarEvent ]
|> YearCalendar.render idEvent indicators and date navigation
API reference
type YearCalendarConfig<'destination>
module YearCalendar =
val create : label:string -> date:DateOnly -> events:CalendarEvent<'destination> list -> YearCalendarConfig<'destination>
val withPrevious : destination:'a -> _arg1:YearCalendarConfig<'a> -> YearCalendarConfig<'a>
val withNext : destination:'a -> _arg1:YearCalendarConfig<'a> -> YearCalendarConfig<'a>
val withToday : date:DateOnly -> destination:'a -> _arg1:YearCalendarConfig<'a> -> YearCalendarConfig<'a>
val withSelectedDate : date:DateOnly -> _arg1:YearCalendarConfig<'a> -> YearCalendarConfig<'a>
val withDateDestination : destination:(DateOnly -> 'a) -> _arg1:YearCalendarConfig<'a> -> YearCalendarConfig<'a>
val withEmptyState : content:HtmlElement -> _arg1:YearCalendarConfig<'a> -> YearCalendarConfig<'a>
val loading : _arg1:YearCalendarConfig<'a> -> YearCalendarConfig<'a>
val withError : message:string -> _arg1:YearCalendarConfig<'a> -> YearCalendarConfig<'a>
val withUnavailable : message:string -> _arg1:YearCalendarConfig<'a> -> YearCalendarConfig<'a>
val withStateAction : action:HtmlElement -> _arg1:YearCalendarConfig<'a> -> YearCalendarConfig<'a>
val render : resolve:('a -> string) -> _arg1:YearCalendarConfig<'a> -> HtmlElement