/gi, '');
const escaped = this.escapeHtml(cleanText).replace(/\r\n?|\n/g, '
');
return this.restoreAllowedDescriptionTags(escaped);
}
restoreAllowedDescriptionTags(html) {
const allowedSimpleTags = 'b|strong|i|em|u|s|br|p|div|ul|ol|li|blockquote|code|pre|h[1-6]|table|thead|tbody|tfoot|tr|td|th';
const renderAnchor = (attrs, content = '') => {
const hrefMatch = attrs.match(/href\s*=\s*(?:"([^&]*)"|'([^&]*)&(?:#39|apos);|"([^"]*)"|'([^']*)'|([^\s&"']+))/i);
const href = hrefMatch ? this.decodeHtmlEntities(hrefMatch[1] || hrefMatch[2] || hrefMatch[3] || hrefMatch[4] || hrefMatch[5] || '') : '';
const safeUrl = this.getSafeDescriptionUrl(href);
if (!safeUrl) return content;
return `${content}`;
};
return String(html ?? '')
.replace(/<a\s+([\s\S]*?)>([\s\S]*?)<\/a>/gi, (_match, attrs, content) => renderAnchor(attrs, content))
.replace(/<a\s+([\s\S]*?)>/gi, (_match, attrs) => renderAnchor(attrs).replace('', ''))
.replace(/<\/a>/gi, '')
.replace(new RegExp(`<(/?)(${allowedSimpleTags})(?:\\s+[\\s\\S]*?)?\\s*(/?)>`, 'gi'), (_match, closing, tag, selfClosing) => {
const normalizedTag = tag.toLowerCase();
if (normalizedTag === 'br') return '
';
return closing ? `` : `<${normalizedTag}${selfClosing ? ' /' : ''}>`;
});
}
getSafeDescriptionUrl(url) {
const value = String(url ?? '').trim();
if (!value) return '';
if (/^(https?:|mailto:|tel:)/i.test(value) || value.startsWith('/') || value.startsWith('#')) {
return value;
}
return '';
}
decodeHtmlEntities(text) {
return String(text ?? '')
.replace(/"/g, '"')
.replace(/'|'/g, "'")
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>');
}
escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
escapeHtmlAttribute(text) {
const replacements = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
return String(text ?? '').replace(/[&<>"']/g, (char) => replacements[char]);
}
normalizeBackgroundImageUrl(url) {
if (!url) return null;
const value = String(url).trim();
if (!value) return null;
const mediaSourcePrefix = 'media-source://media_source/local/';
if (value.startsWith(mediaSourcePrefix)) {
const localPath = value.slice(mediaSourcePrefix.length);
return `/media/local/${localPath}`;
}
return value;
}
normalizeBackgroundOpacity(opacityValue, fallback = 0) {
const numericOpacity = Number(opacityValue);
if (!Number.isFinite(numericOpacity)) {
return fallback;
}
return Math.min(100, Math.max(0, numericOpacity));
}
normalizeEventModalSize(value) {
const normalized = String(value || '').trim().toLowerCase();
return ['narrow', 'medium', 'wide', 'full'].includes(normalized) ? normalized : 'medium';
}
getEventModalSizeClass() {
return `modal-size-${this.normalizeEventModalSize(this._config?.event_modal_size)}`;
}
applyEventModalSizeClass(content = this.getRootElementById('modal-content')) {
if (!content?.classList) return;
content.classList.remove('modal-size-narrow', 'modal-size-medium', 'modal-size-wide', 'modal-size-full');
content.classList.add(this.getEventModalSizeClass());
}
static getStubConfig() {
return {
title: 'Family Calendar',
entities: ['calendar.personal'],
default_view: 'month',
first_day_of_week: 0,
week_days: [0, 1, 2, 3, 4, 5, 6],
week_start_hour: 0,
week_end_hour: 23,
lock_schedule_hours: false,
hide_the_past: false,
past_event_mode: 'none',
disable_swipe_controls: false,
show_all_events_month: false,
show_all_details_month: false,
hide_empty_days: false,
agenda_compact_events: false,
shorten_event_times: false,
display_full_weekday_names: false,
compact_width: false,
show_current_time_bar: false,
show_event_location: false,
use_short_location: false,
event_location_font_size: 9,
background_opacity: 0,
header_background_opacity: 0,
event_calendar_friendly_name: false,
event_title_prefix: 'none',
combine_style: 'bars',
combine_background: 'primary',
event_color_mode: 'classic',
event_neutral_background: '#F8F3E9',
event_tint_opacity: 80,
event_color_bar_width: 18,
day_badges: [],
hide_calendars: false,
hide_header: false,
hide_year: false,
hide_controls: false,
hide_navigation_buttons: false,
hide_add_event_button: false,
hide_view_selector: false,
hide_dark_mode_toggle: false,
show_dashboard_nav_button: false,
header_dashboard_path: null,
header_weather_sensor: '',
calendar_person_entities: {},
default_hidden_calendars: [],
color_scheme: 'auto',
enable_event_management: true,
event_modal_size: 'medium'
};
}
getCardSize() {
return 6;
}
static async getConfigElement() {
return document.createElement('daylight-calendar-card-editor');
}
}
class SkylightCalendarCardEditor extends HTMLElement {
constructor() {
super();
this._config = SkylightCalendarCard.getStubConfig();
this._hass = null;
this._rendered = false;
this._lastCalendarEntitiesKey = '';
this._colorPickerState = {
open: false,
field: null,
mapKey: null,
h: 0,
s: 1,
v: 1,
color: '#3f51b5'
};
this._combineBackgroundMode = 'primary';
this._combineBackgroundHexDraft = '';
this._openDisclosureKeys = new Set();
this._dashboardOptions = [];
}
normalizeHexColor(colorValue) {
const normalizedColor = String(colorValue || '').trim();
if (!normalizedColor) return null;
const hex3Match = normalizedColor.match(/^#([\da-fA-F]{3})$/);
if (hex3Match) {
const [r, g, b] = hex3Match[1].split('');
return `#${r}${r}${g}${g}${b}${b}`.toUpperCase();
}
const hex6Match = normalizedColor.match(/^#([\da-fA-F]{6})$/);
if (hex6Match) {
return `#${hex6Match[1].toUpperCase()}`;
}
return null;
}
normalizeBackgroundOpacity(opacityValue, fallback = 0) {
const numericOpacity = Number(opacityValue);
if (!Number.isFinite(numericOpacity)) {
return fallback;
}
return Math.min(100, Math.max(0, numericOpacity));
}
syncCombineBackgroundEditorState(backgroundValue) {
const rawValue = String(backgroundValue || '').trim();
const normalizedLower = rawValue.toLowerCase();
if (normalizedLower === 'neutral' || normalizedLower === 'primary') {
this._combineBackgroundMode = normalizedLower;
this._combineBackgroundHexDraft = '';
return;
}
const normalizedHex = this.normalizeHexColor(rawValue);
if (normalizedHex) {
this._combineBackgroundMode = 'hex';
this._combineBackgroundHexDraft = normalizedHex;
return;
}
this._combineBackgroundMode = 'primary';
this._combineBackgroundHexDraft = '';
}
setConfig(config) {
const previousEntities = Array.isArray(this._config?.entities) ? this._config.entities : [];
const normalizedDefaultView = config.default_view === 'week'
? 'week-compact'
: config.default_view === 'schedule'
? 'week-standard'
: config.default_view;
const normalizedPastEventMode = config.past_event_mode !== undefined && config.past_event_mode !== null && config.past_event_mode !== ''
? SkylightCalendarCard.prototype.normalizePastEventMode(config.past_event_mode)
: (config.hide_the_past ? 'hide' : SkylightCalendarCard.getStubConfig().past_event_mode);
this._config = {
...SkylightCalendarCard.getStubConfig(),
...config,
default_view: normalizedDefaultView || (SkylightCalendarCard.getStubConfig().default_view || 'month'),
past_event_mode: normalizedPastEventMode,
color_scheme: SkylightCalendarCard.prototype.normalizeDefaultDarkMode(config.color_scheme),
header_dashboard_path: SkylightCalendarCard.prototype.normalizeDashboardPath(config.header_dashboard_path),
event_modal_size: SkylightCalendarCard.prototype.normalizeEventModalSize(config.event_modal_size)
};
this.syncCombineBackgroundEditorState(this._config.combine_background);
if (!this._rendered) {
this.render();
return;
}
const nextEntities = Array.isArray(this._config.entities) ? this._config.entities : [];
const entitiesChanged = previousEntities.join('|') !== nextEntities.join('|');
if (entitiesChanged) {
this.render();
return;
}
this.updateFieldValues();
}
set hass(hass) {
this._hass = hass;
this._dashboardOptions = this.getDashboardOptionsForEditor();
if (!this._rendered) {
this.render();
return;
}
this.refreshCalendarEntities();
}
get value() {
return this._config || SkylightCalendarCard.getStubConfig();
}
getCalendarEntities() {
return Object.keys(this._hass?.states || {})
.filter((entityId) => entityId.startsWith('calendar.'))
.sort();
}
escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
normalizeDefaultViewForEditor(value) {
if (value === 'week') return 'week-compact';
if (value === 'schedule') return 'week-standard';
return value || 'month';
}
getEventCalendarBubbleMode() {
if (this._config.event_calendar_friendly_name) {
return 'friendly_name';
}
if (this._config.hide_event_calendar_bubble) {
return 'none';
}
return 'icon';
}
getMapFieldValue(key) {
const value = this._config[key];
return value && typeof value === 'object' && !Array.isArray(value) ? value : {};
}
getListFieldValue(key) {
const value = this._config[key];
return Array.isArray(value) ? value : [];
}
getListInputValue(key) {
return this.getListFieldValue(key).join(', ');
}
getEditorDefaultValue(key) {
const defaults = {
week_start_hour: 0,
week_end_hour: 23,
lock_schedule_hours: false,
hide_the_past: false,
past_event_mode: 'none',
height_scale: 1,
event_font_size: 11,
event_time_font_size: 9,
event_location_font_size: 9,
combine_calendars_width: 18,
event_color_bar_width: 18,
event_tint_opacity: 80,
first_day_of_week: 0,
header_background_opacity: 0,
background_opacity: 0
};
return Object.prototype.hasOwnProperty.call(defaults, key) ? defaults[key] : 0;
}
getConfiguredEntitiesForEditor() {
const entities = Array.isArray(this._config.entities) ? this._config.entities : [];
return entities.filter((entityId) => typeof entityId === 'string' && entityId.startsWith('calendar.'));
}
getEntityFriendlyName(entityId) {
return this._hass?.states?.[entityId]?.attributes?.friendly_name || entityId;
}
getConfiguredEntityIndex(entityId) {
return this.getConfiguredEntitiesForEditor().indexOf(entityId);
}
getEditorCalendarColor(entityId) {
const entityIndex = this.getConfiguredEntityIndex(entityId);
return this.normalizeHexColor(this.getMapFieldValue('colors')[entityId]) ||
SkylightCalendarCard.prototype.getDefaultColor(Math.max(entityIndex, 0));
}
getContrastingEditorColor(backgroundColor) {
const hex = this.normalizeHexColor(backgroundColor);
if (!hex) return '#FFFFFF';
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
return luminance > 0.6 ? '#000000' : '#FFFFFF';
}
getEditorEventFontColor(entityId) {
return this.normalizeHexColor(this.getMapFieldValue('event_font_colors')[entityId]) ||
this.getContrastingEditorColor(this.getEditorCalendarColor(entityId));
}
getVirtualCalendarsForEditor() {
return Array.isArray(this._config.virtual_calendars) ? this._config.virtual_calendars : [];
}
getRenderableVirtualCalendarsForEditor() {
return this.getVirtualCalendarsForEditor()
.map((virtualCalendar, index) => ({ virtualCalendar, index }))
.filter(({ virtualCalendar }) => virtualCalendar && typeof virtualCalendar === 'object' && !Array.isArray(virtualCalendar));
}
getNextVirtualCalendarId() {
const existingIds = new Set(this.getVirtualCalendarsForEditor()
.filter((virtualCalendar) => virtualCalendar && typeof virtualCalendar === 'object')
.map((virtualCalendar) => String(virtualCalendar.id || '').trim())
.filter(Boolean));
let index = 1;
let candidate = `virtual_${index}`;
while (existingIds.has(candidate)) {
index += 1;
candidate = `virtual_${index}`;
}
return candidate;
}
sanitizeVirtualCalendarForEditor(virtualCalendar) {
const nextVirtualCalendar = {
...(virtualCalendar && typeof virtualCalendar === 'object' ? virtualCalendar : {})
};
nextVirtualCalendar.id = String(nextVirtualCalendar.id || '').trim();
nextVirtualCalendar.name = String(nextVirtualCalendar.name || '').trim();
const icon = String(nextVirtualCalendar.icon || '').trim();
if (icon) nextVirtualCalendar.icon = icon;
else nextVirtualCalendar.icon = null;
const color = String(nextVirtualCalendar.color || '').trim();
if (color) nextVirtualCalendar.color = color;
else nextVirtualCalendar.color = null;
nextVirtualCalendar.entities = Array.isArray(nextVirtualCalendar.entities)
? nextVirtualCalendar.entities.filter((entityId) => typeof entityId === 'string' && entityId.startsWith('calendar.'))
: [];
return nextVirtualCalendar;
}
getVirtualCalendarIdValidation(index) {
const virtualCalendars = this.getVirtualCalendarsForEditor();
const virtualCalendar = virtualCalendars[index];
if (!virtualCalendar || typeof virtualCalendar !== 'object') return '';
const id = String(virtualCalendar.id || '').trim();
if (!id) return 'ID is required for runtime matching.';
const duplicateIndex = virtualCalendars.findIndex((otherVirtualCalendar, otherIndex) => (
otherIndex !== index &&
otherVirtualCalendar &&
typeof otherVirtualCalendar === 'object' &&
String(otherVirtualCalendar.id || '').trim() === id
));
return duplicateIndex === -1 ? '' : 'ID duplicates another virtual calendar.';
}
getEditorVirtualCalendarColor(index) {
const virtualCalendar = this.getVirtualCalendarsForEditor()[index];
return this.toColorInputValue(virtualCalendar?.color);
}
getEditorMapColorValue(field, entityId) {
if (field === 'colors') {
return this.getEditorCalendarColor(entityId);
}
if (field === 'event_font_colors') {
return this.getEditorEventFontColor(entityId);
}
return this.toColorInputValue(this.getMapFieldValue(field)[entityId]);
}
getDashboardOptionsForEditor() {
const panels = this._hass?.panels || {};
const dashboards = Object.values(panels)
.filter((panel) => panel?.component_name === 'lovelace' && typeof panel.url_path === 'string' && panel.url_path.trim())
.map((panel) => {
const path = panel.url_path.startsWith('/') ? panel.url_path : `/${panel.url_path}`;
const title = panel.title || panel.config?.title || panel.url_path;
return { path, title };
});
const uniqueByPath = new Map();
dashboards.forEach((dashboard) => {
uniqueByPath.set(dashboard.path, dashboard);
});
const configuredPath = SkylightCalendarCard.prototype.normalizeDashboardPath(this._config.header_dashboard_path);
if (configuredPath && !uniqueByPath.has(configuredPath)) {
uniqueByPath.set(configuredPath, { path: configuredPath, title: configuredPath });
}
return Array.from(uniqueByPath.values())
.sort((a, b) => a.title.localeCompare(b.title, undefined, { sensitivity: 'base' }));
}
toColorInputValue(value, fallback = '#3f51b5') {
const normalized = String(value || '').trim();
if (/^#[0-9a-fA-F]{6}$/.test(normalized)) {
return normalized;
}
return fallback;
}
hexToHsv(hex) {
const normalizedHex = this.toColorInputValue(hex).replace('#', '');
const r = parseInt(normalizedHex.slice(0, 2), 16) / 255;
const g = parseInt(normalizedHex.slice(2, 4), 16) / 255;
const b = parseInt(normalizedHex.slice(4, 6), 16) / 255;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
const delta = max - min;
let h = 0;
if (delta !== 0) {
if (max === r) h = ((g - b) / delta) % 6;
else if (max === g) h = (b - r) / delta + 2;
else h = (r - g) / delta + 4;
h = Math.round(h * 60);
if (h < 0) h += 360;
}
const s = max === 0 ? 0 : delta / max;
const v = max;
return { h, s, v };
}
hsvToHex(h, s, v) {
const hue = ((h % 360) + 360) % 360;
const sat = Math.max(0, Math.min(1, s));
const val = Math.max(0, Math.min(1, v));
const c = val * sat;
const x = c * (1 - Math.abs(((hue / 60) % 2) - 1));
const m = val - c;
let r = 0;
let g = 0;
let b = 0;
if (hue < 60) [r, g, b] = [c, x, 0];
else if (hue < 120) [r, g, b] = [x, c, 0];
else if (hue < 180) [r, g, b] = [0, c, x];
else if (hue < 240) [r, g, b] = [0, x, c];
else if (hue < 300) [r, g, b] = [x, 0, c];
else [r, g, b] = [c, 0, x];
const toHex = (n) => Math.round((n + m) * 255).toString(16).padStart(2, '0');
return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}
getColorValue(field, mapKey = null) {
if (field === 'virtual_calendar_color') {
return this.getEditorVirtualCalendarColor(Number(mapKey));
}
if (mapKey) {
return this.getEditorMapColorValue(field, mapKey);
}
return this.toColorInputValue(this._config[field]);
}
emitConfigChanged(nextConfig) {
this._config = nextConfig;
this.dispatchEvent(
new CustomEvent('config-changed', {
detail: { config: nextConfig },
bubbles: true,
composed: true
})
);
}
openColorPicker(field, mapKey = null) {
const initialColor = this.getColorValue(field, mapKey);
const hsv = this.hexToHsv(initialColor);
this._colorPickerState = {
open: true,
field,
mapKey,
h: hsv.h,
s: hsv.s,
v: hsv.v,
color: initialColor
};
const dialog = this.querySelector('.color-picker-dialog');
if (dialog) {
dialog.classList.add('show');
this.syncColorPickerUi();
}
}
closeColorPicker() {
this._colorPickerState.open = false;
const dialog = this.querySelector('.color-picker-dialog');
if (dialog) dialog.classList.remove('show');
}
syncColorPickerUi() {
const dialog = this.querySelector('.color-picker-dialog');
if (!dialog) return;
const { h, s, v, color } = this._colorPickerState;
const marker = dialog.querySelector('.color-picker-wheel-marker');
const brightnessInput = dialog.querySelector('#color-picker-brightness');
const hexInput = dialog.querySelector('#color-picker-hex');
const preview = dialog.querySelector('.color-picker-preview');
const valueText = dialog.querySelector('.color-picker-value');
if (marker) {
const radius = 120;
const angle = ((h - 90) * Math.PI) / 180;
const markerRadius = s * radius;
const x = Math.cos(angle) * markerRadius;
const y = Math.sin(angle) * markerRadius;
marker.style.left = `calc(50% + ${x}px)`;
marker.style.top = `calc(50% + ${y}px)`;
}
if (brightnessInput) brightnessInput.value = String(Math.round(v * 100));
if (hexInput && document.activeElement !== hexInput) hexInput.value = color;
if (preview) preview.style.background = color;
if (valueText) valueText.textContent = color;
}
updateColorPickerFromWheelEvent(event) {
const wheel = event.currentTarget;
const rect = wheel.getBoundingClientRect();
const x = event.clientX - rect.left - rect.width / 2;
const y = event.clientY - rect.top - rect.height / 2;
const radius = rect.width / 2;
const distance = Math.min(Math.sqrt(x * x + y * y), radius);
const saturation = distance / radius;
const hue = (Math.atan2(y, x) * 180) / Math.PI + 90;
this._colorPickerState.h = hue < 0 ? hue + 360 : hue;
this._colorPickerState.s = saturation;
this._colorPickerState.color = this.hsvToHex(this._colorPickerState.h, this._colorPickerState.s, this._colorPickerState.v);
this.syncColorPickerUi();
}
applyColorPickerColor(hexColor) {
const { field, mapKey } = this._colorPickerState;
if (!field) return;
if (field === 'virtual_calendar_color') {
this.updateVirtualCalendar(Number(mapKey), { color: hexColor }, { render: true });
this.closeColorPicker();
return;
}
const nextConfig = { ...this.value };
if (mapKey) {
nextConfig[field] = {
...this.getMapFieldValue(field),
[mapKey]: hexColor
};
} else {
nextConfig[field] = hexColor;
}
this.emitConfigChanged(nextConfig);
this.updateFieldValues();
this.closeColorPicker();
}
normalizeHexColorInput(value) {
const raw = String(value || '').trim();
if (!raw) return null;
const withHash = raw.startsWith('#') ? raw : `#${raw}`;
return /^#[0-9a-fA-F]{6}$/.test(withHash) ? withHash.toLowerCase() : null;
}
renderColorPickerDialog() {
return `
Select color
${['#ffffff', '#ff0000', '#ffff00', '#00ff00', '#000000', '#00ffff', '#0000ff', '#ff00ff']
.map((color) => ``)
.join('')}
Chosen color
`;
}
renderColorInputControl({ id, field, mapKey = null, value }) {
const colorValue = this.toColorInputValue(value);
const triggerAttributes = mapKey
? `data-color-trigger="true" data-color-field="${field}" data-color-map-key="${mapKey}"`
: `data-color-trigger="true" data-color-field="${field}"`;
return `
`;
}
renderMapRowInputs(mapKey, { label, inputType = 'text', placeholder = '' } = {}) {
const mapValue = this.getMapFieldValue(mapKey);
const entities = this.getConfiguredEntitiesForEditor();
if (!entities.length) {
return `Select at least one calendar to configure ${label || mapKey}.
`;
}
return entities
.map((entityId) => {
const displayName = this.escapeHtml(this.getEntityFriendlyName(entityId));
const value = inputType === 'color' ? this.getEditorMapColorValue(mapKey, entityId) : (mapValue[entityId] || '');
if (inputType === 'color') {
return `
${this.renderColorInputControl({ id: `${mapKey}-${entityId}`, field: mapKey, mapKey: entityId, value })}
`;
}
return `
`;
})
.join('');
}
renderCalendarListCheckboxes(field, { label }) {
const entities = this.getConfiguredEntitiesForEditor();
const selectedValues = new Set(this.getListFieldValue(field));
if (!entities.length) {
return `Select at least one calendar to configure ${label || field}.
`;
}
return entities
.map((entityId) => {
const displayName = this.escapeHtml(this.getEntityFriendlyName(entityId));
const checked = selectedValues.has(entityId) ? 'checked' : '';
return `
`;
})
.join('');
}
buildDisclosureKey(scope, title) {
return `${scope}:${title}`;
}
captureOpenDisclosures() {
const openKeys = new Set();
this.querySelectorAll('details[data-disclosure-key][open]').forEach((detail) => {
const key = detail.dataset.disclosureKey;
if (key) openKeys.add(key);
});
this._openDisclosureKeys = openKeys;
}
renderSection(title, content) {
const disclosureKey = this.buildDisclosureKey('section', title);
const openAttr = this._openDisclosureKeys.has(disclosureKey) ? 'open' : '';
return `
${title}
${content}
`;
}
renderSubSection(title, content) {
const disclosureKey = this.buildDisclosureKey('subsection', title);
const openAttr = this._openDisclosureKeys.has(disclosureKey) ? 'open' : '';
return `
${title}
${content}
`;
}
renderVirtualCalendarsEditor() {
const renderableVirtualCalendars = this.getRenderableVirtualCalendarsForEditor();
return `
Create display-only calendar badges that group one or more configured real calendars.
${renderableVirtualCalendars.length ? renderableVirtualCalendars
.map(({ virtualCalendar, index }, renderIndex) => this.renderVirtualCalendarRow(virtualCalendar, index, renderIndex, renderableVirtualCalendars.length))
.join('') : '
No virtual calendars configured yet.
'}
`;
}
renderVirtualCalendarRow(virtualCalendar, index, renderIndex = index, renderCount = this.getRenderableVirtualCalendarsForEditor().length) {
const configuredEntities = this.getConfiguredEntitiesForEditor();
const configuredEntitySet = new Set(configuredEntities);
const selectedEntityValues = Array.isArray(virtualCalendar.entities)
? virtualCalendar.entities.filter((entityId) => typeof entityId === 'string' && entityId.startsWith('calendar.'))
: [];
const selectedEntities = new Set(selectedEntityValues);
const legacyEntities = selectedEntityValues.filter((entityId) => !configuredEntitySet.has(entityId));
const virtualCalendarName = String(virtualCalendar.name || '').trim();
const virtualCalendarId = String(virtualCalendar.id || '').trim();
const virtualCalendarIcon = String(virtualCalendar.icon || '').trim();
const virtualCalendarColor = String(virtualCalendar.color || '').trim();
const idValidation = this.getVirtualCalendarIdValidation(index);
const idValidationMarkup = idValidation
? `${this.escapeHtml(idValidation)}
`
: '';
const colorStatusMarkup = virtualCalendarColor
? `Override: ${this.escapeHtml(virtualCalendarColor)}`
: 'No color override set';
const checkboxRows = configuredEntities.map((entityId) => {
const displayName = this.escapeHtml(this.getEntityFriendlyName(entityId));
const checked = selectedEntities.has(entityId) ? 'checked' : '';
return `
`;
});
legacyEntities.forEach((entityId) => {
checkboxRows.push(`
`);
});
const checkboxMarkup = checkboxRows.length
? checkboxRows.join('')
: 'Select at least one real calendar above to include calendars here.
';
return `
${checkboxMarkup}
`;
}
updateVirtualCalendar(index, patch, { render = false } = {}) {
const virtualCalendars = [...this.getVirtualCalendarsForEditor()];
if (index < 0 || index >= virtualCalendars.length) return;
const currentVirtualCalendar = virtualCalendars[index];
if (!currentVirtualCalendar || typeof currentVirtualCalendar !== 'object' || Array.isArray(currentVirtualCalendar)) return;
virtualCalendars[index] = this.sanitizeVirtualCalendarForEditor({
...currentVirtualCalendar,
...patch
});
this.emitConfigChanged({
...this.value,
virtual_calendars: virtualCalendars
});
if (render) this.render();
else this.updateFieldValues();
}
addVirtualCalendar() {
const virtualCalendars = [...this.getVirtualCalendarsForEditor()];
virtualCalendars.push({
id: this.getNextVirtualCalendarId(),
name: 'Virtual Calendar',
icon: null,
color: null,
entities: []
});
this.emitConfigChanged({
...this.value,
virtual_calendars: virtualCalendars
});
this.render();
}
removeVirtualCalendar(index) {
const virtualCalendars = [...this.getVirtualCalendarsForEditor()];
if (index < 0 || index >= virtualCalendars.length) return;
virtualCalendars.splice(index, 1);
this.emitConfigChanged({
...this.value,
virtual_calendars: virtualCalendars
});
this.render();
}
moveVirtualCalendar(index, direction) {
const renderableVirtualCalendars = this.getRenderableVirtualCalendarsForEditor();
const renderIndex = renderableVirtualCalendars.findIndex((entry) => entry.index === index);
const swapEntry = renderableVirtualCalendars[renderIndex + direction];
const virtualCalendars = [...this.getVirtualCalendarsForEditor()];
if (renderIndex === -1 || !swapEntry || index < 0 || index >= virtualCalendars.length) return;
[virtualCalendars[index], virtualCalendars[swapEntry.index]] = [virtualCalendars[swapEntry.index], virtualCalendars[index]];
this.emitConfigChanged({
...this.value,
virtual_calendars: virtualCalendars
});
this.render();
}
handleVirtualCalendarAction(event) {
const action = event.currentTarget.dataset.virtualCalendarAction;
const index = Number(event.currentTarget.dataset.virtualCalendarIndex);
if (action === 'add') this.addVirtualCalendar();
else if (action === 'remove') this.removeVirtualCalendar(index);
else if (action === 'move-up') this.moveVirtualCalendar(index, -1);
else if (action === 'move-down') this.moveVirtualCalendar(index, 1);
}
handleVirtualCalendarInput(event) {
const index = Number(event.target.dataset.virtualCalendarIndex);
const field = event.target.dataset.virtualCalendarField;
if (!field) return;
const value = String(event.target.value || '').trim();
this.updateVirtualCalendar(index, {
[field]: field === 'icon' || field === 'color' ? (value || null) : value
}, { render: field === 'id' || field === 'name' || field === 'color' });
}
handleVirtualCalendarEntityChange(event) {
const index = Number(event.target.dataset.virtualCalendarIndex);
const checkedEntities = Array.from(this.querySelectorAll(`input[data-virtual-calendar-entity][data-virtual-calendar-index="${index}"]:checked`))
.map((input) => input.value)
.filter((entityId) => typeof entityId === 'string' && entityId.startsWith('calendar.'));
this.updateVirtualCalendar(index, { entities: checkedEntities });
}
renderWeekdayCheckboxes() {
const selectedWeekdays = new Set(this.getListFieldValue('week_days'));
const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
return `
${days.map((day) => `${day}`).join('')}
${days.map((_, index) => `
`).join('')}
`;
}
render() {
this.captureOpenDisclosures();
const displayLayoutSection = this.renderSection('Display & layout', `
${this.renderWeekdayCheckboxes()}
${this._config.show_dashboard_nav_button ? `
` : ''}
${this._config.compact_height ? '' : `
`}
`);
const colorStylingSection = this.renderSection('Colors & styling', `
${this.renderSubSection('Calendar colors', `${this.renderMapRowInputs('colors', { label: 'calendar colors', inputType: 'color' })}
`)}
${this.renderSubSection('Event font colors', `${this.renderMapRowInputs('event_font_colors', { label: 'event font colors', inputType: 'color' })}
`)}
${this.renderSubSection('Calendar display names', `${this.renderMapRowInputs('calendar_names', { label: 'calendar names', placeholder: 'Display name' })}
`)}
${this.renderSubSection('Calendar badge icons', `${this.renderMapRowInputs('calendar_badge_icons', { label: 'badge icons', placeholder: 'mdi:icon or URL' })}
`)}
${this.renderSubSection('Calendar badge people', `${this.renderMapRowInputs('calendar_person_entities', { label: 'badge people', placeholder: 'person.ian' })}
`)}
`);
const backgroundSection = this.renderSection('Background image', `
`);
const eventSection = this.renderSection('Events & schedule', `
${this._config.event_color_mode === 'left-neutral' ? `
${this.renderColorInputControl({ id: 'event_neutral_background', field: 'event_neutral_background', value: this._config.event_neutral_background || '#F8F3E9' })}
` : ''}
${this._config.event_color_mode === 'left-tint' ? `
` : ''}
${this._config.event_color_mode !== 'classic' ? `
` : ''}
${this.renderSubSection('Hide times for calendars', `${this.renderCalendarListCheckboxes('hide_times_for_calendars', { label: 'hidden times calendars' })}
`)}
${this._config.combine_calendars ? `
${this._combineBackgroundMode === 'hex' ? `
` : ''}
` : ''}
`);
const managementSection = this.renderSection('Event management', `
${this.renderSubSection('Read-only calendars', `${this.renderCalendarListCheckboxes('readonly_calendars', { label: 'read-only calendars' })}
`)}
${this.renderSubSection('Hide header badges for calendars', `${this.renderCalendarListCheckboxes('hide_badge_calendars', { label: 'hidden header badges calendars' })}
`)}
${this.renderSubSection('Calendars hidden by default', `${this.renderCalendarListCheckboxes('default_hidden_calendars', { label: 'calendars hidden by default' })}
`)}
${this.renderSubSection('Virtual calendars', this.renderVirtualCalendarsEditor())}
`);
const localeSection = this.renderSection('Localization & preferences', `
`);
const diagnosticsSection = this.renderSection('About / Diagnostics', `
Daylight Calendar Card
Loaded version: ${this.escapeHtml(getDaylightCalendarCardVersion())}
Resource file: skylight-calendar-card.js
If this version does not match the version shown in HACS, Home Assistant may be loading a cached or stale resource.
`);
this.innerHTML = `
Select one or more calendar entities to display.
${displayLayoutSection}
${colorStylingSection}
${backgroundSection}
${eventSection}
${managementSection}
${localeSection}
${diagnosticsSection}
${this.renderColorPickerDialog()}
`;
this.refreshCalendarEntities();
this.querySelectorAll('[data-field]').forEach((input) => {
const eventName = input.type === 'text' ? 'input' : 'change';
input.addEventListener(eventName, (event) => this.handleChange(event));
});
this.querySelectorAll('[data-map-field]').forEach((input) => {
input.addEventListener('change', (event) => this.handleChange(event));
});
this.querySelectorAll('[data-list-field]').forEach((input) => {
input.addEventListener('change', (event) => this.handleChange(event));
});
this.querySelectorAll('[data-weekday]').forEach((input) => {
input.addEventListener('change', (event) => this.handleChange(event));
});
this.querySelectorAll('[data-virtual-calendar-action]').forEach((button) => {
button.addEventListener('click', (event) => this.handleVirtualCalendarAction(event));
});
this.querySelectorAll('[data-virtual-calendar-field]').forEach((input) => {
input.addEventListener('change', (event) => this.handleVirtualCalendarInput(event));
});
this.querySelectorAll('[data-virtual-calendar-entity]').forEach((input) => {
input.addEventListener('change', (event) => this.handleVirtualCalendarEntityChange(event));
});
this.querySelectorAll('[data-color-trigger]').forEach((trigger) => {
trigger.addEventListener('click', () => this.openColorPicker(trigger.dataset.colorField, trigger.dataset.colorMapKey || null));
});
const wheel = this.querySelector('#color-picker-wheel');
if (wheel) {
let dragging = false;
wheel.addEventListener('pointerdown', (event) => {
dragging = true;
this.updateColorPickerFromWheelEvent(event);
});
wheel.addEventListener('pointermove', (event) => {
if (dragging) this.updateColorPickerFromWheelEvent(event);
});
wheel.addEventListener('pointerup', () => { dragging = false; });
wheel.addEventListener('pointerleave', () => { dragging = false; });
}
this.querySelectorAll('[data-color-preset]').forEach((preset) => {
preset.addEventListener('click', () => {
const hex = preset.dataset.colorPreset;
const hsv = this.hexToHsv(hex);
this._colorPickerState.h = hsv.h;
this._colorPickerState.s = hsv.s;
this._colorPickerState.v = hsv.v;
this._colorPickerState.color = this.hsvToHex(hsv.h, hsv.s, hsv.v);
this.syncColorPickerUi();
});
});
this.querySelectorAll('[data-close-color-picker]').forEach((button) => {
button.addEventListener('click', () => this.closeColorPicker());
});
const brightnessInput = this.querySelector('#color-picker-brightness');
if (brightnessInput) {
brightnessInput.addEventListener('input', (event) => {
this._colorPickerState.v = Number(event.target.value) / 100;
this._colorPickerState.color = this.hsvToHex(this._colorPickerState.h, this._colorPickerState.s, this._colorPickerState.v);
this.syncColorPickerUi();
});
}
const hexInput = this.querySelector('#color-picker-hex');
if (hexInput) {
const syncHexColor = () => {
const normalizedHex = this.normalizeHexColorInput(hexInput.value);
if (!normalizedHex) return;
const hsv = this.hexToHsv(normalizedHex);
this._colorPickerState.h = hsv.h;
this._colorPickerState.s = hsv.s;
this._colorPickerState.v = hsv.v;
this._colorPickerState.color = normalizedHex;
this.syncColorPickerUi();
};
hexInput.addEventListener('input', syncHexColor);
hexInput.addEventListener('change', syncHexColor);
}
const applyBtn = this.querySelector('#apply-color-picker');
if (applyBtn) {
applyBtn.addEventListener('click', () => {
this.applyColorPickerColor(this._colorPickerState.color);
});
}
this._rendered = true;
}
refreshCalendarEntities() {
const entityListContainer = this.querySelector('#entity-list');
if (!entityListContainer) return;
const calendarEntities = this.getCalendarEntities();
const nextKey = calendarEntities.join('|');
if (this._lastCalendarEntitiesKey === nextKey && entityListContainer.childElementCount > 0) {
const selectedEntities = new Set(this._config.entities || []);
entityListContainer.querySelectorAll('input[data-field="entity"]').forEach((checkbox) => {
checkbox.checked = selectedEntities.has(checkbox.value);
});
return;
}
this._lastCalendarEntitiesKey = nextKey;
const selectedEntities = new Set(this._config.entities || []);
if (calendarEntities.length === 0) {
entityListContainer.innerHTML = 'No calendar entities found yet.
';
return;
}
entityListContainer.innerHTML = calendarEntities
.map((entityId) => {
const friendlyName = this._hass?.states?.[entityId]?.attributes?.friendly_name || entityId;
const checked = selectedEntities.has(entityId) ? 'checked' : '';
return ``;
})
.join('');
entityListContainer.querySelectorAll('input[data-field="entity"]').forEach((input) => {
input.addEventListener('change', (event) => this.handleChange(event));
});
}
updateFieldValues() {
const titleInput = this.querySelector('input[data-field="title"]');
if (titleInput && document.activeElement !== titleInput) {
titleInput.value = this._config.title || '';
}
const defaultView = this.querySelector('select[data-field="default_view"]');
if (defaultView && document.activeElement !== defaultView) {
defaultView.value = this.normalizeDefaultViewForEditor(this._config.default_view);
}
const firstDayOfWeek = this.querySelector('select[data-field="first_day_of_week"]');
if (firstDayOfWeek && document.activeElement !== firstDayOfWeek) {
firstDayOfWeek.value = String(Number(this._config.first_day_of_week ?? 0));
}
this.querySelectorAll('input[type="checkbox"][data-field]').forEach((checkbox) => {
if (checkbox.dataset.field === 'enable_event_management') {
checkbox.checked = this._config.enable_event_management !== false;
return;
}
checkbox.checked = !!this._config[checkbox.dataset.field];
});
this.querySelectorAll('input[type="checkbox"][data-list-field]').forEach((checkbox) => {
const listField = checkbox.dataset.listField;
checkbox.checked = this.getListFieldValue(listField).includes(checkbox.value);
});
this.querySelectorAll('input[data-type="number"], input[data-type="nullable-number"], input[data-type="list"], input[data-field="language"], input[data-field="locale"], input[data-field="header_time_sensor"], input[data-field="header_weather_sensor"], input[data-field="preference_storage_key"], input[data-field="background_image_url"], input[data-field="background_image_size"], input[data-field="background_image_position"], input[data-field="background_image_repeat"]').forEach((input) => {
if (document.activeElement === input) return;
const field = input.dataset.field;
const type = input.dataset.type;
if (type === 'list') input.value = this.getListInputValue(field);
else if (type === 'nullable-number') input.value = this._config[field] ?? '';
else if (type === 'number') input.value = Number(this._config[field] ?? this.getEditorDefaultValue(field));
else input.value = this._config[field] || '';
});
this.querySelectorAll('input[type="checkbox"][data-weekday]').forEach((checkbox) => {
const weekday = Number(checkbox.dataset.weekday);
checkbox.checked = this.getListFieldValue('week_days').includes(weekday);
});
this.querySelectorAll('select[data-field]').forEach((select) => {
if (document.activeElement === select) return;
const field = select.dataset.field;
if (field === 'default_view') return;
if (field === 'first_day_of_week') return;
if (field === 'event_calendar_bubble_mode') {
select.value = this.getEventCalendarBubbleMode();
return;
}
if (field === 'combine_background_mode') {
select.value = this._combineBackgroundMode;
return;
}
select.value = this._config[field] || '';
});
const combineBackgroundHexInput = this.querySelector('input[data-field="combine_background_hex"]');
if (combineBackgroundHexInput && document.activeElement !== combineBackgroundHexInput) {
combineBackgroundHexInput.value = this._combineBackgroundHexDraft || '#FFFFFF';
}
const headerColorTextInput = this.querySelector('input[data-field="header_color_text"]');
if (headerColorTextInput && document.activeElement !== headerColorTextInput) {
headerColorTextInput.value = this._config.header_color || '';
}
const headerTextColorTextInput = this.querySelector('input[data-field="header_text_color_text"]');
if (headerTextColorTextInput && document.activeElement !== headerTextColorTextInput) {
headerTextColorTextInput.value = this._config.header_text_color || '';
}
this.querySelectorAll('[data-map-field]').forEach((input) => {
if (document.activeElement === input) return;
const mapField = input.dataset.mapField;
const mapKey = input.dataset.mapKey;
const value = this.getMapFieldValue(mapField)[mapKey] || '';
input.value = value;
});
this.querySelectorAll('[data-virtual-calendar-field]').forEach((input) => {
if (document.activeElement === input) return;
const index = Number(input.dataset.virtualCalendarIndex);
const field = input.dataset.virtualCalendarField;
const virtualCalendar = this.getVirtualCalendarsForEditor()[index] || {};
input.value = virtualCalendar[field] || '';
});
this.querySelectorAll('[data-virtual-calendar-entity]').forEach((checkbox) => {
const index = Number(checkbox.dataset.virtualCalendarIndex);
const virtualCalendar = this.getVirtualCalendarsForEditor()[index] || {};
const entities = Array.isArray(virtualCalendar.entities) ? virtualCalendar.entities : [];
checkbox.checked = entities.includes(checkbox.value);
});
this.querySelectorAll('.selected-color-swatch').forEach((swatch) => {
const field = swatch.dataset.colorField;
const mapKey = swatch.dataset.colorMapKey || null;
const nextColor = this.getColorValue(field, mapKey);
swatch.style.setProperty('--selected-color', nextColor);
});
this.refreshCalendarEntities();
}
parseList(value, { asNumbers = false } = {}) {
const parsed = String(value || '')
.split(',')
.map((item) => item.trim())
.filter(Boolean);
if (!asNumbers) return parsed;
return parsed
.map((item) => Number(item))
.filter((item) => Number.isFinite(item));
}
handleChange(event) {
const field = event.target.dataset.field;
const nextConfig = { ...this.value };
if (field === 'event_calendar_bubble_mode') {
const selectedMode = event.target.value;
if (selectedMode === 'friendly_name') {
nextConfig.event_calendar_friendly_name = true;
nextConfig.hide_event_calendar_bubble = false;
} else if (selectedMode === 'none') {
nextConfig.event_calendar_friendly_name = false;
nextConfig.hide_event_calendar_bubble = true;
} else {
nextConfig.event_calendar_friendly_name = false;
nextConfig.hide_event_calendar_bubble = false;
}
this._config = nextConfig;
this.dispatchEvent(
new CustomEvent('config-changed', {
detail: { config: nextConfig },
bubbles: true,
composed: true
})
);
return;
}
if (field === 'combine_background_mode') {
this._combineBackgroundMode = event.target.value;
if (this._combineBackgroundMode === 'hex') {
const currentHex = this.normalizeHexColor(this._config.combine_background) || this._combineBackgroundHexDraft || '#FFFFFF';
this._combineBackgroundHexDraft = currentHex;
nextConfig.combine_background = currentHex;
} else {
this._combineBackgroundHexDraft = '';
nextConfig.combine_background = this._combineBackgroundMode;
}
this._config = nextConfig;
this.render();
this.dispatchEvent(
new CustomEvent('config-changed', {
detail: { config: nextConfig },
bubbles: true,
composed: true
})
);
return;
}
if (field === 'combine_background_hex') {
const normalizedHex = this.normalizeHexColor(event.target.value);
if (normalizedHex) {
this._combineBackgroundHexDraft = normalizedHex;
nextConfig.combine_background = normalizedHex;
} else {
this._combineBackgroundHexDraft = event.target.value;
}
this._config = nextConfig;
this.render();
this.dispatchEvent(
new CustomEvent('config-changed', {
detail: { config: nextConfig },
bubbles: true,
composed: true
})
);
return;
}
if (field === 'entity') {
const selected = Array.from(this.querySelectorAll('input[data-field="entity"]:checked')).map((input) => input.value);
nextConfig.entities = selected;
this._config = nextConfig;
this.render();
this.dispatchEvent(
new CustomEvent('config-changed', {
detail: { config: nextConfig },
bubbles: true,
composed: true
})
);
return;
} else if (event.target.dataset.mapField) {
const mapField = event.target.dataset.mapField;
const mapKey = event.target.dataset.mapKey;
const mapValue = { ...this.getMapFieldValue(mapField) };
const nextValue = event.target.value;
if (nextValue === '') delete mapValue[mapKey];
else mapValue[mapKey] = nextValue;
nextConfig[mapField] = mapValue;
} else if (event.target.dataset.listField) {
const listField = event.target.dataset.listField;
const checkedValues = Array.from(this.querySelectorAll(`input[data-list-field="${listField}"]:checked`)).map((input) => input.value);
nextConfig[listField] = checkedValues;
} else if (event.target.dataset.weekday !== undefined) {
const selectedWeekdays = Array.from(this.querySelectorAll('input[data-weekday]:checked'))
.map((input) => Number(input.dataset.weekday))
.filter((value) => Number.isFinite(value))
.sort((a, b) => a - b);
nextConfig.week_days = selectedWeekdays;
} else if (event.target.type === 'checkbox') {
nextConfig[field] = event.target.checked;
if (field === 'background_transparent') {
nextConfig.background_opacity = event.target.checked ? 100 : 0;
} else if (field === 'header_background_transparent') {
nextConfig.header_background_opacity = event.target.checked ? 100 : 0;
}
if (field === 'compact_height' || field === 'combine_calendars' || field === 'show_dashboard_nav_button') {
this._config = nextConfig;
this.render();
this.dispatchEvent(
new CustomEvent('config-changed', {
detail: { config: nextConfig },
bubbles: true,
composed: true
})
);
return;
}
} else if (event.target.dataset.type === 'color') {
nextConfig[field] = event.target.value;
} else if (event.target.dataset.type === 'color-text') {
nextConfig.header_color = event.target.value;
} else if (event.target.dataset.type === 'header-text-color-text') {
nextConfig.header_text_color = event.target.value;
} else if (event.target.dataset.type === 'number') {
if (event.target.value === '') {
nextConfig[field] = this.getEditorDefaultValue(field);
if (field === 'background_opacity') {
nextConfig.background_transparent = false;
}
if (field === 'header_background_opacity') {
nextConfig.header_background_transparent = false;
}
} else {
const numericValue = Number(event.target.value);
const parsedValue = Number.isFinite(numericValue) ? numericValue : this.getEditorDefaultValue(field);
if (field === 'week_start_hour' || field === 'week_end_hour') {
nextConfig[field] = Math.min(23, Math.max(0, parsedValue));
} else if (field === 'header_background_opacity') {
nextConfig.header_background_opacity = this.normalizeBackgroundOpacity(parsedValue, 0);
nextConfig.header_background_transparent = nextConfig.header_background_opacity >= 100;
} else if (field === 'background_opacity') {
nextConfig.background_opacity = this.normalizeBackgroundOpacity(parsedValue, 0);
nextConfig.background_transparent = nextConfig.background_opacity >= 100;
} else if (field === 'event_tint_opacity') {
nextConfig.event_tint_opacity = this.normalizeBackgroundOpacity(parsedValue, 80);
} else {
nextConfig[field] = parsedValue;
}
}
} else if (event.target.dataset.type === 'nullable-number') {
if (event.target.value === '') {
nextConfig[field] = null;
} else {
const numericValue = Number(event.target.value);
nextConfig[field] = Number.isFinite(numericValue) ? numericValue : null;
}
} else if (event.target.dataset.type === 'list') {
nextConfig[field] = this.parseList(event.target.value);
} else {
nextConfig[field] = event.target.value;
if (field === 'event_color_mode' || field === 'past_event_mode') {
this._config = nextConfig;
this.render();
this.dispatchEvent(
new CustomEvent('config-changed', {
detail: { config: nextConfig },
bubbles: true,
composed: true
})
);
return;
}
}
this._config = nextConfig;
this.dispatchEvent(
new CustomEvent('config-changed', {
detail: { config: nextConfig },
bubbles: true,
composed: true
})
);
}
}
class LegacySkylightCalendarCard extends SkylightCalendarCard {}
class LegacySkylightCalendarCardEditor extends SkylightCalendarCardEditor {}
customElements.define('daylight-calendar-card', SkylightCalendarCard);
customElements.define('daylight-calendar-card-editor', SkylightCalendarCardEditor);
customElements.define('skylight-calendar-card', LegacySkylightCalendarCard);
customElements.define('skylight-calendar-card-editor', LegacySkylightCalendarCardEditor);
window.customCards = window.customCards || [];
window.customCards.push({
type: 'daylight-calendar-card',
name: 'Daylight Calendar Card',
description: 'A bright, family-friendly calendar card for Home Assistant dashboards.',
preview: true,
documentationURL: 'https://docs.daylightcalendar.com'
});