This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
Elm package for a drag and drop calendar
version 1.0.0
license MIT
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 1.0.0
Committed At 2018-05-19 21:22:34 UTC
justinmimbs/elm-date-extra 3.0.0 <= v < 4.0.0 3.0.0
elm-lang/window 1.0.1 <= v < 2.0.0 1.0.1
elm-lang/mouse 1.0.1 <= v < 2.0.0 1.0.1
elm-lang/html 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/core 5.1.1 <= v < 6.0.0 5.1.1
elm-community/list-extra 7.1.0 <= v < 8.0.0 7.1.0
elm-community/elm-time 1.0.14 <= v < 2.0.0 1.0.14

README

elm-calendar

elm package install cjmeeks/elm-calendar

Description

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.calendarModel

The 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 cModel

To 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

Example

See it in action!