- ${this._dayFormat ?
- unsafeHTML(day.date.toFormat(this._dayFormat)) :
+ ${this._theme === 'skylight' ?
html`
- ${day.date.day}
- ${this._showWeekDayText || (!this._numberOfDaysIsMonth && this._numberOfDays < 7) ?
- html`${this._getWeekDayText(day.date)}` :
- ''
- }
- `
+
+ ` :
+ (this._dayFormat ?
+ unsafeHTML(day.date.toFormat(this._dayFormat)) :
+ html`
+ ${day.date.day}
+ ${this._showDayName || (this._showWeekDayText && !this._numberOfDaysIsMonth && this._numberOfDays < 7) ?
+ html`${this._getWeekDayText(day.date)}` :
+ ''
+ }
+ `
+ )
}
- ${day.weather ?
+ ${this._showWeather && day.weather ?
html`
`
})}
@@ -544,7 +582,7 @@ export class WeekPlannerCard extends LitElement {
data-start-minute="${event.start.toFormat('mm')}"
data-end-hour="${event.end.toFormat('H')}"
data-end-minute="${event.end.toFormat('mm')}"
- style="--border-color: ${event.colors[0]}"
+ style="--border-color: ${event.colors[0]}; --event-bg-tint: ${event.colors[0]}; --dot-color: ${event.colors[0]}"
@click="${() => {
this._handleEventClick(event)
}}"
@@ -562,16 +600,21 @@ export class WeekPlannerCard extends LitElement {
`
})}
`
})}
@@ -637,6 +684,30 @@ export class WeekPlannerCard extends LitElement {
`;
}
+ _renderCurrentWeather() {
+ if (!this._showCurrentWeather || !this._weather) {
+ return html``;
+ }
+
+ const weatherState = this.hass?.states[this._weather.entity];
+ if (!weatherState) {
+ return html``;
+ }
+
+ const condition = weatherState.state;
+ const temperature = this._weather.roundTemperature
+ ? Math.round(weatherState.attributes.temperature)
+ : weatherState.attributes.temperature;
+ const formattedTemp = this.hass.formatEntityAttributeValue(weatherState, 'temperature', temperature);
+
+ return html`
+
+ ${this._getWeatherIcon(condition, this.hass.formatEntityState(weatherState))}
+ ${formattedTemp}
+
+ `;
+ }
+
_renderEventDetailsDialog() {
if (!this._currentEventDetails) {
return html``;
@@ -649,18 +720,24 @@ export class WeekPlannerCard extends LitElement {
.heading="${this._renderEventDetailsDialogHeading()}"
>
-
-
-
- ${this._currentEventDetails.calendarNames.join(', ')}
-
-
-
-
-
- ${this._renderEventDetailsDate()}
-
-
+ ${this._showCalendarName ?
+ html`
+
+
+ ${this._currentEventDetails.calendarNames.join(', ')}
+
+
` :
+ ''
+ }
+ ${this._showDate ?
+ html`
+
+
+ ${this._renderEventDetailsDate()}
+
+
` :
+ ''
+ }
${this._currentEventDetails.location ?
html`
@@ -680,6 +757,19 @@ export class WeekPlannerCard extends LitElement {
` :
''
}
+ ${this._currentEventDetails.uid ?
+ html`
+
+
+
+
+ ` :
+ ''
+ }
`;
@@ -729,6 +819,139 @@ export class WeekPlannerCard extends LitElement {
`;
}
+ _renderCreateEventDialog() {
+ if (!this._showCreateEventDialog) {
+ return html``;
+ }
+
+ const dayDate = this._showCreateEventDialog.date;
+ const now = DateTime.now();
+ const defaultStart = dayDate.set({
+ hour: now.hour + 1,
+ minute: 0,
+ second: 0,
+ millisecond: 0,
+ });
+ const defaultEnd = defaultStart.plus({ hours: 1 });
+ const startValue = defaultStart.toFormat("yyyy-MM-dd'T'HH:mm");
+ const endValue = defaultEnd.toFormat("yyyy-MM-dd'T'HH:mm");
+
+ return html`
+
+
+
+ `;
+ }
+
+ _renderCreateEventDialogHeading() {
+ return html`
+
+ `;
+ }
+
+ _renderEditEventDialog() {
+ if (!this._showEditEventDialog || !this._editFormData) {
+ return html``;
+ }
+
+ const event = this._showEditEventDialog;
+ const form = this._editFormData;
+
+ return html`
+
+
+
+ `;
+ }
+
+ _renderEditEventDialogHeading() {
+ return html`
+
+ `;
+ }
+
_getLoader() {
const loader = document.createElement('div');
loader.className = 'loader';
@@ -948,7 +1171,9 @@ export class WeekPlannerCard extends LitElement {
calendars: [calendar.entity],
calendarSorting: calendar.sorting,
calendarNames: [calendar.name],
- class: this._getEventClass(startDate, endDate, fullDay, multiDay)
+ class: this._getEventClass(startDate, endDate, fullDay, multiDay),
+ uid: event.uid ?? null,
+ recurrence_id: event.recurrence_id ?? null,
}
this._events[dateKey].push(eventKey);
}
@@ -1184,13 +1409,213 @@ export class WeekPlannerCard extends LitElement {
if (this._actions) {
return;
}
- this._currentEventDetails = event;
+ if (event.uid) {
+ this._editFormData = {
+ title: event.summary || '',
+ calendar: event.calendars[0] || '',
+ start: event.originalStart ? event.originalStart.toFormat("yyyy-MM-dd'T'HH:mm") : '',
+ end: event.originalEnd ? event.originalEnd.toFormat("yyyy-MM-dd'T'HH:mm") : '',
+ };
+ this._showEditEventDialog = event;
+ } else {
+ this._currentEventDetails = event;
+ }
}
_closeDialog() {
this._currentEventDetails = null;
}
+ _handleAddEventClick(e, day) {
+ e.stopImmediatePropagation();
+ this._showCreateEventDialog = { date: day.date };
+ }
+
+ _closeCreateEventDialog() {
+ this._showCreateEventDialog = null;
+ }
+
+ async _handleCreateEvent() {
+ const title = this.shadowRoot.querySelector('#event-title')?.value?.trim();
+ const calendar = this.shadowRoot.querySelector('#event-calendar')?.value;
+ const startInput = this.shadowRoot.querySelector('#event-start')?.value;
+ const endInput = this.shadowRoot.querySelector('#event-end')?.value;
+
+ if (!title) {
+ return;
+ }
+
+ if (!startInput) {
+ return;
+ }
+
+ const start = DateTime.fromISO(startInput);
+ const end = endInput ? DateTime.fromISO(endInput) : start.plus({ hours: 1 });
+
+ try {
+ await this.hass.callService('calendar', 'create_event', {
+ entity_id: calendar,
+ summary: title,
+ start_date_time: start.toFormat('yyyy-MM-dd HH:mm:ss'),
+ end_date_time: end.toFormat('yyyy-MM-dd HH:mm:ss'),
+ });
+
+ this._showCreateEventDialog = null;
+ this._updateEvents();
+ } catch (e) {
+ console.error('Failed to create event:', e);
+ }
+ }
+
+ async _handleDeleteEvent() {
+ const event = this._currentEventDetails;
+ if (!event || !event.uid) {
+ return;
+ }
+
+ try {
+ const wsData = {
+ type: 'calendar/event/delete',
+ entity_id: event.calendars[0],
+ uid: event.uid,
+ };
+ if (event.recurrence_id) {
+ wsData.recurrence_id = event.recurrence_id;
+ wsData.recurrence_range = 'THISANDFUTURE';
+ }
+
+ await this.hass.callWS(wsData);
+ this._currentEventDetails = null;
+ this._updateEvents();
+ } catch (e) {
+ console.error('Failed to delete event:', e);
+ }
+ }
+
+ _handleEditEventClick() {
+ const event = this._currentEventDetails;
+ this._currentEventDetails = null;
+ this._editFormData = {
+ title: event.summary || '',
+ calendar: event.calendars[0] || '',
+ start: event.originalStart ? event.originalStart.toFormat("yyyy-MM-dd'T'HH:mm") : '',
+ end: event.originalEnd ? event.originalEnd.toFormat("yyyy-MM-dd'T'HH:mm") : '',
+ };
+ this._showEditEventDialog = event;
+ }
+
+ _closeEditEventDialog() {
+ this._showEditEventDialog = null;
+ this._editFormData = null;
+ }
+
+ async _handleDeleteEventFromEdit() {
+ const event = this._showEditEventDialog;
+ if (!event || !event.uid) {
+ return;
+ }
+
+ try {
+ const wsData = {
+ type: 'calendar/event/delete',
+ entity_id: event.calendars[0],
+ uid: event.uid,
+ };
+ if (event.recurrence_id) {
+ wsData.recurrence_id = event.recurrence_id;
+ wsData.recurrence_range = 'THISANDFUTURE';
+ }
+
+ await this.hass.callWS(wsData);
+ this._showEditEventDialog = null;
+ this._editFormData = null;
+ this._updateEvents();
+ } catch (e) {
+ console.error('Week Planner: Failed to delete event:', e);
+ }
+ }
+
+ async _handleUpdateEvent() {
+ const event = this._showEditEventDialog;
+ const form = this._editFormData;
+
+ if (!event || !form) {
+ console.error('Week Planner: No event or form data for update');
+ return;
+ }
+
+ const title = form.title?.trim();
+ const calendar = form.calendar;
+ const startInput = form.start;
+ const endInput = form.end;
+
+ if (!title || !startInput) {
+ console.error('Week Planner: Missing required fields', { title, startInput });
+ return;
+ }
+
+ const start = DateTime.fromISO(startInput);
+ const end = endInput ? DateTime.fromISO(endInput) : start.plus({ hours: 1 });
+
+ const entityId = calendar || event.calendars[0];
+
+ try {
+ // Try native update first
+ if (event.uid) {
+ const wsData = {
+ type: 'calendar/event/update',
+ entity_id: entityId,
+ uid: event.uid,
+ event: {
+ summary: title,
+ dtstart: start.toFormat("yyyy-MM-dd'T'HH:mm:ss"),
+ dtend: end.toFormat("yyyy-MM-dd'T'HH:mm:ss"),
+ },
+ };
+ if (event.recurrence_id) {
+ wsData.recurrence_id = event.recurrence_id;
+ wsData.recurrence_range = 'THISANDFUTURE';
+ }
+ await this.hass.callWS(wsData);
+ }
+
+ this._showEditEventDialog = null;
+ this._editFormData = null;
+ this._updateEvents();
+ } catch (e) {
+ // Fallback: delete + recreate if update not supported
+ if (e.code === 'not_supported' && event.uid) {
+ try {
+ const deleteData = {
+ type: 'calendar/event/delete',
+ entity_id: entityId,
+ uid: event.uid,
+ };
+ if (event.recurrence_id) {
+ deleteData.recurrence_id = event.recurrence_id;
+ deleteData.recurrence_range = 'THISANDFUTURE';
+ }
+ await this.hass.callWS(deleteData);
+
+ await this.hass.callService('calendar', 'create_event', {
+ entity_id: entityId,
+ summary: title,
+ start_date_time: start.toFormat('yyyy-MM-dd HH:mm:ss'),
+ end_date_time: end.toFormat('yyyy-MM-dd HH:mm:ss'),
+ });
+
+ this._showEditEventDialog = null;
+ this._editFormData = null;
+ this._updateEvents();
+ } catch (fallbackError) {
+ console.error('Week Planner: Failed to update event (fallback):', fallbackError);
+ }
+ } else {
+ console.error('Week Planner: Failed to update event:', e);
+ }
+ }
+ }
+
_handleLegendClick(calendar) {
if (!this._legendToggle) {
return;
diff --git a/src/card.styles.js b/src/card.styles.js
index ba605ca..84be2cb 100644
--- a/src/card.styles.js
+++ b/src/card.styles.js
@@ -44,7 +44,119 @@ export default css`
--weather-icon-size: 20px;
--weather-temperature-font-size: 0.8em;
}
-
+
+ /* --- Skylight theme --- */
+ ha-card.skylight {
+ --event-border-width: 0px;
+ --event-border-radius: 10px;
+ --event-spacing: 6px;
+ --event-padding: 10px 12px;
+ --events-margin-top: 8px;
+ --day-date-number-font-size: 1.1em;
+ --day-date-text-font-size: 1em;
+ }
+
+ ha-card.compact.skylight {
+ --event-border-radius: 8px;
+ --event-padding: 4px 8px;
+ }
+
+ ha-card.skylight .container .day .date {
+ display: flex;
+ align-items: baseline;
+ gap: 8px;
+ }
+
+ ha-card.skylight .container .day .date .skylight-day-header {
+ display: flex;
+ align-items: baseline;
+ gap: 8px;
+ width: 100%;
+ }
+
+ ha-card.skylight .container .day .date .day-label {
+ font-size: 1.1em;
+ font-weight: 700;
+ }
+
+ ha-card.skylight .container .day .date .add-event-text {
+ font-size: 0.85em;
+ color: var(--secondary-text-color, #888);
+ cursor: pointer;
+ opacity: 0.6;
+ transition: opacity 0.2s;
+ white-space: nowrap;
+ margin-left: auto;
+ }
+
+ ha-card.skylight .container .day .date .add-event-text:hover {
+ opacity: 1;
+ color: var(--primary-color, #03a9f4);
+ }
+
+ ha-card.skylight .container .day .add-event {
+ display: none;
+ }
+
+ ha-card.skylight .container .day .events .event {
+ border-left: none;
+ border-radius: var(--event-border-radius);
+ background-color: color-mix(in srgb, var(--event-bg-tint, #888) 15%, var(--card-background-color, white) 85%);
+ }
+
+ ha-card.skylight .container .day .events .event .additionalColor {
+ display: none;
+ }
+
+ ha-card.skylight .container .day .events .event .calendar-dot {
+ width: 10px;
+ height: 10px;
+ min-width: 10px;
+ border-radius: 50%;
+ background-color: var(--dot-color, var(--divider-color, #888));
+ align-self: center;
+ margin-right: 4px;
+ flex-shrink: 0;
+ }
+
+ ha-card.skylight .container .day .events .none,
+ ha-card.skylight .container .day .events .more {
+ border-radius: var(--event-border-radius);
+ background-color: transparent;
+ }
+
+ .card-header-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 10px;
+ }
+
+ .card-header-row .card-title {
+ margin: 0;
+ }
+
+ .current-weather {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ cursor: pointer;
+ font-size: var(--weather-temperature-font-size);
+ }
+
+ .current-weather .icon {
+ display: inline-block;
+ vertical-align: middle;
+ background-size: cover;
+ width: var(--weather-icon-size);
+ height: var(--weather-icon-size);
+ }
+
+ .current-weather .icon img {
+ max-width: var(--weather-icon-size);
+ max-height: var(--weather-icon-size);
+ }
+
.errors {
white-space: pre-line;
}
@@ -144,6 +256,8 @@ export default css`
.container .day {
position: relative;
+ display: flex;
+ flex-direction: column;
width: calc((100% - (var(--days-columns) - 1) * var(--days-spacing)) / var(--days-columns));
margin: 0 0 var(--days-spacing) 0;
}
@@ -162,6 +276,34 @@ export default css`
font-size: var(--day-date-text-font-size);
}
+ .container .day.header .date .text {
+ font-size: var(--day-header-font-size, var(--day-date-text-font-size));
+ color: var(--day-header-color, var(--primary-text-color));
+ font-weight: bold;
+ text-transform: capitalize;
+ }
+
+ .container .day .add-event {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 28px;
+ height: 28px;
+ border-radius: 50%;
+ cursor: pointer;
+ opacity: 0.3;
+ transition: opacity 0.2s;
+ color: var(--primary-text-color);
+ --mdc-icon-size: 18px;
+ margin-left: auto;
+ margin-top: auto;
+ padding-top: 4px;
+ }
+
+ .container .day .add-event:hover {
+ opacity: 0.8;
+ }
+
.container .day .weather {
position: absolute;
top: 0;
@@ -288,6 +430,115 @@ export default css`
padding-top: 16px;
}
+ ha-dialog .event-actions {
+ display: flex;
+ justify-content: flex-end;
+ gap: 8px;
+ margin-top: 16px;
+ padding-top: 16px;
+ border-top: 1px solid var(--divider-color, #e0e0e0);
+ }
+
+ ha-dialog .event-actions .btn {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ padding: 8px 16px;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 0.9em;
+ --mdc-icon-size: 16px;
+ }
+
+ ha-dialog .event-actions .btn-edit {
+ background-color: var(--primary-color, #03a9f4);
+ color: var(--text-primary-color, #fff);
+ }
+
+ ha-dialog .event-actions .btn-delete {
+ background-color: var(--error-color, #db4437);
+ color: #fff;
+ }
+
+ ha-dialog .event-actions .btn:hover {
+ opacity: 0.9;
+ }
+
+ .create-event-form {
+ padding: 8px 0;
+ }
+
+ .create-event-form .form-row {
+ margin-bottom: 12px;
+ }
+
+ .create-event-form .form-row label {
+ display: block;
+ margin-bottom: 4px;
+ font-size: 0.9em;
+ color: var(--secondary-text-color, #aaaaaa);
+ }
+
+ .create-event-form .form-input {
+ width: 100%;
+ padding: 8px;
+ border: 1px solid var(--divider-color, #e0e0e0);
+ border-radius: 4px;
+ background-color: var(--card-background-color, #fff);
+ color: var(--primary-text-color);
+ font-size: 1em;
+ box-sizing: border-box;
+ }
+
+ .create-event-form .form-input:focus {
+ outline: none;
+ border-color: var(--primary-color, #03a9f4);
+ }
+
+ .create-event-form .form-actions {
+ display: flex;
+ justify-content: flex-end;
+ gap: 8px;
+ margin-top: 16px;
+ }
+
+ .create-event-form .btn {
+ padding: 8px 16px;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 0.9em;
+ }
+
+ .create-event-form .btn-delete {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ background-color: var(--error-color, #db4437);
+ color: #fff;
+ margin-right: auto;
+ --mdc-icon-size: 16px;
+ }
+
+ .create-event-form .btn-delete:hover {
+ opacity: 0.9;
+ }
+
+ .create-event-form .btn-cancel {
+ background-color: transparent;
+ color: var(--primary-text-color);
+ }
+
+ .create-event-form .btn-submit {
+ background-color: var(--primary-color, #03a9f4);
+ color: var(--text-primary-color, #fff);
+ }
+
+ .create-event-form .btn-submit:hover {
+ opacity: 0.9;
+ }
+
@keyframes loader {
0% {
transform: rotate(0deg);
diff --git a/src/editor.js b/src/editor.js
index 5d812ee..8de6061 100644
--- a/src/editor.js
+++ b/src/editor.js
@@ -142,6 +142,10 @@ export class WeekPlannerCardEditor extends LitElement {
${this.addTextField('filter', 'Filter events (regex)')}
${this.addTextField('filterText', 'Filter event text (regex)')}
${this.addBooleanField('combineSimilarEvents', 'Combine similar events')}
+ ${this.addBooleanField('showDayName', 'Show day name')}
+ ${this.addBooleanField('showDate', 'Show date in event details')}
+ ${this.addBooleanField('showTime', 'Show time')}
+ ${this.addBooleanField('showCalendarName', 'Show calendar name in event details')}
${this.addBooleanField('showTitle', 'Show title in overview', true)}
${this.addBooleanField('showDescription', 'Show description in overview')}
${this.addBooleanField('showLocation', 'Show location in overview')}
@@ -163,6 +167,8 @@ export class WeekPlannerCardEditor extends LitElement {
'Weather',
html`
${this.addEntityPickerField('weather.entity', 'Weather entity', ['weather'])}
+ ${this.addBooleanField('showCurrentWeather', 'Show current weather in header')}
+ ${this.addBooleanField('showWeather', 'Show weather in calendar', true)}
${this.addBooleanField('weather.showCondition', 'Show condition icon')}
${this.addBooleanField('weather.showTemperature', 'Show temperature')}
${this.addBooleanField('weather.showLowTemperature', 'Show low temperature')}
@@ -184,6 +190,15 @@ export class WeekPlannerCardEditor extends LitElement {
${this.addExpansionPanel(
'Appearance',
html`
+ ${this.addSelectField('theme', 'Theme', [
+ {
+ value: 'default',
+ label: 'Default',
+ }, {
+ value: 'skylight',
+ label: 'Skylight',
+ }
+ ], true)}
${this.addBooleanField('noCardBackground', 'No card background')}
${this.addTextField('eventBackground', 'Override events background color')}
${this.addBooleanField('compact', 'Compact mode')}