elm-calendar
elm package install cjmeeks/elm-calendarDescription
(This project is a WIP) WIP elm package for an calendar that has additional features such as:
- Reordering content
- Custom Content In each day frame
- Barebones css so that user can customize everything
Usage
Also see the code examples Subscriptions - The drag and drop requires subscriptions
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.map CMsg <| Calendar.subscriptions model.calendarModelThe Calendar.initCalendarModel initializes a CalendarModel for you then you can pass in the html data to be displayed
testData : List ( ( Int, Int, Int ), MyData )
testData =
[ ( ( 2018, 6, 1 ), MyData "Test Click" 0 )
, ( ( 2018, 6, 20 ), MyData "Test Click" 0 )
]
init...
( cModel, cCmd ) =
Calendar.initCalendarModel
This maps the testData into a tuple of a provided Type CalendarDate and Html with the function viewData as the html generator
viewData : CalendarDate -> MyData -> Html Msg
viewData key data =
text data.text
init...
data =
List.map
(\( ( a, b, c ), data ) ->
( CalendarDate ( a, b, c ), viewData (CalendarDate ( a, b, c )) data )
)
testCase
Sets the initial content of the calendar with our data
calendarModel =
setDayContent data cModelTo handle custom messages in the update we first see if the message is a CustomMsg(This is a CalendarMsg) and call update on that if not we update the calendar as it is calendar msg that you do not need to handle.
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
CMsg cMsg ->
let
( updatedModel, cmds ) =
case cMsg of
CustomMsg customMsg ->
update customMsg { model | calendarModel = updatedCalendar }
_ ->
let
( updatedCalendar, cCmd ) =
Calendar.update cMsg model.calendarModel
in
{ model | calendarModel = updatedCalendar } ! []
in
( updatedModel, Cmd.batch [ Cmd.map CMsg cCmd, cmds ] )TODO
- if custom day header then have a default header for days without content
- consider just having a formatter or function
- fill other empty grid items
- Look into how to move day content forward and backward a month
- Get feedback if this would be a good feature to add or to leave it to the dev to make
