Calendar

[<ReactComponent>]
let CalendarTest () =
    let date, setDate = React.useState DateTime.Today
    Fui.calendar [
        calendar.showGoToToday true
        calendar.onSelectDate (fun d _ -> setDate d)
        calendar.value date
        calendar.highlightSelectedMonth true
        calendar.restrictedDates [ DateTime.Today; DateTime.Today.AddDays(1)]
        calendar.strings ({ Fui.defaultDatePickerStrings with goToToday = "Pick Me!"})
        calendar.calendarDayProps [
            calendarDay.firstDayOfWeek.saturday
            calendarDay.getMarkedDays (fun sd _ -> [|
                    Fui.addDays(sd, 3)
                    Fui.addDays(sd, 4)
                |]
            )
            calendarDay.navigationIcons [
                calendarNavigationIcons.downNavigation (Fui.icon.triangleUpFilled [])
                calendarNavigationIcons.upNavigation (Fui.icon.triangleDownFilled [])
            ]
            calendarDay.customDayCellRef (fun element dt classNames ->
                match element with
                | Some el ->
                    el.title <- $"Custom title from customDayCellRef: {dt.ToString()}"
                    // Disables Saturdays and Sundays
                    if dt.DayOfWeek = DayOfWeek.Sunday || dt.DayOfWeek = DayOfWeek.Saturday then
                        el.classList.add(classNames.dayOutsideBounds.Split(" "))
                    else
                        ()
                | None -> ()
            )
        ]
    ]