Calendar
Month view
Team calendar
September 2026
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
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 calendarDemoEvents =
[ CalendarEvent.create "lesson-201" "Coastal trail lesson" calendarDemoDate (calendarEventDestination "lesson-201")
|> CalendarEvent.withTime (TimeOnly(10, 0)) (TimeOnly(11, 30))
|> CalendarEvent.withDetail "Maya and Sam · Andy Meier"
CalendarEvent.create "camp-017" "Beginner riding camp" calendarDemoDate (calendarEventDestination "camp-017")
|> CalendarEvent.withTime (TimeOnly(10, 30)) (TimeOnly(12, 0))
|> CalendarEvent.withDetail "Overlaps the trail lesson by one hour"
CalendarEvent.create "lesson-202" "Cornering fundamentals" (calendarDemoDate.AddDays 1) (calendarEventDestination "lesson-202")
|> CalendarEvent.withTime (TimeOnly(9, 0)) (TimeOnly(10, 0))
CalendarEvent.create "ride-019" "Open track practice" (calendarDemoDate.AddDays 2) (calendarEventDestination "ride-019")
|> CalendarEvent.withTime (TimeOnly(13, 0)) (TimeOnly(15, 0))
CalendarEvent.create "return-020" "Equipment return" (calendarDemoDate.AddDays 7) (calendarEventDestination "return-020")
|> CalendarEvent.withTime (TimeOnly(16, 0)) (TimeOnly(16, 30)) ]
let calendarExample view =
let label =
match view with
| CalendarView.Month -> "Team calendar"
| CalendarView.Week -> "Training week"
| CalendarView.Day -> "Thursday sessions"
| CalendarView.Year -> "Team year"
Calendar.create label view calendarDemoDate calendarDemoEvents
|> Calendar.withToday calendarDemoDate "/components/page-examples/scheduling?view=day&range=0"
|> Calendar.withSelectedDate calendarDemoDate
|> Calendar.withDateDestination (fun date ->
"/components/page-examples/scheduling?view=day&range=" + string (date.DayNumber - calendarDemoDate.DayNumber))
|> Calendar.render id
let calendarMonthExample = calendarExample CalendarView.MonthWeek view
Training week
September 14–September 20, 2026
8 AM9 AM10 AM11 AM12 PM1 PM2 PM3 PM4 PM5 PM
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
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 calendarDemoEvents =
[ CalendarEvent.create "lesson-201" "Coastal trail lesson" calendarDemoDate (calendarEventDestination "lesson-201")
|> CalendarEvent.withTime (TimeOnly(10, 0)) (TimeOnly(11, 30))
|> CalendarEvent.withDetail "Maya and Sam · Andy Meier"
CalendarEvent.create "camp-017" "Beginner riding camp" calendarDemoDate (calendarEventDestination "camp-017")
|> CalendarEvent.withTime (TimeOnly(10, 30)) (TimeOnly(12, 0))
|> CalendarEvent.withDetail "Overlaps the trail lesson by one hour"
CalendarEvent.create "lesson-202" "Cornering fundamentals" (calendarDemoDate.AddDays 1) (calendarEventDestination "lesson-202")
|> CalendarEvent.withTime (TimeOnly(9, 0)) (TimeOnly(10, 0))
CalendarEvent.create "ride-019" "Open track practice" (calendarDemoDate.AddDays 2) (calendarEventDestination "ride-019")
|> CalendarEvent.withTime (TimeOnly(13, 0)) (TimeOnly(15, 0))
CalendarEvent.create "return-020" "Equipment return" (calendarDemoDate.AddDays 7) (calendarEventDestination "return-020")
|> CalendarEvent.withTime (TimeOnly(16, 0)) (TimeOnly(16, 30)) ]
let calendarExample view =
let label =
match view with
| CalendarView.Month -> "Team calendar"
| CalendarView.Week -> "Training week"
| CalendarView.Day -> "Thursday sessions"
| CalendarView.Year -> "Team year"
Calendar.create label view calendarDemoDate calendarDemoEvents
|> Calendar.withToday calendarDemoDate "/components/page-examples/scheduling?view=day&range=0"
|> Calendar.withSelectedDate calendarDemoDate
|> Calendar.withDateDestination (fun date ->
"/components/page-examples/scheduling?view=day&range=" + string (date.DayNumber - calendarDemoDate.DayNumber))
|> Calendar.render id
let calendarWeekExample = calendarExample CalendarView.WeekDay view
Thursday sessions
Thursday, September 17, 2026
8 AM9 AM10 AM11 AM12 PM1 PM2 PM3 PM4 PM5 PM
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
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 calendarDemoEvents =
[ CalendarEvent.create "lesson-201" "Coastal trail lesson" calendarDemoDate (calendarEventDestination "lesson-201")
|> CalendarEvent.withTime (TimeOnly(10, 0)) (TimeOnly(11, 30))
|> CalendarEvent.withDetail "Maya and Sam · Andy Meier"
CalendarEvent.create "camp-017" "Beginner riding camp" calendarDemoDate (calendarEventDestination "camp-017")
|> CalendarEvent.withTime (TimeOnly(10, 30)) (TimeOnly(12, 0))
|> CalendarEvent.withDetail "Overlaps the trail lesson by one hour"
CalendarEvent.create "lesson-202" "Cornering fundamentals" (calendarDemoDate.AddDays 1) (calendarEventDestination "lesson-202")
|> CalendarEvent.withTime (TimeOnly(9, 0)) (TimeOnly(10, 0))
CalendarEvent.create "ride-019" "Open track practice" (calendarDemoDate.AddDays 2) (calendarEventDestination "ride-019")
|> CalendarEvent.withTime (TimeOnly(13, 0)) (TimeOnly(15, 0))
CalendarEvent.create "return-020" "Equipment return" (calendarDemoDate.AddDays 7) (calendarEventDestination "return-020")
|> CalendarEvent.withTime (TimeOnly(16, 0)) (TimeOnly(16, 30)) ]
let calendarExample view =
let label =
match view with
| CalendarView.Month -> "Team calendar"
| CalendarView.Week -> "Training week"
| CalendarView.Day -> "Thursday sessions"
| CalendarView.Year -> "Team year"
Calendar.create label view calendarDemoDate calendarDemoEvents
|> Calendar.withToday calendarDemoDate "/components/page-examples/scheduling?view=day&range=0"
|> Calendar.withSelectedDate calendarDemoDate
|> Calendar.withDateDestination (fun date ->
"/components/page-examples/scheduling?view=day&range=" + string (date.DayNumber - calendarDemoDate.DayNumber))
|> Calendar.render id
let calendarDayExample = calendarExample CalendarView.DayYear view
Team year
2026
January
MonTueWedThuFriSatSun
February
MonTueWedThuFriSatSun
March
MonTueWedThuFriSatSun
April
MonTueWedThuFriSatSun
May
MonTueWedThuFriSatSun
June
MonTueWedThuFriSatSun
July
MonTueWedThuFriSatSun
August
MonTueWedThuFriSatSun
September
MonTueWedThuFriSatSun
October
MonTueWedThuFriSatSun
November
MonTueWedThuFriSatSun
December
MonTueWedThuFriSatSun
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
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 calendarDemoEvents =
[ CalendarEvent.create "lesson-201" "Coastal trail lesson" calendarDemoDate (calendarEventDestination "lesson-201")
|> CalendarEvent.withTime (TimeOnly(10, 0)) (TimeOnly(11, 30))
|> CalendarEvent.withDetail "Maya and Sam · Andy Meier"
CalendarEvent.create "camp-017" "Beginner riding camp" calendarDemoDate (calendarEventDestination "camp-017")
|> CalendarEvent.withTime (TimeOnly(10, 30)) (TimeOnly(12, 0))
|> CalendarEvent.withDetail "Overlaps the trail lesson by one hour"
CalendarEvent.create "lesson-202" "Cornering fundamentals" (calendarDemoDate.AddDays 1) (calendarEventDestination "lesson-202")
|> CalendarEvent.withTime (TimeOnly(9, 0)) (TimeOnly(10, 0))
CalendarEvent.create "ride-019" "Open track practice" (calendarDemoDate.AddDays 2) (calendarEventDestination "ride-019")
|> CalendarEvent.withTime (TimeOnly(13, 0)) (TimeOnly(15, 0))
CalendarEvent.create "return-020" "Equipment return" (calendarDemoDate.AddDays 7) (calendarEventDestination "return-020")
|> CalendarEvent.withTime (TimeOnly(16, 0)) (TimeOnly(16, 30)) ]
let calendarExample view =
let label =
match view with
| CalendarView.Month -> "Team calendar"
| CalendarView.Week -> "Training week"
| CalendarView.Day -> "Thursday sessions"
| CalendarView.Year -> "Team year"
Calendar.create label view calendarDemoDate calendarDemoEvents
|> Calendar.withToday calendarDemoDate "/components/page-examples/scheduling?view=day&range=0"
|> Calendar.withSelectedDate calendarDemoDate
|> Calendar.withDateDestination (fun date ->
"/components/page-examples/scheduling?view=day&range=" + string (date.DayNumber - calendarDemoDate.DayNumber))
|> Calendar.render id
let calendarYearExample = calendarExample CalendarView.Year