{"id":23916838,"url":"https://github.com/famouswolf/week-planner-card","last_synced_at":"2026-01-18T13:41:33.262Z","repository":{"id":227540473,"uuid":"771728766","full_name":"FamousWolf/week-planner-card","owner":"FamousWolf","description":"Custom Home Assistant card displaying a responsive overview or multiple days with events from one of multiple calendars","archived":false,"fork":false,"pushed_at":"2025-03-06T19:10:06.000Z","size":3176,"stargazers_count":359,"open_issues_count":43,"forks_count":30,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-08T18:19:14.253Z","etag":null,"topics":["calendar","home-assistant","homeassistant","homeassistant-custom-component","lovelace-card","lovelace-custom-card","planner","week-planner"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FamousWolf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":"rudygnodde","thanks_dev":null,"custom":null}},"created_at":"2024-03-13T20:53:07.000Z","updated_at":"2025-04-08T04:26:26.000Z","dependencies_parsed_at":"2024-04-05T11:33:11.025Z","dependency_job_id":"809a4ad9-ebb5-4156-89fd-a44d598f2966","html_url":"https://github.com/FamousWolf/week-planner-card","commit_stats":null,"previous_names":["famouswolf/week-planner-card"],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FamousWolf%2Fweek-planner-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FamousWolf%2Fweek-planner-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FamousWolf%2Fweek-planner-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FamousWolf%2Fweek-planner-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FamousWolf","download_url":"https://codeload.github.com/FamousWolf/week-planner-card/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254485052,"owners_count":22078767,"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","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","home-assistant","homeassistant","homeassistant-custom-component","lovelace-card","lovelace-custom-card","planner","week-planner"],"created_at":"2025-01-05T12:14:38.251Z","updated_at":"2026-01-18T13:41:33.247Z","avatar_url":"https://github.com/FamousWolf.png","language":"JavaScript","funding_links":["https://buymeacoffee.com/rudygnodde","https://www.buymeacoffee.com/rudygnodde"],"categories":[],"sub_categories":[],"readme":"# Week Planner Card\n\n![GitHub Release](https://img.shields.io/github/v/release/FamousWolf/week-planner-card)\n![GitHub Downloads (all assets, all releases)](https://img.shields.io/github/downloads/FamousWolf/week-planner-card/total)\n![GitHub commit activity](https://img.shields.io/github/commit-activity/y/FamousWolf/week-planner-card)\n![GitHub License](https://img.shields.io/github/license/FamousWolf/week-planner-card)\n[![Static Badge](https://img.shields.io/badge/-buy_me_a_tea-gray?logo=buy-me-a-coffee)](https://www.buymeacoffee.com/rudygnodde)\n\nCustom Home Assistant card displaying a responsive overview of multiple days with events from one or multiple calendars\n\n![Example Week Planner Cards](examples/card.png)\n\n## Table of Content\n\n- [Installation](#installation)\n  - [HACS (Recommended)](#hacs-recommended)\n  - [Manual](#manual)\n- [Configuration](#configuration)\n  - [Main options](#main-options)\n  - [Calendars](#calendars)\n  - [Texts](#texts)\n  - [Weather](#weather)\n- [Custom styling using cardmod](#custom-styling-using-cardmod)\n- [Examples](#examples)\n\n## Installation\n\n### HACS (Recommended)\n\n1. Make sure [HACS](https://hacs.xyz) is installed and working.\n2. Search for `week-planner-card`.\n3. Download and install using HACS.\n\n### Manual\n\n1. Download and copy `week-planner-card.js` from the [latest release](https://github.com/FamousWolf/week-planner-card/releases/latest) into your `config/www` directory.\n2. Add the resource reference to Home Assistant configuration using one of these methods:\n  - **Edit your configuration.yaml**\n    Add:\n    ```yaml\n    resources:\n      - url: /local/week-planner-card.js?version=1.13.1\n    type: module\n    ```\n  - **Using the graphical editor**\n    1. Make sure advanced mode is enabled in your user profile\n    2. Navigate to \"Settings\" -\u003e \"Dashboards\".\n    3. Click on the 3 vertical dots in the top right corner and select \"Resources\".\n    4. Click on the \"Add resource\" button in the bottom right corner.\n    5. Enter URL `/local/week-planner-card.js` and select type \"JavaScript Module\".\n    6. Restart Home Assistant.\n\n\n## Configuration\n\n### Main Options\n\n| Name                     | Type             | Default                                            | Supported options                                                                                                                           | Description                                                                            | Version |\n|--------------------------|------------------|----------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------|---------|\n| `type`                   | string           | **Required**                                       | `custom:week-planner-card`                                                                                                                  | Type of the card                                                                       | 1.0.0   |\n| `title`                  | string           | optional                                           | Any string                                                                                                                                  | Card title                                                                             | 1.6.0   |\n| `days`                   | number \\| string | 7                                                  | Any positive integer number \\| `month`                                                                                                      | The number of days to show                                                             | 1.0.0   |\n| `maxEvents`              | number           | 0                                                  | Any positive integer number                                                                                                                 | The maximum number of events to show (0 is no maximum)                                 | 1.11.0  |\n| `maxDayEvents`           | number           | 0                                                  | Any positive integer number                                                                                                                 | The maximum number of events to show per day (0 is no maximum)                         | 1.11.0  |\n| `startingDay`            | string           | `today`                                            | `today` \\| `tomorrow` \\| `yesterday` \\| `sunday` \\| `monday` \\| `tuesday` \\| `wednesday` \\| `thursday` \\| `friday` \\| `saturday` \\| `month` | Day to start with                                                                      | 1.2.0   |\n| `startingDayOffset`      | number           | 0                                                  | Any integer number                                                                                                                          | Add or subtract days from starting day                                                 | 1.7.0   |\n| `hideWeekend`            | boolean          | false                                              | `false` \\| `true`                                                                                                                           | Do not show Saturday and Sunday                                                        | 1.2.0   |\n| `noCardBackground`       | boolean          | false                                              | `false` \\| `true`                                                                                                                           | Do not show default card background and border                                         | 1.0.0   |\n| `eventBackground`        | string           | `var(--card-background-color, inherit)`            | Any CSS color                                                                                                                               | Background color of the events                                                         | 1.0.0   |\n| `compact`                | boolean          | false                                              | `false` \\| `true`                                                                                                                           | Use compact mode, decreasing several spacings and font sizes                           | 1.2.0   |\n| `updateInterval`         | number           | 60                                                 | Any positive integer number                                                                                                                 | Seconds between checks for new events                                                  | 1.0.0   |\n| `calendars`              | object list      | **Required**                                       | See [Calendars](#calendars)                                                                                                                 | Calendars shown in this card                                                           | 1.0.0   |\n| `texts`                  | object list      | {}                                                 | See [Texts](#texts)                                                                                                                         | Texts used in the card                                                                 | 1.0.0   |\n| `actions`                | object list      | {}                                                 | See [Actions](#actions)                                                                                                                     | Actions for the card                                                                   | 1.8.0   |\n| `weather`                | object           | optional                                           | See [Weather](#weather)                                                                                                                     | Configuration for optional weather forecast                                            | 1.1.0   |\n| `dayFormat`              | string           | optional                                           | See [Luxon format](https://moment.github.io/luxon/#/formatting?id=table-of-tokens)                                                          | Format of the date at the top of the day. This is not escaped, so HTML is allowed here | 1.6.0   |\n| `dateFormat`             | string           | `cccc d LLLL yyyy`                                 | See [Luxon format](https://moment.github.io/luxon/#/formatting?id=table-of-tokens)                                                          | Format of the date in event details                                                    | 1.0.0   |\n| `timeFormat`             | string           | `HH:mm`                                            | See [Luxon format](https://moment.github.io/luxon/#/formatting?id=table-of-tokens)                                                          | Format of the time                                                                     | 1.0.0   |\n| `locale`                 | string           | `en`                                               | Any locale string supported by Luxon                                                                                                        | Locale used for day and month texts                                                    | 1.1.0   |\n| `locationLink`           | string           | `https://www.google.com/maps/search/?api=1\u0026query=` | Any URL                                                                                                                                     | Link used for event location in the detail popup                                       | 1.1.0   |\n| `showTitle`              | boolean          | true                                               | `false` \\| `true`                                                                                                                           | Show event title in overview                                                           | 1.11.0  |\n| `showDescription`        | boolean          | false                                              | `false` \\| `true`                                                                                                                           | Show event description in overview                                                     | 1.11.0  |\n| `showLocation`           | boolean          | false                                              | `false` \\| `true`                                                                                                                           | Show event location in overview                                                        | 1.3.0   |\n| `hidePastEvents`         | boolean          | false                                              | `false` \\| `true`                                                                                                                           | Do not show past events                                                                | 1.3.0   |\n| `hideDaysWithoutEvents`  | boolean          | false                                              | `false` \\| `true`                                                                                                                           | Do not show days without events, except for today                                      | 1.4.0   |\n| `hideTodayWithoutEvents` | boolean          | false                                              | `false` \\| `true`                                                                                                                           | Also do not show today without events if `hideDaysWithoutEvents` is set                | 1.8.0   |\n| `filter`                 | string           | optional                                           | Any regular expression                                                                                                                      | Remove events that match the regular expression                                        | 1.7.0   |\n| `filterText`             | string           | optional                                           | Any regular expression                                                                                                                      | Remove text from events                                                                | 1.10.0  |\n| `replaceTitleText`       | object           | optional                                           | See [Replace title text](#replace-title-text)                                                                                               | Replace title text                                                                     | 1.12.0  |\n| `combineSimilarEvents`   | boolean          | false                                              | `false` \\| `true`                                                                                                                           | Combine events with the same start date/time, end date/time and title                  | 1.9.0   |\n| `showLegend`             | boolean          | false                                              | `false` \\| `true`                                                                                                                           | Show calendar legend                                                                   | 1.7.0   |\n| `legendToggle`           | boolean          | false                                              | `false` \\| `true`                                                                                                                           | Toggle calendars by clicking on the legend                                             | 1.11.0  |\n| `columns`                | object           | optional                                           | See [Columns](#columns)                                                                                                                     | Configuration to override the number of columns                                        | 1.11.0  |\n| `showNavigation`         | boolean          | false                                              | `false` \\| `true`                                                                                                                           | Show navigational arrows to traverse additional dates on calendar.                     | 1.12.0  |\n| `showWeekDayText`        | boolean          | false                                              | `false` \\| `true`                                                                                                                           | Display the weekday in a header instead of individual days when days \u003e=7               | 1.13.0  |\n\n**Note regarding Month View:**\nWhen `days` is set to `month` and `startingDay` is configured as a specific weekday (e.g., `monday` to `sunday`), the calendar will align the display with the specified starting day of the week. In this mode, days falling outside the current month will be excluded from the view.\n\n### Calendars\n\n| Name               | Type    | Default      | Supported options                             | Description                                            | Version |\n|--------------------|---------|--------------|-----------------------------------------------|--------------------------------------------------------|---------|\n| `entity`           | string  | **Required** | `calendar.my_calendar`                        | Entity ID                                              | 1.0.0   |\n| `name`             | string  | optional     | Any text                                      | Name of the calendar                                   | 1.7.0   |\n| `color`            | string  | optional     | Any CSS color                                 | Color used for events from the calendar                | 1.0.0   |\n| `icon`             | string  | optional     | Any icon                                      | Icon used for events from the calendar                 | 1.10.0  |\n| `eventTitleField`  | string  | optional     | Any text                                      | Name of the title field for events (usually `summary`) | 1.11.0  |\n| `filter`           | string  | optional     | Any regular expression                        | Remove events that match the regular expression        | 1.8.0   |\n| `filterText`       | string  | optional     | Any regular expression                        | Remove text from events                                | 1.10.0  |\n| `replaceTitleText` | object  | optional     | See [Replace title text](#replace-title-text) | Replace title text                                     | 1.12.0  |\n| `hideInLegend`     | boolean | false        | `false` \\| `true`                             | Do not show the calendar in the legend                 | 1.8.0   |\n| `initiallyHidden`  | boolean | false        | `false` \\| `true`                             | Initially hide the calendar                            | 1.13.0  |\n\n### Texts\n\n| Name         | Type   | Default                           | Supported options | Description                                                                     | Version |\n|--------------|--------|-----------------------------------|-------------------|---------------------------------------------------------------------------------|---------|\n| `fullDay`    | string | `Entire day`                      | Any text          | Text shown for full day events instead of time                                  | 1.0.0   |\n| `noEvents`   | string | `No events`                       | Any text          | Text shown when there are no events for a day                                   | 1.0.0   |\n| `moreEvents` | string | `More events`                     | Any text          | Text shown when there are more events for a day                                 | 1.11.0  |\n| `today`      | string | `Today`                           | Any text          | Text shown for today instead of the week day. Set to empty to show week day     | 1.0.0   |\n| `tomorrow`   | string | `Tomorrow`                        | Any text          | Text shown for tomorrow instead of the week day. Set to empty to show week day  | 1.0.0   |\n| `yesterday`  | string | `Yesterday`                       | Any text          | Text shown for yesterday instead of the week day. Set to empty to show week day | 1.2.0   |\n| `sunday`     | string | Name of Sunday based on locale    | Any text          | Text used to override Sundays                                                   | 1.1.0   |\n| `monday`     | string | Name of Monday based on locale    | Any text          | Text used to override Mondays                                                   | 1.1.0   |\n| `tuesday`    | string | Name of Tuesday based on locale   | Any text          | Text used to override Tuesdays                                                  | 1.1.0   |\n| `wednesday`  | string | Name of Wednesday based on locale | Any text          | Text used to override Wednesdays                                                | 1.1.0   |\n| `thursday`   | string | Name of Thursday based on locale  | Any text          | Text used to override Thursdays                                                 | 1.1.0   |\n| `friday`     | string | Name of Friday based on locale    | Any text          | Text used to override Fridays                                                   | 1.1.0   |\n| `saturday`   | string | Name of Saturday based on locale  | Any text          | Text used to override Saturdays                                                 | 1.1.0   |\n\n### Actions\nSee [Actions documentation](https://www.home-assistant.io/dashboards/actions/). Currently only the tap action is supported.\n\n### Weather\n\n| Name                 | Type    | Default      | Supported options            | Description                                                                    | Version |\n|----------------------|---------|--------------|------------------------------|--------------------------------------------------------------------------------|---------|\n| `entity`             | string  | **Required** | `weather.my_weather_service` | Entity ID                                                                      | 1.1.0   |\n| `useTwiceDaily`      | boolean | false        | `false` \\| `true`            | Use twice daily forecast if your weather entity doesn't support daily forecast | 1.9.0   |\n| `showCondition`      | boolean | true         | `false` \\| `true`            | Show condition icon                                                            | 1.1.0   |\n| `showTemperature`    | boolean | false        | `false` \\| `true`            | Show temperature                                                               | 1.1.0   |\n| `showLowTemperature` | boolean | false        | `false` \\| `true`            | Show low temperature                                                           | 1.1.0   |\n\n### Columns\nBy default, the columns are based on the width of the card. You can use these settings to override the default number of columns.\n\n| Name         | Type    | Default  | Supported options   | Description                                             | Version |\n|--------------|---------|----------|---------------------|---------------------------------------------------------|---------|\n| `extraLarge` | number  | optional | Any positive number | Number of columns when the card width is \u003e= 1920 pixels | 1.11.0  |\n| `large`      | number  | optional | Any positive number | Number of columns when the card width is \u003e= 1280 pixels | 1.11.0  |\n| `medium`     | number  | optional | Any positive number | Number of columns when the card width is \u003e= 1024 pixels | 1.11.0  |\n| `small`      | number  | optional | Any positive number | Number of columns when the card width is \u003e= 640 pixels  | 1.11.0  |\n| `extraSmall` | number  | optional | Any positive number | Number of columns when the card width is \u003c 640 pixels   | 1.11.0  |\n\n### Replace title text\n\nYou can replace text in the title. For example:\n\n```yaml\nreplaceTitleText:\n  \"Search text\": \"Replace text\"\n  \"Foo\": \"Bar\"\n```\n\nThis will replace the text \"Search text\" with \"Replace text\" and \"Foo\" with \"Bar\". This option is not available in the visual editor.\n\n## Custom styling using cardmod\n\nLike with most cards, you can add custom styling to this card using [card_mod](https://github.com/thomasloven/lovelace-card-mod). To make it easier to add custom styles to days and/or events, there are several classes that days and events can have. Additionally, there are data attributes you can use in CSS selectors.\n\n### Day classes\n\n| Class       | Description        | Version |\n|-------------|--------------------|---------|\n| `today`     | The current day    | 1.5.0   |\n| `tomorrow`  | The next day       | 1.5.0   |\n| `yesterday` | The previous day   | 1.5.0   |\n| `future`    | Day in the future  | 1.5.0   |\n| `past`      | Day in the past    | 1.5.0   |\n| `sunday`    | Day is a sunday    | 1.6.0   |\n| `monday`    | Day is a monday    | 1.6.0   |\n| `tuesday`   | Day is a tuesday   | 1.6.0   |\n| `wednesday` | Day is a wednesday | 1.6.0   |\n| `thursday`  | Day is a thursday  | 1.6.0   |\n| `friday`    | Day is a friday    | 1.6.0   |\n| `saturday`  | Day is a saturday  | 1.6.0   |\n\n### Day data attributes\n\n| Data attribute | Description        | Version |\n|----------------|--------------------|---------|\n| `data-date`    | The day number     | 1.7.0   |\n| `data-weekday` | The weekday number | 1.7.0   |\n| `data-month`   | The month number   | 1.7.0   |\n| `data-year`    | The year           | 1.7.0   |\n| `data-week`    | The week number    | 1.7.0   |\n\n\n### Event classes\n\n| Class     | Description              | Version |\n|-----------|--------------------------|---------|\n| `fullday` | Event lasts the full day | 1.5.0   |\n| `ongoing` | Currently ongoing        | 1.5.0   |\n| `future`  | Event in the future      | 1.5.0   |\n| `past`    | Event in the past        | 1.5.0   |\n\n### Event data attributes\n\n| Data attribute             | Description                                                     | Version |\n|----------------------------|-----------------------------------------------------------------|---------|\n| `data-entity`              | The calendar entity                                             | 1.6.0   |\n| `data-additional-entities` | Comma-separated list of additional entities for combined events | 1.9.0   |\n| `data-summary`             | The event title                                                 | 1.9.0   |\n| `data-location`            | The event location                                              | 1.9.0   |\n| `data-start-hour`          | The event start hour                                            | 1.9.0   |\n| `data-start-minute`        | The event start minute                                          | 1.9.0   |\n| `data-end-hour`            | The event end hour                                              | 1.9.0   |\n| `data-end-minute`          | The event end minute                                            | 1.9.0   |\n\n## Examples\n\n### Minimal\n\n```yaml\ntype: custom:week-planner-card\ncalendars:\n  - entity: calendar.my_calendar_1\n```\n\n### Extended\n\n```yaml\ntype: custom:week-planner-card\ncalendars:\n  - entity: calendar.my_calendar_1\n    color: '#e6c229'\n  - entity: calendar.my_calendar_2\n    color: '#1a8fe3'\nweather:\n  entity: weather.my_weather_service\n  showTemperature: true\n  showLowTemperature: true\ndays: 14\nnoCardBackground: true\neventBackground: rgba(0, 0, 0, .75)\nlocationLink: https://www.openstreetmap.org/search?query=\nlocale: nl\ntexts:\n  noEvents: Geen activiteiten\n  fullDay: Hele dag\n  today: Vandaag\n  tomorrow: Morgen\n```\n\n### Starting on Sunday\n\n```yaml\ntype: custom:week-planner-card\ncalendars:\n  - entity: calendar.my_calendar_1\n    color: '#e6c229'\n  - entity: calendar.my_calendar_2\n    color: '#1a8fe3'\nstartingDay: sunday\ntexts:\n  today: ''\n  tomorrow: ''\n  yesterday: ''\n```\n\n### Past events transparent with card_mod\n\n```yaml\ntype: custom:week-planner-card\ncalendars:\n  - entity: calendar.my_calendar_1\n    color: '#e6c229'\n  - entity: calendar.my_calendar_2\n    color: '#1a8fe3'\ncard_mod:\n  style: |\n    .event.past {\n      opacity: .3;\n    }\n```\n\n### Highlight Today with card_mod\n\n```yaml\ntype: custom:week-planner-card\ncalendars:\n  - entity: calendar.my_calendar_1\n    color: '#e6c229'\n  - entity: calendar.my_calendar_2\n    color: '#1a8fe3'\ncard_mod:\n  style: |\n    .day.today {\n      box-sizing: border-box;\n      border: 2px solid #00ffff;\n      border-radius: 6px;\n      box-shadow: inset 0 0 5px #00ffff;\n      margin: 2px;\n    }\n```\n\n### Custom event style based on title text with card_mod\n\nThis will style events with `Word1` as part of the title or `Word2` as the exact title with a red background.\n\n```yaml\ntype: custom:week-planner-card\ncalendars:\n  - entity: calendar.my_calendar_1\n  - color: #e6c229\ncard_mod:\n  style: |\n    .event[data-summary~=\"Word1\"],\n    .event[data-summary=\"Word2\"] {\n      background-color: #ff0000 !important;\n    }\n```\n\n### Show entire current month\n\n```yaml\ntype: custom:week-planner-card\ncalendars:\n  - entity: calendar.my_calendar_1\ndays: month\nstartingDay: month\n```\n\n### Show month with each day\n\n```yaml\ntype: custom:week-planner-card\ncalendars:\n  - calendar.my_calendar_1\ndayFormat: '''\u003cspan class=\"number\"\u003e''d''\u003c/span\u003e \u003cspan class=\"month\"\u003e''MMMM''\u003c/span\u003e'''\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffamouswolf%2Fweek-planner-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffamouswolf%2Fweek-planner-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffamouswolf%2Fweek-planner-card/lists"}