{"id":15059368,"url":"https://github.com/wolfadex/elm-calendar","last_synced_at":"2025-09-09T15:37:09.984Z","repository":{"id":231789624,"uuid":"782233784","full_name":"wolfadex/elm-calendar","owner":"wolfadex","description":"A stateless calendar for viewing events or anything else that can be displayed across time.","archived":false,"fork":false,"pushed_at":"2024-04-09T19:02:22.000Z","size":290,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-12T07:09:41.893Z","etag":null,"topics":["calendar","elm"],"latest_commit_sha":null,"homepage":"https://wolfadex.github.io/elm-calendar/","language":"Elm","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wolfadex.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-04T22:28:42.000Z","updated_at":"2025-02-27T01:34:44.000Z","dependencies_parsed_at":"2024-04-06T00:25:48.866Z","dependency_job_id":"9942a15b-6403-4d07-957a-6fcdc51636fc","html_url":"https://github.com/wolfadex/elm-calendar","commit_stats":null,"previous_names":["wolfadex/elm-calendar"],"tags_count":2,"template":false,"template_full_name":"dillonkearns/elm-package-starter","purl":"pkg:github/wolfadex/elm-calendar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wolfadex%2Felm-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wolfadex%2Felm-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wolfadex%2Felm-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wolfadex%2Felm-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wolfadex","download_url":"https://codeload.github.com/wolfadex/elm-calendar/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wolfadex%2Felm-calendar/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274318810,"owners_count":25263159,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-09T02:00:10.223Z","response_time":80,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["calendar","elm"],"created_at":"2024-09-24T22:42:23.058Z","updated_at":"2025-09-09T15:37:09.860Z","avatar_url":"https://github.com/wolfadex.png","language":"Elm","funding_links":[],"categories":[],"sub_categories":[],"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)\n\nA stateless calendar for viewing events or anything else that can be displayed across time.\n\nTo get started, I want to view what my birthday month will look like in the year 3000.\n\n```elm\nimport Calendar exposing (Calendar)\nimport Date exposing (Date)\nimport Time\n\n-- We create a new `Calendar`\nCalendar.new\n    { period =\n        -- with the period we want to view\n        Date.fromCalendarDate 3000 Time.Feb 22\n    , scope =\n        -- scoped to viewing the whole month\n        Calendar.Month\n    }\n    -- I'm in the US, so I want the week to start on Sunday\n    |\u003e Calendar.withWeekStartsOn Time.Sun\n    -- and then we render it to HTML\n    |\u003e Calendar.view\n```\n\nThis is a nice start, but I think we can do better. I'd like to add some flair to my actual birthday.\n\n```elm\nimport Calendar exposing (Calendar)\nimport Date exposing (Date)\nimport Html\nimport Time\n\nCalendar.new\n    { period =\n        Date.fromCalendarDate 3000 Time.Feb 22\n    , scope =\n        Calendar.Month\n    }\n    |\u003e Calendar.withWeekStartsOn Time.Sun\n    -- Now we can customize how each day of the month is displayed\n    |\u003e Calendar.withViewDayOfMonth\n        (\\date gridPosition -\u003e\n            Html.div []\n                -- These styles are our custom style for our calendar\n                [ Html.Attributes.style \"border\" \"1px solid black\"\n                , Html.Attributes.style \"width\" \"100%\"\n                , Html.Attributes.style \"height\" \"100%\"\n                , Html.Attributes.style \"min-height\" \"4rem\"\n                , Html.Attributes.style \"padding\" \"3px\"\n\n                -- These styles help with general grid layout and will likely be used on every calendar\n                , Html.Attributes.style \"min-width\" \"0\"\n                , Html.Attributes.style \"grid-column\" (String.fromInt gridPosition.column)\n                , Html.Attributes.style \"grid-row\" (String.fromInt gridPosition.row)\n\n                , if Date.day date == 22 then\n                    -- It's my birthday, so let's add a colorful background\n                    Html.Attributes.style \"background-color\" \"aqua\"\n\n                  else\n                    -- Otherwise, just a white background\n                    Html.Attributes.style \"background-color\" \"white\"\n                ]\n                [ if Date.month date == Time.Jan then\n                    -- We might have some days from the previous month\n                    Html.text \"It's not February yet\"\n\n                  else if Date.day date \u003c 22 then\n                    -- We're getting closer\n                    Html.text (\"Only \" ++ String.fromInt (Date.day date) \" days till my birthday\")\n\n                  else if Date.day date == 22 then\n                    -- It's my birthday\n                    Html.text \"It's my birthday 🥳\"\n\n                  else\n                    -- It's after my birthday\n                    Html.text \"Gotta wait till next year\"\n                ]\n        )\n    |\u003e Calendar.view\n```\n\nTo see live examples, checkout [the live demo](https://wolfadex.github.io/elm-calendar/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwolfadex%2Felm-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwolfadex%2Felm-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwolfadex%2Felm-calendar/lists"}