A stateless calendar for viewing events or anything else that can be displayed across time.
An opaque type that holds the configuration for rendering the calendar.
new : { period : Date, scope : Scope } -> Config msg
Start building up a new calendar. The period
tells us
what year, month, and day we are looking at. The scope
tells
us which "zoom" level to render the data at.
Calendar.new
{ period = Date.fromCalendarDate 2024 Time.Feb 22
, scope = Calendar.Month
}
|> Calendar.view
Used to describe the "zoom" level of the date data being rendered.
view : Config msg -> Html msg
Renders your Config
to Html
.
If you want to customize the rendering,use one of the various withView...
functions.
Calendar.new
{ period = Date.fromCalendarDate 2024 Time.Feb 22
, scope = Calendar.Month
}
|> Calendar.view
withWeekStartsOn : Time.Weekday -> Config msg -> Config msg
By default this the week starts on Monday. Use this function to change it to another day.
Calendar.new
{ period = Date.fromCalendarDate 2022 Time.Feb 22
, scope = Calendar.Month
}
|> Calendar.withWeekStartsOn Time.Sun
|> Calendar.view
with24HourTime : Config msg -> Config msg
Instead of AM & PM display times in 24-hour format.
Calendar.new
{ period = Date.fromCalendarDate 2022 Time.Feb 22
, scope = Calendar.Month
}
|> Calendar.with24HourTime
|> Calendar.view
withViewDayOfMonth : ({ column : Basics.Int, row : Basics.Int } -> Date -> Html msg) -> Config msg -> Config msg
Override the default rendering of the day of the month, for the Month
scope.
Calendar.new
{ period = Date.fromCalendarDate 2024 Time.Feb 22
, scope = Calendar.Month
}
|> Calendar.withViewDayOfMonth
(\date ->
Html.text
(String.fromInt (Date.day date))
)
|> Calendar.view
withViewDayOfMonthOfYear : (Time.Month -> Date -> Html msg) -> Config msg -> Config msg
Override the default rendering of the day of the month, for the Year
scope.
Calendar.new
{ period = Date.fromCalendarDate 2024 Time.Feb 22
, scope = Calendar.Month
}
|> Calendar.withViewDayOfMonthOfYear
(\month date ->
Html.text
(String.fromInt (Date.day date))
)
|> Calendar.view
withViewWeekdayHeader : (Basics.Int -> Time.Weekday -> Html msg) -> Config msg -> Config msg
Override the default rendering of the weekday header of the month.
Calendar.new
{ period = Date.fromCalendarDate 2024 Time.Feb 22
, scope = Calendar.Month
}
|> Calendar.withViewWeekdayHeader
(\weekday ->
Html.text <|
case weekday of
Time.Mon ->
"M"
Time.Tue ->
"T"
Time.Wed ->
"W"
Time.Thu ->
"T"
Time.Fri ->
"F"
Time.Sat ->
"S"
Time.Sun ->
"S"
)
|> Calendar.view
withViewMonthHeader : (Time.Month -> Html msg) -> Config msg -> Config msg
Override the default rendering of the month header, for the Year
scope.
Calendar.new
{ period = Date.fromCalendarDate 2024 Time.Feb 22
, scope = Calendar.Month
}
|> Calendar.withViewMonthHeader
(\month ->
case month of
Time.Jan ->
Html.text "Jan"
Time.Feb ->
Html.text "Feb"
...
)
|> Calendar.view
withViewDayHeader : (Time.Weekday -> Html msg) -> Config msg -> Config msg
Override the default rendering of the day header, for the Day
scope.
Calendar.new
{ period = Date.fromCalendarDate 2024 Time.Feb 22
, scope = Calendar.Month
}
|> Calendar.withViewDayHeader
(\weekday ->
Html.text <|
case weekday of
Time.Mon ->
"Monday"
Time.Tue ->
"Tuesday"
Time.Wed ->
"Wednesday"
Time.Thu ->
"Thursday"
Time.Fri ->
"Friday"
Time.Sat ->
"Saturday"
Time.Sun ->
"Sunday"
)
|> Calendar.view
withViewDayOfWeekHeader : (Date -> Html msg) -> Config msg -> Config msg
Override the default rendering of the day header, for the Week
scope.
Calendar.new
{ period = Date.fromCalendarDate 2024 Time.Feb 22
, scope = Calendar.Month
}
|> Calendar.withViewDayOfWeekHeader
(\date ->
date
|> Date.day
|> String.fromInt
|> Html.text
)
|> Calendar.view
withViewMultiDayEvent : List ( String, Html msg ) -> Config msg -> Config msg
Allows for placing things like multi-day events on the calendar, spaning across multiple grid cells.
Calendar.new
{ period = Date.fromCalendarDate 2024 Time.Feb 22
, scope = Calendar.Month
}
|> Calendar.withViewMultiDayEvent
[-- Your custom event rendering here
]
|> Calendar.view
weekBounds : Time.Weekday -> Date -> ( Date, Date )
Get the first and last day of the week that the given date is in, relative to the start day of the week.
import Date
import Time
Calendar.weekBounds Time.Sun (Date.fromCalendarDate 2024 Time.Apr 1)
--> (Date.fromCalendarDate 2024 Time.Mar 31, Date.fromCalendarDate 2024 Time.Apr 6)
calendarMonthBounds : Time.Weekday -> Date -> ( Date, Date )
Get the first and last day of the calendar month that the given date is in. E.g. in April 2024 the 1st is on a Monday and the 30th is on a Tuesday. If the first day of the week is Sunday then the start date will be 2024-03-31 and the end date will be 2024-05-04.
import Date
import Time
Calendar.calendarMonthBounds Time.Sun (Date.fromCalendarDate 2024 Time.Apr 1)
--> ( Date.fromCalendarDate 2024 Time.Mar 31, Date.fromCalendarDate 2024 Time.May 4 )
toRowAndColumn : Time.Weekday -> Date -> { column : Basics.Int, row : Basics.Int }
Get the row and column of the given date in a calendar month view. Useful for placing content in the calendar grid.
import Date
import Time
Calendar.toRowAndColumn Time.Sun (Date.fromCalendarDate 2024 Time.Apr 15)
--> { row = 4, column = 2 }