https://github.com/wolfadex/elm-calendar

A stateless calendar for viewing events or anything else that can be displayed across time.
https://github.com/wolfadex/elm-calendar

calendar elm

Last synced: 4 months ago
JSON representation

A stateless calendar for viewing events or anything else that can be displayed across time.

• Host: GitHub
• URL: https://github.com/wolfadex/elm-calendar
• Owner: wolfadex
• License: other
• Created: 2024-04-04T22:28:42.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-04-09T19:02:22.000Z (10 months ago)
• Last Synced: 2024-09-30T10:03:18.165Z (4 months ago)
• Topics: calendar, elm
• Language: Elm
• Homepage: https://wolfadex.github.io/elm-calendar/
• Size: 283 KB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# `elm-calendar` [![Build Status](https://github.com/wolfadex/elm-calendar/workflows/CI/badge.svg)](https://github.com/wolfadex/elm-calendar/actions?query=branch%3Amain)

A stateless calendar for viewing events or anything else that can be displayed across time.

To get started, I want to view what my birthday month will look like in the year 3000.

```elm

import Calendar exposing (Calendar)

import Date exposing (Date)

import Time

-- We create a new `Calendar`

Calendar.new

    { period =

        -- with the period we want to view

        Date.fromCalendarDate 3000 Time.Feb 22

    , scope =

        -- scoped to viewing the whole month

        Calendar.Month

    }

    -- I'm in the US, so I want the week to start on Sunday

    |> Calendar.withWeekStartsOn Time.Sun

    -- and then we render it to HTML

    |> Calendar.view

```

This is a nice start, but I think we can do better. I'd like to add some flair to my actual birthday.

```elm

import Calendar exposing (Calendar)

import Date exposing (Date)

import Html

import Time

Calendar.new

    { period =

        Date.fromCalendarDate 3000 Time.Feb 22

    , scope =

        Calendar.Month

    }

    |> Calendar.withWeekStartsOn Time.Sun

    -- Now we can customize how each day of the month is displayed

    |> Calendar.withViewDayOfMonth

        (\date gridPosition ->

            Html.div []

                -- These styles are our custom style for our calendar

                [ Html.Attributes.style "border" "1px solid black"

                , Html.Attributes.style "width" "100%"

                , Html.Attributes.style "height" "100%"

                , Html.Attributes.style "min-height" "4rem"

                , Html.Attributes.style "padding" "3px"

                -- These styles help with general grid layout and will likely be used on every calendar

                , Html.Attributes.style "min-width" "0"

                , Html.Attributes.style "grid-column" (String.fromInt gridPosition.column)

                , Html.Attributes.style "grid-row" (String.fromInt gridPosition.row)

                , if Date.day date == 22 then

                    -- It's my birthday, so let's add a colorful background

                    Html.Attributes.style "background-color" "aqua"

                  else

                    -- Otherwise, just a white background

                    Html.Attributes.style "background-color" "white"

                ]

                [ if Date.month date == Time.Jan then

                    -- We might have some days from the previous month

                    Html.text "It's not February yet"

                  else if Date.day date < 22 then

                    -- We're getting closer

                    Html.text ("Only " ++ String.fromInt (Date.day date) " days till my birthday")

                  else if Date.day date == 22 then

                    -- It's my birthday

                    Html.text "It's my birthday 🥳"

                  else

                    -- It's after my birthday

                    Html.text "Gotta wait till next year"

                ]

        )

    |> Calendar.view

```

To see live examples, checkout [the live demo](https://wolfadex.github.io/elm-calendar/)