Week Planner Card Plus

Current release: v2.1.0

Week Planner Card Plus is a fork of the excellent Week Planner Card by FamousWolf, with extra features aimed at a Skylight-style family calendar dashboard.
This “Plus” version adds UI behavior needed for our Skylight dashboard setup (for example: a working Add button + hash-based popup routing fixes), and it can be used with both cloud calendars (Google / CalDAV / etc.) and Local Calendar (.ics).

For Local Calendar .ics add/edit/delete support, it’s designed to pair nicely with the companion integration:

• ICS Calendar Tools (add/edit/delete + repeat support for Local Calendar .ics calendars)
  https://github.com/randrcomputers/ics-calendar-tools

If you only want the original Week Planner Card, see:
https://github.com/FamousWolf/week-planner-card

---

What’s different in “Plus”

• ✅ Skylight-style UI flows (popup routing / interaction behavior)
• ✅ Fixes for the Add button behavior (restored + reliable)
• ✅ Fixes for hash / popup routing used in our Skylight-style dashboard
• ✅ Empty-day + empty-space click-to-add (optional, built-in dialog)
• ✅ Edit remembers calendar (Edit dialog preselects the clicked event’s calendar)
• ✅ Schedule view (Skylight timeline) + recommended CSS for all-day wrapping
• ✅ Built-in Add/Edit dialog with Title, Description, Location, and repeat (daily / weekly / fortnightly / monthly / yearly)
• ✅ Local Calendar (.ics) title fallback when only Description is set in the file
• ✅ Per-calendar Display in day header (e.g. holidays as pills under the day number)
• ✅ Optional pairing with ICS Calendar Tools so edits/deletes persist to Local Calendar (.ics)
  https://github.com/randrcomputers/ics-calendar-tools

---

Recent updates (May 2026)

Summary of fixes and features added in v2.0.5 → v2.0.9. After updating via HACS (or copying week-planner-card-plus.js), hard-refresh the dashboard (Ctrl+F5).

Add / Edit dialog fixes

Version	Change
v2.0.5	Title, Location, and Description fields no longer go blank while typing (fixed ha-textfield binding). HACS listing icon (icon.png).
v2.0.7	Description no longer cleared when opening Edit (removed spurious value-changed on load).
v2.0.8	Description is always visible: native <textarea> under Title (Home Assistant’s ha-textarea often does not render inside custom-card dialogs). Form scrolls when Repeat options are expanded.

Recommended field usage

• Title — main label on the calendar grid (like Google Calendar event names).
• Description — extra notes; optional. Saved to .ics via ICS Calendar Tools for local calendars.
• Location — optional.

Local Calendar (.ics) — event text on the grid

Version	Change
v2.0.6	If a local event has Description but no Title/SUMMARY in the API, the card shows the first line of the description on the grid (blue/local events were showing time only). On save, if Title is empty but Description is filled, the first line is copied into summary for the .ics file.

Repeat: Fortnightly

Version	Change
v2.0.9	New Repeat → Fortnightly option. Stored as standard iCal: FREQ=WEEKLY;INTERVAL=2. Week-day buttons work the same as Weekly. Existing fortnightly events open correctly in Edit.

Display holidays (or any calendar) in the day header

Version	Change
v2.0.9	Per-calendar option displayInHeader: true (also showInDayHeader). All-day events from that calendar appear as small pills under the day number, not duplicated in the main event list. Ideal for holidays (calendar.united_states_mn, etc.).

Example (inside your config-template-card → week-planner-card-plus → calendars):

- entity: calendar.united_states_mn
  name: Holidays
  color: var(--holidays-default-primary-color)
  filter: ${ HOLCAL }
  displayInHeader: true

Or in the card editor: open Calendars → your holiday calendar → enable Display in day header.

Month view — column alignment (“gap”)

Version	Change
v2.0.9	When Hide days without events is on, empty days now keep an invisible placeholder so the 7-column grid stays aligned (fixes reported “gap” / misaligned columns). Outside-month padding days also keep their slot.

If a gap is still reported, check whether Hide days without events is enabled and share a screenshot of the month view.

Version history (short)

Version	Notes
2.0.9	Fortnightly repeat; displayInHeader; month grid alignment
2.0.8	Visible Description field (native textarea)
2.0.7	Edit dialog Description not wiped on open
2.0.6	Local calendar grid title from Description fallback
2.0.5	Edit field typing fix; icon.png
2.0.4	defaultAllDay option
2.0.3	Dutch language

---

Calendar support (Google / cloud + Local Calendar)

Week Planner Card Plus works with Home Assistant calendar entities (calendar.*) from many sources.
What you can do (Add/Edit/Delete/Repeat) depends on what your calendar integration supports.

Note certain calendars have limitations. CalDAV cannot edit or delete events. But you can add events Google cannot edit events. But You can add and delete events Local calendars you can delete, add and edit events with ics calendar tools addon!

Cloud calendars (Google / CalDAV / etc.)

• ✅ View events in the planner
• ✅ Add events (built-in dialog)
• ✅ Delete events
• ✅ Repeat supported (built-in dialog)
• ⚠️ Edit support varies by provider/integration and configuration

Local Calendar (.ics)

• ✅ View events
• ✅ Add events
• ✅ Edit/Delete typically requires ICS Calendar Tools to modify the underlying .ics file
• ✅ Repeat (RRULE) supported via ICS Calendar Tools

---

---

Installation

HACS (Recommended)

1. Make sure HACS is installed and working.
2. HACS → ⋮ → Custom repositories
3. Open the menu (top right) → Custom repositories.
4. Add this repo URL:
   • https://github.com/randrcomputers/week-planner-card-plus
5. Category: Dashboard
6. Install Week Planner Card Plus.
7. Restart Home Assistant (or reload resources if you prefer).

Add the Lovelace Resource

HACS usually offers to add the resource automatically, but you can do it manually if needed:

Settings → Dashboards → Resources → Add Resource

• URL (typical HACS path):
  • /hacsfiles/week-planner-card-plus/week-planner-card-plus.js
• Type:
  • JavaScript Module

If your built file name/path differs, use the file that exists in your installed /config/www/community/ folder.

---

Manual Install (advanced)

1. Copy the built .js file into:
   • /config/www/ (or /config/www/community/week-planner-card-plus/)
2. Add a Resource:

Example:

• URL:
  • /local/week-planner-card-plus.js
• Type:
  • JavaScript Module

---

Basic Usage

New built-in Add dialog (recommended)

This uses the Plus card’s built-in Add dialog:

• Clicking a totally empty day opens Add
• Clicking empty space within a day that already has events opens Add
• Clicking an event opens Edit (and the calendar is preselected based on the clicked event)

type: custom:week-planner-card-plus
tapEmptyDayToAdd: false           # legacy scripted popup (leave off)
clickEmptyDayToAddPlus: true      # NEW built-in dialog
calendars:
  - entity: calendar.family_calendar

Legacy scripted Add dialog (older dashboards)

This uses the old “scripted” Add flow (kept for backwards compatibility).

type: custom:week-planner-card-plus
tapEmptyDayToAdd: true            # legacy scripted popup
clickEmptyDayToAddPlus: false     # disable built-in dialog
calendars:
  - entity: calendar.family_calendar

Tip: Use only one add mode. Set either tapEmptyDayToAdd or clickEmptyDayToAddPlus to true — not both.

---

Schedule View (Skylight)

Week Planner Card Plus also includes a Schedule view intended to feel like a Skylight-style weekly timeline.

Notes / Known quirks

• All-day events are rendered as pills at the top of each day column.
• Timed events render inside the hour grid.
• If your dashboard uses narrow columns (or long descriptions), all-day pills may visually bleed into the next day unless wrapping is forced via CSS.

Required card_mod for Schedule View

            card:
              type: custom:week-planner-card-plus
              viewMode: ${ VIEWMODE } # Needed for new scheduled view
              tapEmptyDayToAdd: false
              clickEmptyDayToAddPlus: true
              calendars:
                - entity: calendar.family_calendar

Recommended card_mod CSS for Schedule View

✅ ADD THIS: All-day pills wrap inside the day column (no bleed to next day)

card_mod:
  style: |
    /* ✅ ADD THIS: All-day pills wrap inside the day column (no bleed to next day) */
    .timelineAllDayPill,
    .timelineAllDayPill * {
      white-space: normal !important;
      overflow-wrap: anywhere !important;
      word-break: break-word !important;
    }

Optional: force schedule text to black (Skylight readability)

If your schedule pills show white text and you want consistent dark text:

card_mod:
  style: |
    /* Schedule view: force black text on all-day + timed pills */
    .timelineAllDayPill,
    .timelineAllDayPill * {
      color: #111 !important;
    }

    .timelineEvent,
    .timelineEvent * {
      color: #111 !important;
    }

    /* Slightly dimmer time text */
    .timelineEvent .time,
    .timelineAllDayPill .time {
      color: rgba(0,0,0,0.70) !important;
    }

---

Notes on Repeat (Recurring Events)

• Cloud calendars (Google/CalDAV/etc.): recurring events are created using Home Assistant’s calendar APIs (built-in dialog).
• Local Calendar (.ics): recurring events require writing an RRULE into the .ics file — use ICS Calendar Tools for add/update/delete with repeat support.

Repeat options in the built-in dialog: No repeat, Daily, Weekly, Fortnightly (every 2 weeks), Monthly, Yearly — plus week-day selection for Weekly/Fortnightly, interval, and end (never / until date / count).

---

Options

Per-calendar: displayInHeader (boolean)

When true, all-day events from this calendar are shown as pills in the day header (under the date / weather), not in the main event list.

• Use for holidays, birthdays (all-day), or any calendar you want as a compact day label.
• Timed events from that calendar still appear in the normal list.
• Also accepts legacy name: showInDayHeader

calendars:
  - entity: calendar.united_states_mn
    name: Holidays
    color: var(--holidays-default-primary-color)
    displayInHeader: true

defaultAllDay (boolean)

Default state of the All day toggle in the built-in Add/Edit dialog.

• true = All day starts ON
• false = All day starts OFF

Default: false

clickEmptyDayToAddPlus (boolean)

When true, empty-day / empty-space clicks open the built-in Add dialog (recommended).

tapEmptyDayToAdd (boolean)

Legacy mode. When true, empty-day clicks use the older scripted Add flow.

---

Companion integration (Local Calendar editing)

If you want Local Calendar .ics edit/delete/repeat to behave like cloud calendars, install:

• ICS Calendar Tools
  https://github.com/randrcomputers/ics-calendar-tools