From 0c7e69858f4e354e4ee21e69bcccb6a7d0c269f0 Mon Sep 17 00:00:00 2001 From: Rudy Gnodde Date: Thu, 27 Jun 2024 16:31:42 +0200 Subject: [PATCH 01/11] [TASK] Add action to only allow PRs for main branch from dev branch --- .github/workflows/protectmainbranch.yml | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/.github/workflows/protectmainbranch.yml b/.github/workflows/protectmainbranch.yml index 67035eb..6e78f46 100644 --- a/.github/workflows/protectmainbranch.yml +++ b/.github/workflows/protectmainbranch.yml @@ -2,8 +2,6 @@ name: 'Protect main branch' on: pull_request: - branches: - - main jobs: check_origin_branch: @@ -13,4 +11,4 @@ jobs: if: github.base_ref == 'main' && github.head_ref != 'dev' run: | echo "ERROR: You can only merge to main from dev." - exit 1 \ No newline at end of file + exit 1 From b7db639f2905145e8b8ba88e23619dacea0a24ee Mon Sep 17 00:00:00 2001 From: Rudy Gnodde Date: Sun, 1 Sep 2024 16:58:20 +0200 Subject: [PATCH 02/11] [FEATURE] Add data attributes for date parts This adds `data-date`, `data-weekday`, `data-month`, `data-year` and `data-week` attributes to the day container tag. It can be used for custom styling. Resolves: #116 --- src/card.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/card.js b/src/card.js index 974d048..596409d 100644 --- a/src/card.js +++ b/src/card.js @@ -219,14 +219,13 @@ export class WeekPlannerCard extends LitElement { if (this._hideDaysWithoutEvents && day.events.length === 0 && !this._isToday(day.date)) { return html``; } - return html` -
+
${this._dayFormat ? - unsafeHTML(day.date.toFormat(this._dayFormat)) : - html` - ${day.date.day} + unsafeHTML(day.date.toFormat(this._dayFormat)) : + html` + ${day.date.day} ${this._getWeekDayText(day.date)} ` } From 99ba8258d7885099d2a61ae768e9c42c3e131fec Mon Sep 17 00:00:00 2001 From: Rudy Date: Sun, 1 Sep 2024 17:09:27 +0200 Subject: [PATCH 03/11] [FEATURE] Add event filter This adds an option `filter` to filter out any event that matches a regular expression Resolves: #67 --- README.md | 1 + src/card.js | 13 +++++++++++++ 2 files changed, 14 insertions(+) diff --git a/README.md b/README.md index 44c6e27..50dbb09 100644 --- a/README.md +++ b/README.md @@ -75,6 +75,7 @@ Custom Home Assistant card displaying a responsive overview of multiple days wit | `showLocation` | boolean | false | `false` \| `true` | Show event location in overview | 1.3.0 | | `hidePastEvents` | boolean | false | `false` \| `true` | Do not show past events | 1.3.0 | | `hideDaysWithoutEvents` | boolean | false | `false` \| `true` | Do not show days without events, except for today | 1.4.0 | +| `filter` | string | optional | Any regular expression | Remove events that match the regular expression | 1.7.0 | ### Calendars diff --git a/src/card.js b/src/card.js index 596409d..fdc68af 100644 --- a/src/card.js +++ b/src/card.js @@ -119,6 +119,7 @@ export class WeekPlannerCard extends LitElement { this._showLocation = config.showLocation ?? false; this._hidePastEvents = config.hidePastEvents ?? false; this._hideDaysWithoutEvents = config.hideDaysWithoutEvents ?? false; + this._filter = config.filter ?? false; if (config.locale) { LuxonSettings.defaultLocale = config.locale; } @@ -463,6 +464,10 @@ export class WeekPlannerCard extends LitElement { 'calendars/' + calendar.entity + '?start=' + encodeURIComponent(startDate.toISO()) + '&end=' + encodeURIComponent(endDate.toISO()) ).then(response => { response.forEach(event => { + if (this._isFilterEvent(event)) { + return; + } + let startDate = this._convertApiDate(event.start); let endDate = this._convertApiDate(event.end); if (this._hidePastEvents && endDate < now) { @@ -502,6 +507,14 @@ export class WeekPlannerCard extends LitElement { this._loading--; } + _isFilterEvent(event) { + if (!this._filter) { + return false; + } + + return event.summary.match(this._filter); + } + _addEvent(event, startDate, endDate, fullDay, calendar) { if (this._hideWeekend && startDate.weekday >= 6) { return; From 1d780e81b08024d30bb72e611d74e162a2bf4bdc Mon Sep 17 00:00:00 2001 From: Rudy Gnodde Date: Mon, 2 Sep 2024 13:54:06 +0200 Subject: [PATCH 04/11] [FEATURE] Add option to add or subtract days from the starting date This can be used to for example show last week by setting `startingDayOffset: -7`. Resolves: #111 --- README.md | 1 + src/card.js | 8 ++++++++ 2 files changed, 9 insertions(+) diff --git a/README.md b/README.md index 50dbb09..1a2a033 100644 --- a/README.md +++ b/README.md @@ -59,6 +59,7 @@ Custom Home Assistant card displaying a responsive overview of multiple days wit | `title` | string | optional | Any string | Card title | 1.6.0 | | `days` | number \| string | 7 | Any positive integer number \| `month` | The number of days to show | 1.0.0 | | `startingDay` | string | `today` | `today` \| `tomorrow` \| `yesterday` \| `sunday` \| `monday` \| `tuesday` \| `wednesday` \| `thursday` \| `friday` \| `saturday` \| `month` | Day to start with | 1.2.0 | +| `startingDayOffset` | number | 0 | Any integer number | Add or subtract days from starting day | 1.7.0 | | `hideWeekend` | boolean | false | `false` \| `true` | Do not show Saturday and Sunday | 1.2.0 | | `noCardBackground` | boolean | false | `false` \| `true` | Do not show default card background and border | 1.0.0 | | `eventBackground` | string | `var(--card-background-color, inherit)` | Any CSS color | Background color of the events | 1.0.0 | diff --git a/src/card.js b/src/card.js index fdc68af..c93763e 100644 --- a/src/card.js +++ b/src/card.js @@ -69,10 +69,13 @@ export class WeekPlannerCard extends LitElement { _locationLink; _startDate; _hideWeekend; + _startingDay; + _startingDayOffset; _weatherForecast = null; _showLocation; _hidePastEvents; _hideDaysWithoutEvents; + _filter; /** * Get properties @@ -107,6 +110,7 @@ export class WeekPlannerCard extends LitElement { this._numberOfDays = this._getNumberOfDays(config.days ?? 7); this._hideWeekend = config.hideWeekend ?? false; this._startingDay = config.startingDay ?? 'today'; + this._startingDayOffset = config.startingDayOffset ?? 0; this._startDate = this._getStartDate(); this._updateInterval = config.updateInterval ?? 60; this._noCardBackground = config.noCardBackground ?? false; @@ -734,6 +738,10 @@ export class WeekPlannerCard extends LitElement { break; } + if (this._startingDayOffset !== 0) { + startDate = startDate.plus({ days: this._startingDayOffset }); + } + if (this._hideWeekend && startDate.weekday >= 6) { startDate = this._getStartDate('monday'); } From 2c279b20e86fbb7ba13e47047b18ea2949cb8cb0 Mon Sep 17 00:00:00 2001 From: Rudy Date: Mon, 2 Sep 2024 14:22:19 +0200 Subject: [PATCH 05/11] [FEATURE] Add option to show legend This adds a `showLegend` option to show a calendar legend at the top of the card. It is turned off by default. Resolves: #107 --- README.md | 9 +++++---- src/card.js | 21 +++++++++++++++++++++ src/card.styles.js | 26 ++++++++++++++++++++++++++ 3 files changed, 52 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 1a2a033..36483c7 100644 --- a/README.md +++ b/README.md @@ -80,10 +80,11 @@ Custom Home Assistant card displaying a responsive overview of multiple days wit ### Calendars -| Name | Type | Default | Supported options | Description | Version | -|----------------|-------------|--------------|-------------------------------------|------------------------------------------------------|---------| -| `entity` | string | **Required** | `calendar.my_calendar` | Entity ID | 1.0.0 | -| `color` | string | optional | Any CSS color | Color used for events from the calendar | 1.0.0 | +| Name | Type | Default | Supported options | Description | Version | +|----------|--------|--------------|------------------------|-----------------------------------------|---------| +| `entity` | string | **Required** | `calendar.my_calendar` | Entity ID | 1.0.0 | +| `name` | string | optional | Any text | Name of the calendar | 1.7.0 | +| `color` | string | optional | Any CSS color | Color used for events from the calendar | 1.0.0 | ### Texts diff --git a/src/card.js b/src/card.js index c93763e..d09893d 100644 --- a/src/card.js +++ b/src/card.js @@ -76,6 +76,7 @@ export class WeekPlannerCard extends LitElement { _hidePastEvents; _hideDaysWithoutEvents; _filter; + _showLegend; /** * Get properties @@ -124,6 +125,7 @@ export class WeekPlannerCard extends LitElement { this._hidePastEvents = config.hidePastEvents ?? false; this._hideDaysWithoutEvents = config.hideDaysWithoutEvents ?? false; this._filter = config.filter ?? false; + this._showLegend = config.showLegend ?? false; if (config.locale) { LuxonSettings.defaultLocale = config.locale; } @@ -202,6 +204,7 @@ export class WeekPlannerCard extends LitElement { '' }
+ ${this._renderLegend()} ${this._renderDays()}
${this._renderEventDetailsDialog()} @@ -214,6 +217,24 @@ export class WeekPlannerCard extends LitElement { `; } + _renderLegend() { + if (!this._showLegend) { + return html``; + } + + return html` +
+
    + ${this._calendars.map((calendar) => { + return html` +
  • ${calendar.name ?? calendar.entity}
    • + `; + })} +
+
+ `; + } + _renderDays() { if (!this._days) { return html``; diff --git a/src/card.styles.js b/src/card.styles.js index 5e6a5a3..28a9e0f 100644 --- a/src/card.styles.js +++ b/src/card.styles.js @@ -2,6 +2,8 @@ import { css } from 'lit'; export default css` ha-card { + --legend-spacing: 15px; + --legend-dot-size: 10px; --days-spacing: 15px; --day-date-number-font-size: 3.5em; --day-date-number-line-height: 1.2em; @@ -46,6 +48,30 @@ export default css` flex-wrap: wrap; gap: var(--days-spacing); } + + .container .legend ul { + display: flex; + flex-wrap: wrap; + gap: var(--legend-spacing); + margin: 0; + padding: 0; + list-style: none; + } + + .container .legend ul li { + display: block; + } + + .container .legend ul li:before { + content: ''; + display: inline-block; + width: var(--legend-dot-size); + height: var(--legend-dot-size); + background-color: var(--legend-calendar-color, var(--divider-color, #ffffff)); + border-radius: 50%; + margin: 0 5px 0 0; + vertical-align: middle; + } .container .day { position: relative; From 38babe74275f948504affacad7888b9e8340df58 Mon Sep 17 00:00:00 2001 From: Rudy Date: Mon, 2 Sep 2024 14:38:31 +0200 Subject: [PATCH 06/11] [FEATURE] Make sure events with the same starting date are sorted by calendar This prevents events with the same start time from jumping around when calendars are (re)loaded Resolves: #74 --- src/card.js | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/src/card.js b/src/card.js index d09893d..a262db9 100644 --- a/src/card.js +++ b/src/card.js @@ -482,7 +482,9 @@ export class WeekPlannerCard extends LitElement { this._subscribeToWeatherForecast(); } + let calendarNumber = 0; this._calendars.forEach(calendar => { + let calendarSorting = calendarNumber; this._loading++; this.hass.callApi( 'get', @@ -501,9 +503,9 @@ export class WeekPlannerCard extends LitElement { let fullDay = this._isFullDay(startDate, endDate); if (!fullDay && !this._isSameDay(startDate, endDate)) { - this._handleMultiDayEvent(event, startDate, endDate, calendar); + this._handleMultiDayEvent(event, startDate, endDate, calendar, calendarSorting); } else { - this._addEvent(event, startDate, endDate, fullDay, calendar); + this._addEvent(event, startDate, endDate, fullDay, calendar, calendarSorting); } }); @@ -513,6 +515,7 @@ export class WeekPlannerCard extends LitElement { this._loading = 0; throw new Error(this._error); }); + calendarNumber++; }); let checkLoading = window.setInterval(() => { @@ -540,7 +543,7 @@ export class WeekPlannerCard extends LitElement { return event.summary.match(this._filter); } - _addEvent(event, startDate, endDate, fullDay, calendar) { + _addEvent(event, startDate, endDate, fullDay, calendar, calendarSorting) { if (this._hideWeekend && startDate.weekday >= 6) { return; } @@ -561,6 +564,7 @@ export class WeekPlannerCard extends LitElement { fullDay: fullDay, color: calendar.color ?? 'inherit', calendar: calendar.entity, + calendarSorting: calendarSorting, class: this._getEventClass(startDate, endDate, fullDay) }); } @@ -612,13 +616,13 @@ export class WeekPlannerCard extends LitElement { return classes.join(' '); } - _handleMultiDayEvent(event, startDate, endDate, calendar) { + _handleMultiDayEvent(event, startDate, endDate, calendar, calendarSorting) { while (startDate < endDate) { let eventStartDate = startDate; startDate = startDate.plus({ days: 1 }).startOf('day'); let eventEndDate = startDate < endDate ? startDate : endDate; - this._addEvent(event, eventStartDate, eventEndDate, this._isFullDay(eventStartDate, eventEndDate), calendar); + this._addEvent(event, eventStartDate, eventEndDate, this._isFullDay(eventStartDate, eventEndDate), calendar, calendarSorting); } } @@ -647,7 +651,11 @@ export class WeekPlannerCard extends LitElement { const dateKey = startDate.toISODate(); if (this._events.hasOwnProperty(dateKey)) { events = this._events[dateKey].sort((event1, event2) => { - return event1.start > event2.start ? 1 : (event1.start < event2.start) ? -1 : 0; + if (event1.start === event2.start) { + return event1.calendarSorting < event2.calendarSorting ? 1 : (event1.calendarSorting > event2.calendarSorting) ? -1 : 0; + } + + return event1.start > event2.start ? 1 : -1; }); } From 07ee0a09a6a0c42b1214670535b845ef825f6ff2 Mon Sep 17 00:00:00 2001 From: Rudy Date: Mon, 2 Sep 2024 14:47:11 +0200 Subject: [PATCH 07/11] [TASK] Increase version to 1.7.0 --- README.md | 2 +- package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 36483c7..d1534bd 100644 --- a/README.md +++ b/README.md @@ -39,7 +39,7 @@ Custom Home Assistant card displaying a responsive overview of multiple days wit Add: ```yaml resources: - - url: /local/week-planner-card.js?version=1.6.0 + - url: /local/week-planner-card.js?version=1.7.0 type: module ``` - **Using the graphical editor** diff --git a/package-lock.json b/package-lock.json index a146e50..28a8174 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "week-planner-card", - "version": "1.6.0", + "version": "1.7.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "week-planner-card", - "version": "1.6.0", + "version": "1.7.0", "dependencies": { "lit": "^3.1.2", "luxon": "^3.4.4" diff --git a/package.json b/package.json index 308e981..9525580 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "week-planner-card", - "version": "1.6.0", + "version": "1.7.0", "description": "Custom Home Assistant card to display events for a number of days from one or several calendars.", "source": "src/index.js", "module": "dist/week-planner-card.js", From e930a595010a0e6d0adda4c269d3495b0e8f4fde Mon Sep 17 00:00:00 2001 From: Rudy Gnodde Date: Wed, 4 Sep 2024 11:43:10 +0200 Subject: [PATCH 08/11] [BUGFIX] Fix legend styling bug Resolves: #128 --- src/card.styles.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/card.styles.js b/src/card.styles.js index 28a9e0f..8bf811f 100644 --- a/src/card.styles.js +++ b/src/card.styles.js @@ -48,7 +48,11 @@ export default css` flex-wrap: wrap; gap: var(--days-spacing); } - + + .container .legend { + width: 100%; + } + .container .legend ul { display: flex; flex-wrap: wrap; @@ -237,4 +241,4 @@ export default css` width: calc((100% - var(--days-spacing)) / 2); } } -`; \ No newline at end of file +`; From 817ca66abfbea8ec06237d72156106dbe08e5805 Mon Sep 17 00:00:00 2001 From: bigmes Date: Wed, 29 Oct 2025 22:27:29 -0500 Subject: [PATCH 09/11] updated to support custom navigation label --- README.md | 3 +++ src/card.js | 39 ++++++++++++++++++++++++++++++++++++++- src/editor.js | 3 +++ 3 files changed, 44 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index b3209a5..1c4554d 100644 --- a/README.md +++ b/README.md @@ -92,6 +92,9 @@ Custom Home Assistant card displaying a responsive overview of multiple days wit | `legendToggle` | boolean | false | `false` \| `true` | Toggle calendars by clicking on the legend | 1.11.0 | | `columns` | object | optional | See [Columns](#columns) | Configuration to override the number of columns | 1.11.0 | | `showNavigation` | boolean | false | `false` \| `true` | Show navigational arrows to traverse additional dates on calendar. | 1.12.0 | +| `navigationLabel` | string | optional | Any string | Literal text shown next to navigation arrows. Overrides `navigationLabelFormat`. | 1.13.0 | +| `navigationLabelFormat` | string | `MMMM` | See [Luxon format](https://moment.github.io/luxon/#/formatting?id=table-of-tokens) | Format for the navigation label when `navigationLabel` is not set. | 1.13.0 | +| `navigationLabelTemplate`| string | optional | Use `{start:...}` and `{end:...}` with Luxon tokens | Fully customizable range label; takes precedence over `navigationLabelFormat`. | 1.13.0 | ### Calendars diff --git a/src/card.js b/src/card.js index 4e2fa21..4f5f74e 100644 --- a/src/card.js +++ b/src/card.js @@ -174,6 +174,9 @@ export class WeekPlannerCard extends LitElement { this._dayFormat = config.dayFormat ?? null; this._dateFormat = config.dateFormat ?? 'cccc d LLLL yyyy'; this._timeFormat = config.timeFormat ?? 'HH:mm'; + this._navigationLabel = config.navigationLabel ?? null; + this._navigationLabelFormat = config.navigationLabelFormat ?? 'MMMM'; + this._navigationLabelTemplate = config.navigationLabelTemplate ?? null; this._locationLink = config.locationLink ?? 'https://www.google.com/maps/search/?api=1&query='; this._showTitle = config.showTitle ?? true; this._showDescription = config.showDescription ?? false; @@ -365,11 +368,45 @@ export class WeekPlannerCard extends LitElement {
    • -
    ${this._startDate.toFormat('MMMM')}
    +
    ${this._getNavigationLabel()}
    `; } + _getNavigationLabel() { + if (this._navigationLabel) { + return this._navigationLabel; + } + + if (this._navigationLabelTemplate) { + return this._formatNavigationLabel(this._navigationLabelTemplate); + } + + return this._startDate.toFormat(this._navigationLabelFormat); + } + + _formatNavigationLabel(template) { + const startInclusive = this._startDate; + let endInclusive; + + if (this._numberOfDaysIsMonth) { + // Show the visual end of the month + endInclusive = startInclusive.endOf('month'); + } else { + // End is exclusive in calculations; make inclusive for display + endInclusive = startInclusive.plus({ days: this._numberOfDays }).minus({ days: 1 }); + } + + return template.replace(/\{(start|end):([^}]+)\}/g, (match, which, fmt) => { + const date = which === 'start' ? startInclusive : endInclusive; + try { + return date.toFormat(fmt.trim()); + } catch (e) { + return match; + } + }); + } + _renderDays() { if (!this._days) { return html``; diff --git a/src/editor.js b/src/editor.js index 0efe4f0..6092ed7 100644 --- a/src/editor.js +++ b/src/editor.js @@ -117,6 +117,9 @@ export class WeekPlannerCardEditor extends LitElement { ${this.addBooleanField('hideTodayWithoutEvents', 'Also hide today without events')} ${this.addTextField('maxDayEvents', 'Maximum number of events per day (0 is no maximum)', 'number', 0)} ${this.addBooleanField('showNavigation', 'Show navigation')} + ${this.addTextField('navigationLabel', 'Navigation label (literal)')} + ${this.addTextField('navigationLabelFormat', 'Navigation label format (Luxon)', 'text', 'MMMM')} + ${this.addTextField('navigationLabelTemplate', 'Navigation label template (use {start:...} and {end:...})')} ` )} ${this.addExpansionPanel( From b001ebb8a9e12a053aa3e28f8c5778fdd8e2c8b3 Mon Sep 17 00:00:00 2001 From: imc-kstewart Date: Thu, 30 Oct 2025 14:34:02 -0500 Subject: [PATCH 10/11] Consolidate navigationLabelFormat and navigationLabelTemplate --- README.md | 5 ++--- src/card.js | 20 +++++++++----------- src/editor.js | 3 +-- 3 files changed, 12 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 1c4554d..b3541f6 100644 --- a/README.md +++ b/README.md @@ -92,9 +92,8 @@ Custom Home Assistant card displaying a responsive overview of multiple days wit | `legendToggle` | boolean | false | `false` \| `true` | Toggle calendars by clicking on the legend | 1.11.0 | | `columns` | object | optional | See [Columns](#columns) | Configuration to override the number of columns | 1.11.0 | | `showNavigation` | boolean | false | `false` \| `true` | Show navigational arrows to traverse additional dates on calendar. | 1.12.0 | -| `navigationLabel` | string | optional | Any string | Literal text shown next to navigation arrows. Overrides `navigationLabelFormat`. | 1.13.0 | -| `navigationLabelFormat` | string | `MMMM` | See [Luxon format](https://moment.github.io/luxon/#/formatting?id=table-of-tokens) | Format for the navigation label when `navigationLabel` is not set. | 1.13.0 | -| `navigationLabelTemplate`| string | optional | Use `{start:...}` and `{end:...}` with Luxon tokens | Fully customizable range label; takes precedence over `navigationLabelFormat`. | 1.13.0 | +| `showNavigationLabel` | boolean | true | `false` \| `true` | Show or hide the navigation label | 1.14.0 | +| `navigationLabelFormat` | string | `MMMM` | See [Luxon format](https://moment.github.io/luxon/#/formatting?id=table-of-tokens) | Format of the navigation label | 1.14.0 | ### Calendars diff --git a/src/card.js b/src/card.js index 4f5f74e..f2d2afd 100644 --- a/src/card.js +++ b/src/card.js @@ -89,6 +89,7 @@ export class WeekPlannerCard extends LitElement { _showNavigation; _navigationOffset = 0; _updateEventsTimeouts = []; + _showNavigationLabel; /** * Get config element @@ -174,9 +175,8 @@ export class WeekPlannerCard extends LitElement { this._dayFormat = config.dayFormat ?? null; this._dateFormat = config.dateFormat ?? 'cccc d LLLL yyyy'; this._timeFormat = config.timeFormat ?? 'HH:mm'; - this._navigationLabel = config.navigationLabel ?? null; + this._showNavigationLabel = config.showNavigationLabel ?? true; this._navigationLabelFormat = config.navigationLabelFormat ?? 'MMMM'; - this._navigationLabelTemplate = config.navigationLabelTemplate ?? null; this._locationLink = config.locationLink ?? 'https://www.google.com/maps/search/?api=1&query='; this._showTitle = config.showTitle ?? true; this._showDescription = config.showDescription ?? false; @@ -368,21 +368,19 @@ export class WeekPlannerCard extends LitElement {
    • -
    ${this._getNavigationLabel()}
    + ${this._showNavigationLabel ? + html`
    ${this._getNavigationLabel()}
    ` : + '' + }
    `; } _getNavigationLabel() { - if (this._navigationLabel) { - return this._navigationLabel; - } - - if (this._navigationLabelTemplate) { - return this._formatNavigationLabel(this._navigationLabelTemplate); + if (this._showNavigationLabel) { + return this._startDate.toFormat(this._navigationLabelFormat); } - - return this._startDate.toFormat(this._navigationLabelFormat); + return ''; } _formatNavigationLabel(template) { diff --git a/src/editor.js b/src/editor.js index 6092ed7..61c3332 100644 --- a/src/editor.js +++ b/src/editor.js @@ -117,9 +117,8 @@ export class WeekPlannerCardEditor extends LitElement { ${this.addBooleanField('hideTodayWithoutEvents', 'Also hide today without events')} ${this.addTextField('maxDayEvents', 'Maximum number of events per day (0 is no maximum)', 'number', 0)} ${this.addBooleanField('showNavigation', 'Show navigation')} - ${this.addTextField('navigationLabel', 'Navigation label (literal)')} + ${this.addBooleanField('showNavigationLabel', 'Show navigation label', true)} ${this.addTextField('navigationLabelFormat', 'Navigation label format (Luxon)', 'text', 'MMMM')} - ${this.addTextField('navigationLabelTemplate', 'Navigation label template (use {start:...} and {end:...})')} ` )} ${this.addExpansionPanel( From 8b99a25c3adf9291fe28b9ab1ee3f550acdafd42 Mon Sep 17 00:00:00 2001 From: bigmes Date: Thu, 30 Oct 2025 22:48:02 -0500 Subject: [PATCH 11/11] adjust navigationLabelFormat for handling start and end dates of the range --- README.md | 24 +++++++++++++++++++++++- src/card.js | 10 +++++++++- 2 files changed, 32 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index b3541f6..0870047 100644 --- a/README.md +++ b/README.md @@ -93,7 +93,7 @@ Custom Home Assistant card displaying a responsive overview of multiple days wit | `columns` | object | optional | See [Columns](#columns) | Configuration to override the number of columns | 1.11.0 | | `showNavigation` | boolean | false | `false` \| `true` | Show navigational arrows to traverse additional dates on calendar. | 1.12.0 | | `showNavigationLabel` | boolean | true | `false` \| `true` | Show or hide the navigation label | 1.14.0 | -| `navigationLabelFormat` | string | `MMMM` | See [Luxon format](https://moment.github.io/luxon/#/formatting?id=table-of-tokens) | Format of the navigation label | 1.14.0 | +| `navigationLabelFormat` | string | `MMMM` | See [Luxon format](https://moment.github.io/luxon/#/formatting?id=table-of-tokens) | Format of the navigation label. Supports range templates using `{start: ...}` and `{end: ...}`. When these tokens are present, the left token formats the start date and the right token formats the inclusive end date. If omitted, the value is applied to the start date only. Example: `{start: MMM, dd} - {end: MMM, dd yyyy}` → `OCT, 27 - NOV, 09 2025`. | 1.14.0 | ### Calendars @@ -319,3 +319,25 @@ calendars: - calendar.my_calendar_1 dayFormat: '''''d'' ''MMMM''''' ``` + +### Navigation label single-date formatting + +```yaml +type: custom:week-planner-card +calendars: + - entity: calendar.my_calendar_1 +showNavigation: true +showNavigationLabel: true +navigationLabelFormat: 'MMM, dd yyyy' +``` + +### Navigation label range formatting + +```yaml +type: custom:week-planner-card +calendars: + - entity: calendar.my_calendar_1 +showNavigation: true +showNavigationLabel: true +navigationLabelFormat: '{start: MMM, dd} - {end: MMM, dd yyyy}' +``` diff --git a/src/card.js b/src/card.js index f2d2afd..2fbdc5d 100644 --- a/src/card.js +++ b/src/card.js @@ -378,7 +378,15 @@ export class WeekPlannerCard extends LitElement { _getNavigationLabel() { if (this._showNavigationLabel) { - return this._startDate.toFormat(this._navigationLabelFormat); + const template = this._navigationLabelFormat; + + // Support explicit start/end templates like "{start: MMM} - {end: MMM yyyy}" + if (template?.includes('{')) { + return this._formatNavigationLabel(template); + } + + // Default: single-date formatting + return this._startDate.toFormat(template); } return ''; }