Customizable navigation Label #313

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

BigMes wants to merge 27 commits into FamousWolf:dev from BigMes:Clean-up-navigationLabel-Functionality

README.md

-Original file line number
+Diff line change
@@ Expand Up @@
     | `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  |
+    | `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. 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
@@ Expand Down Expand Up / @@ -317,3 +319,25 @@ calendars: @@
       - calendar.my_calendar_1
     dayFormat: '''<span class="number">''d''</span> <span class="month">''MMMM''</span>'''
     ```
+    ### 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}'
+    ```

src/card.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -89,6 +89,7 @@ export class WeekPlannerCard extends LitElement { @@
         _showNavigation;
         _navigationOffset = 0;
         _updateEventsTimeouts = [];
+        _showNavigationLabel;
         /**
          * Get config element
@@ Expand Down Expand Up / @@ -174,6 +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._showNavigationLabel = config.showNavigationLabel ?? true;
+            this._navigationLabelFormat = config.navigationLabelFormat ?? 'MMMM';
             this._locationLink = config.locationLink ?? 'https://www.google.com/maps/search/?api=1&query=';
             this._showTitle = config.showTitle ?? true;
             this._showDescription = config.showDescription ?? false;
@@ Expand Down Expand Up / @@ -365,11 +368,51 @@ export class WeekPlannerCard extends LitElement { @@
                         <li @click="${this._handleNavigationOriginalClick}"><ha-icon icon="mdi:circle-medium"></ha-icon></li>
                         <li @click="${this._handleNavigationNextClick}"><ha-icon icon="mdi:arrow-right"></ha-icon></li>
                     </ul>
-                    <div class="month">${this._startDate.toFormat('MMMM')}</div>
+                    ${this._showNavigationLabel ?
+                        html`<div class="month">${this._getNavigationLabel()}</div>` :
+                        ''
+                    }
                 </div>
             `;
         }
+        _getNavigationLabel() {
+            if (this._showNavigationLabel) {
+                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 '';
+        }
+        _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``;
@@ Expand Down @@

src/editor.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -117,6 +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.addBooleanField('showNavigationLabel', 'Show navigation label', true)}
+                            ${this.addTextField('navigationLabelFormat', 'Navigation label format (Luxon)', 'text', 'MMMM')}
                         `
                     )}
                     ${this.addExpansionPanel(
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Customizable navigation Label #313

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Customizable navigation Label #313

Are you sure you want to change the base?

Uh oh!

Customizable navigation Label #313

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing