// This file is generated from src/ by npm run build. Do not edit directly.
const COMMON_NAMED_COLORS = {
black: '#000000',
white: '#FFFFFF',
red: '#FF0000',
lime: '#00FF00',
green: '#008000',
'lime/green': '#00FF00',
limegreen: '#00FF00',
blue: '#0000FF',
yellow: '#FFFF00',
cyan: '#00FFFF',
aqua: '#00FFFF',
'cyan/aqua': '#00FFFF',
magenta: '#FF00FF',
fuchsia: '#FF00FF',
'magenta/fuchsia': '#FF00FF',
silver: '#C0C0C0',
gray: '#808080',
grey: '#808080',
maroon: '#800000',
olive: '#808000',
darkgreen: '#008000',
'dark green': '#008000',
'green dark': '#008000',
greendark: '#008000',
purple: '#800080',
teal: '#008080',
navy: '#000080',
orange: '#FFA500',
pink: '#FFC0CB'
};
const DEFAULT_LANGUAGE = 'en';
const DEFAULT_VIEW = 'month';
const DEFAULT_WEEK_DAYS = [0, 1, 2, 3, 4, 5, 6];
const DEFAULT_THEME_MODE = 'auto';
const DEFAULT_EVENT_TITLE_PREFIX = 'none';
const DEFAULT_PAST_EVENT_MODE = 'none';
const DEFAULT_DAY_BADGE_LAYOUT_WEEK = 'inline';
const DEFAULT_BACKGROUND_IMAGE_SIZE = 'cover';
const DEFAULT_BACKGROUND_IMAGE_POSITION = 'center';
const DEFAULT_BACKGROUND_IMAGE_REPEAT = 'no-repeat';
const DEFAULT_COMBINE_STYLE = 'bars';
const DEFAULT_COMBINE_BACKGROUND = 'primary';
const DEFAULT_EVENT_COLOR_MODE = 'classic';
const DEFAULT_EVENT_NEUTRAL_BACKGROUND = '#F8F3E9';
const DEFAULT_EVENT_TINT_OPACITY = 80;
const DEFAULT_EVENT_COLOR_BAR_WIDTH = 18;
const DEFAULT_EVENT_MODAL_SIZE = 'medium';
const THEME_MODE_OPTIONS = ['auto', 'light', 'dark'];
const EVENT_TITLE_PREFIX_OPTIONS = ['friendly_name', 'badge_icon', 'none'];
const PAST_EVENT_MODE_OPTIONS = ['none', 'hide', 'muted'];
const DAY_BADGE_LAYOUT_WEEK_OPTIONS = ['inline', 'stacked'];
const COMBINE_STYLE_OPTIONS = ['stripes', 'bars', 'dots'];
const EVENT_COLOR_MODE_OPTIONS = ['classic', 'left-neutral', 'left-tint'];
const COMBINE_BACKGROUND_MODE_OPTIONS = ['neutral', 'primary'];
const EVENT_MODAL_SIZE_OPTIONS = ['narrow', 'medium', 'wide', 'full'];
const EVENT_TITLE_PREFIX_ALIASES = {
icon: 'badge_icon',
badge: 'badge_icon',
badgeicon: 'badge_icon',
friendly: 'friendly_name',
friendlyname: 'friendly_name'
};
const HIDDEN_CALENDAR_VISIBILITY_VALUES = [false, 'hide', 'hidden', 'off'];
const VISIBLE_CALENDAR_VISIBILITY_VALUES = [true, 'show', 'shown', 'visible', 'on'];
const DEFAULT_CONFIG_VALUES = {
firstDayOfWeek: 0,
calendar_names: {},
calendar_badge_icons: {},
week_days: DEFAULT_WEEK_DAYS,
rolling_days_week_compact: null,
rolling_days_schedule: null,
rolling_days_agenda: null,
rolling_weeks: null,
show_week_numbers_month: false,
show_all_events_month: false,
show_all_details_month: false,
hide_the_past: false,
hide_empty_days: false,
agenda_compact_events: false,
display_full_weekday_names: false,
shorten_event_times: false,
disable_swipe_controls: false,
lock_schedule_hours: false,
compact_height: false,
compact_width: false,
height_scale: 1.0,
compact_header: false,
hide_year: false,
hide_calendars: false,
hide_header: false,
hide_calendar_names: 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,
hide_event_calendar_bubble: false,
show_event_location: false,
use_short_location: false,
event_font_size: 11,
event_time_font_size: 9,
event_location_font_size: 9,
event_calendar_friendly_name: false,
hide_times_for_calendars: [],
show_current_time_bar: false,
header_color: 'var(--primary-color)',
background_opacity_transparent_threshold: 100,
background_image_url: null,
combine_calendars: false,
enable_event_management: true,
readonly_calendars: [],
hide_badge_calendars: [],
virtual_calendars: [],
language: null,
locale: null,
preference_storage_key: null
};
const DEFAULT_STUB_CONFIG = {
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,
time_zone: '',
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: [],
day_badge_layout_week: 'inline',
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'
};
const createDefaultStubConfig = () => ({
...DEFAULT_STUB_CONFIG,
entities: [...DEFAULT_STUB_CONFIG.entities],
week_days: [...DEFAULT_STUB_CONFIG.week_days],
day_badges: [...DEFAULT_STUB_CONFIG.day_badges],
calendar_person_entities: { ...DEFAULT_STUB_CONFIG.calendar_person_entities },
default_hidden_calendars: [...DEFAULT_STUB_CONFIG.default_hidden_calendars]
});
function createConfigNormalizationSchema({
hasCustomTitle,
normalizeDashboardPath,
normalizeCombineStyle,
normalizeCombineBackground,
normalizeEventColorMode,
normalizeSingleColor,
normalizeBackgroundOpacity,
normalizeEventModalSize,
normalizeVirtualCalendars,
normalizeDefaultDarkMode,
getDefaultTitle
}) {
return [
{ key: 'title', defaultValue: ({ rawConfig, language }) => hasCustomTitle ? rawConfig.title : getDefaultTitle(language) },
{ key: 'entities', defaultValue: ({ rawConfig }) => rawConfig.entities },
{ key: 'firstDayOfWeek', defaultValue: ({ rawConfig }) => rawConfig.first_day_of_week || DEFAULT_CONFIG_VALUES.firstDayOfWeek },
{ key: 'colors', defaultValue: ({ derived }) => derived.normalizedCalendarColors },
{ key: 'calendar_names', defaultValue: ({ rawConfig }) => rawConfig.calendar_names || { ...DEFAULT_CONFIG_VALUES.calendar_names } },
{ key: 'calendar_badge_icons', defaultValue: ({ rawConfig }) => rawConfig.calendar_badge_icons || { ...DEFAULT_CONFIG_VALUES.calendar_badge_icons } },
{ key: 'calendar_person_entities', defaultValue: ({ derived }) => derived.normalizedCalendarPersonEntities, normalize: ({ derived }) => derived.normalizedCalendarPersonEntities },
{ key: 'max_events', defaultValue: ({ rawConfig }) => rawConfig.max_events },
{ key: 'default_view', defaultValue: ({ derived }) => derived.normalizedDefaultView || DEFAULT_VIEW, normalize: ({ derived }) => derived.normalizedDefaultView || DEFAULT_VIEW },
{ key: 'week_days', defaultValue: ({ rawConfig }) => rawConfig.week_days || [...DEFAULT_CONFIG_VALUES.week_days] },
{ key: 'rolling_days_week_compact', defaultValue: ({ rawConfig }) => rawConfig.rolling_days_week_compact ?? DEFAULT_CONFIG_VALUES.rolling_days_week_compact },
{ key: 'rolling_days_schedule', defaultValue: ({ rawConfig }) => rawConfig.rolling_days_schedule ?? DEFAULT_CONFIG_VALUES.rolling_days_schedule },
{ key: 'rolling_days_agenda', defaultValue: ({ rawConfig }) => rawConfig.rolling_days_agenda ?? DEFAULT_CONFIG_VALUES.rolling_days_agenda, normalize: ({ rawConfig }) => rawConfig.rolling_days_agenda ?? DEFAULT_CONFIG_VALUES.rolling_days_agenda },
{ key: 'rolling_weeks', defaultValue: ({ rawConfig }) => rawConfig.rolling_weeks || DEFAULT_CONFIG_VALUES.rolling_weeks },
{ key: 'show_week_numbers_month', defaultValue: ({ rawConfig }) => rawConfig.show_week_numbers_month || DEFAULT_CONFIG_VALUES.show_week_numbers_month },
{ key: 'show_all_events_month', defaultValue: ({ rawConfig }) => rawConfig.show_all_events_month || DEFAULT_CONFIG_VALUES.show_all_events_month },
{ key: 'show_all_details_month', defaultValue: ({ rawConfig }) => rawConfig.show_all_details_month || DEFAULT_CONFIG_VALUES.show_all_details_month },
{ key: 'hide_the_past', defaultValue: ({ rawConfig }) => rawConfig.hide_the_past || DEFAULT_CONFIG_VALUES.hide_the_past, normalize: ({ rawConfig }) => rawConfig.hide_the_past || DEFAULT_CONFIG_VALUES.hide_the_past },
{ key: 'past_event_mode', defaultValue: ({ derived }) => derived.normalizedPastEventMode, normalize: ({ derived }) => derived.normalizedPastEventMode },
{ key: 'hide_empty_days', defaultValue: ({ rawConfig }) => rawConfig.hide_empty_days || DEFAULT_CONFIG_VALUES.hide_empty_days },
{ key: 'agenda_compact_events', defaultValue: ({ rawConfig }) => rawConfig.agenda_compact_events ?? DEFAULT_CONFIG_VALUES.agenda_compact_events, normalize: ({ rawConfig }) => rawConfig.agenda_compact_events ?? DEFAULT_CONFIG_VALUES.agenda_compact_events },
{ key: 'display_full_weekday_names', defaultValue: ({ rawConfig }) => rawConfig.display_full_weekday_names ?? DEFAULT_CONFIG_VALUES.display_full_weekday_names },
{ key: 'shorten_event_times', defaultValue: ({ rawConfig }) => rawConfig.shorten_event_times ?? DEFAULT_CONFIG_VALUES.shorten_event_times },
{ key: 'time_zone', defaultValue: ({ derived }) => derived.normalizedTimeZone, normalize: ({ derived }) => derived.normalizedTimeZone },
{ key: 'disable_swipe_controls', defaultValue: ({ rawConfig }) => rawConfig.disable_swipe_controls ?? DEFAULT_CONFIG_VALUES.disable_swipe_controls },
{ key: 'week_start_hour', defaultValue: ({ derived }) => derived.normalizedWeekStartHour },
{ key: 'week_end_hour', defaultValue: ({ derived }) => derived.normalizedWeekEndHour },
{ key: 'lock_schedule_hours', defaultValue: ({ rawConfig }) => rawConfig.lock_schedule_hours ?? DEFAULT_CONFIG_VALUES.lock_schedule_hours },
{ key: 'compact_height', defaultValue: ({ rawConfig }) => rawConfig.compact_height || DEFAULT_CONFIG_VALUES.compact_height },
{ key: 'compact_width', defaultValue: ({ rawConfig }) => rawConfig.compact_width || DEFAULT_CONFIG_VALUES.compact_width },
{ key: 'height_scale', defaultValue: ({ rawConfig }) => rawConfig.height_scale || DEFAULT_CONFIG_VALUES.height_scale },
{ key: 'compact_header', defaultValue: ({ rawConfig }) => rawConfig.compact_header || DEFAULT_CONFIG_VALUES.compact_header },
{ key: 'hide_year', defaultValue: ({ rawConfig }) => rawConfig.hide_year || DEFAULT_CONFIG_VALUES.hide_year },
{ key: 'hide_calendars', defaultValue: ({ rawConfig }) => rawConfig.hide_calendars || DEFAULT_CONFIG_VALUES.hide_calendars },
{ key: 'hide_header', defaultValue: ({ rawConfig }) => rawConfig.hide_header || DEFAULT_CONFIG_VALUES.hide_header },
{ key: 'hide_calendar_names', defaultValue: ({ rawConfig }) => rawConfig.hide_calendar_names || DEFAULT_CONFIG_VALUES.hide_calendar_names },
{ key: 'hide_controls', defaultValue: ({ rawConfig }) => rawConfig.hide_controls || DEFAULT_CONFIG_VALUES.hide_controls },
{ key: 'hide_navigation_buttons', defaultValue: ({ rawConfig }) => rawConfig.hide_navigation_buttons || DEFAULT_CONFIG_VALUES.hide_navigation_buttons },
{ key: 'hide_add_event_button', defaultValue: ({ rawConfig }) => rawConfig.hide_add_event_button || DEFAULT_CONFIG_VALUES.hide_add_event_button },
{ key: 'hide_view_selector', defaultValue: ({ rawConfig }) => rawConfig.hide_view_selector || DEFAULT_CONFIG_VALUES.hide_view_selector },
{ key: 'hide_dark_mode_toggle', defaultValue: ({ rawConfig }) => rawConfig.hide_dark_mode_toggle || DEFAULT_CONFIG_VALUES.hide_dark_mode_toggle },
{ key: 'show_dashboard_nav_button', defaultValue: ({ rawConfig }) => rawConfig.show_dashboard_nav_button || DEFAULT_CONFIG_VALUES.show_dashboard_nav_button },
{ key: 'header_dashboard_path', defaultValue: ({ rawConfig }) => normalizeDashboardPath(rawConfig.header_dashboard_path), normalize: ({ rawConfig }) => normalizeDashboardPath(rawConfig.header_dashboard_path) },
{ key: 'header_time_sensor', defaultValue: ({ derived }) => derived.normalizedHeaderTimeSensor, normalize: ({ derived }) => derived.normalizedHeaderTimeSensor },
{ key: 'header_weather_sensor', defaultValue: ({ derived }) => derived.normalizedHeaderWeatherSensor, normalize: ({ derived }) => derived.normalizedHeaderWeatherSensor },
{ key: 'hide_event_calendar_bubble', defaultValue: ({ rawConfig }) => rawConfig.hide_event_calendar_bubble || DEFAULT_CONFIG_VALUES.hide_event_calendar_bubble },
{ key: 'show_event_location', defaultValue: ({ rawConfig }) => rawConfig.show_event_location || DEFAULT_CONFIG_VALUES.show_event_location },
{ key: 'use_short_location', defaultValue: ({ rawConfig }) => rawConfig.use_short_location || DEFAULT_CONFIG_VALUES.use_short_location },
{ key: 'event_font_size', defaultValue: ({ rawConfig }) => rawConfig.event_font_size ?? DEFAULT_CONFIG_VALUES.event_font_size },
{ key: 'event_time_font_size', defaultValue: ({ rawConfig }) => rawConfig.event_time_font_size ?? DEFAULT_CONFIG_VALUES.event_time_font_size },
{ key: 'event_location_font_size', defaultValue: ({ rawConfig }) => rawConfig.event_location_font_size ?? DEFAULT_CONFIG_VALUES.event_location_font_size },
{ key: 'event_calendar_friendly_name', defaultValue: ({ rawConfig }) => rawConfig.event_calendar_friendly_name || DEFAULT_CONFIG_VALUES.event_calendar_friendly_name },
{ key: 'event_title_prefix', defaultValue: ({ derived }) => derived.normalizedEventTitlePrefix, normalize: ({ derived }) => derived.normalizedEventTitlePrefix },
{ key: 'event_font_colors', defaultValue: ({ derived }) => derived.normalizedEventFontColors },
{ key: 'event_styles', defaultValue: ({ derived }) => derived.normalizedEventStyles, normalize: ({ derived }) => derived.normalizedEventStyles },
{ key: 'day_styles', defaultValue: ({ derived }) => derived.normalizedDayStyles, normalize: ({ derived }) => derived.normalizedDayStyles },
{ key: 'day_badges', defaultValue: ({ derived }) => derived.normalizedDayBadges, normalize: ({ derived }) => derived.normalizedDayBadges },
{ key: 'day_badge_layout_week', defaultValue: ({ derived }) => derived.normalizedDayBadgeLayoutWeek, normalize: ({ derived }) => derived.normalizedDayBadgeLayoutWeek },
{ key: 'hide_times_for_calendars', defaultValue: ({ rawConfig }) => rawConfig.hide_times_for_calendars || [...DEFAULT_CONFIG_VALUES.hide_times_for_calendars] },
{ key: 'show_current_time_bar', defaultValue: ({ rawConfig }) => rawConfig.show_current_time_bar || DEFAULT_CONFIG_VALUES.show_current_time_bar },
{ key: 'header_color', defaultValue: ({ derived }) => derived.normalizedHeaderColor !== undefined ? derived.normalizedHeaderColor : DEFAULT_CONFIG_VALUES.header_color },
{ key: 'header_text_color', defaultValue: ({ derived }) => derived.normalizedHeaderTextColor },
{ key: 'header_background_transparent', defaultValue: ({ derived }) => derived.normalizedHeaderBackgroundOpacity >= DEFAULT_CONFIG_VALUES.background_opacity_transparent_threshold, normalize: ({ derived }) => derived.normalizedHeaderBackgroundOpacity >= DEFAULT_CONFIG_VALUES.background_opacity_transparent_threshold },
{ key: 'header_background_opacity', defaultValue: ({ derived }) => derived.normalizedHeaderBackgroundOpacity, normalize: ({ derived }) => derived.normalizedHeaderBackgroundOpacity },
{ key: 'background_transparent', defaultValue: ({ derived }) => derived.normalizedBackgroundOpacity >= DEFAULT_CONFIG_VALUES.background_opacity_transparent_threshold, normalize: ({ derived }) => derived.normalizedBackgroundOpacity >= DEFAULT_CONFIG_VALUES.background_opacity_transparent_threshold },
{ key: 'background_opacity', defaultValue: ({ derived }) => derived.normalizedBackgroundOpacity, normalize: ({ derived }) => derived.normalizedBackgroundOpacity },
{ key: 'background_image_url', defaultValue: ({ rawConfig }) => rawConfig.background_image_url || DEFAULT_CONFIG_VALUES.background_image_url },
{ key: 'background_image_size', defaultValue: ({ rawConfig }) => rawConfig.background_image_size || DEFAULT_BACKGROUND_IMAGE_SIZE },
{ key: 'background_image_position', defaultValue: ({ rawConfig }) => rawConfig.background_image_position || DEFAULT_BACKGROUND_IMAGE_POSITION },
{ key: 'background_image_repeat', defaultValue: ({ rawConfig }) => rawConfig.background_image_repeat || DEFAULT_BACKGROUND_IMAGE_REPEAT },
{ key: 'combine_calendars', defaultValue: ({ rawConfig }) => rawConfig.combine_calendars ?? DEFAULT_CONFIG_VALUES.combine_calendars },
{ key: 'combine_style', defaultValue: ({ rawConfig }) => normalizeCombineStyle(rawConfig.combine_style ?? DEFAULT_COMBINE_STYLE) },
{ key: 'combine_background', defaultValue: ({ rawConfig }) => normalizeCombineBackground(rawConfig.combine_background ?? DEFAULT_COMBINE_BACKGROUND) },
{ key: 'combine_calendars_width', defaultValue: ({ derived }) => derived.normalizedCombineWidth, normalize: ({ derived }) => derived.normalizedCombineWidth },
{ key: 'event_color_bar_width', defaultValue: ({ derived }) => derived.normalizedEventBarWidth, normalize: ({ derived }) => derived.normalizedEventBarWidth },
{ key: 'event_color_mode', defaultValue: ({ rawConfig }) => normalizeEventColorMode(rawConfig.event_color_mode ?? DEFAULT_EVENT_COLOR_MODE), normalize: ({ rawConfig }) => normalizeEventColorMode(rawConfig.event_color_mode ?? DEFAULT_EVENT_COLOR_MODE) },
{ key: 'event_neutral_background', defaultValue: ({ rawConfig }) => normalizeSingleColor(rawConfig.event_neutral_background) || DEFAULT_EVENT_NEUTRAL_BACKGROUND, normalize: ({ rawConfig }) => normalizeSingleColor(rawConfig.event_neutral_background) || DEFAULT_EVENT_NEUTRAL_BACKGROUND },
{ key: 'event_tint_opacity', defaultValue: ({ rawConfig }) => normalizeBackgroundOpacity(rawConfig.event_tint_opacity, DEFAULT_EVENT_TINT_OPACITY), normalize: ({ rawConfig }) => normalizeBackgroundOpacity(rawConfig.event_tint_opacity, DEFAULT_EVENT_TINT_OPACITY) },
{ key: 'enable_event_management', defaultValue: ({ rawConfig }) => rawConfig.enable_event_management === false ? false : DEFAULT_CONFIG_VALUES.enable_event_management },
{ key: 'event_modal_size', defaultValue: ({ rawConfig }) => normalizeEventModalSize(rawConfig.event_modal_size), normalize: ({ rawConfig }) => normalizeEventModalSize(rawConfig.event_modal_size) },
{ key: 'readonly_calendars', defaultValue: ({ rawConfig }) => rawConfig.readonly_calendars || [...DEFAULT_CONFIG_VALUES.readonly_calendars] },
{ key: 'hide_badge_calendars', defaultValue: ({ rawConfig }) => rawConfig.hide_badge_calendars || [...DEFAULT_CONFIG_VALUES.hide_badge_calendars] },
{ key: 'default_hidden_calendars', defaultValue: ({ derived }) => derived.normalizedDefaultHiddenCalendars, normalize: ({ derived }) => derived.normalizedDefaultHiddenCalendars },
{ key: 'virtual_calendars', defaultValue: ({ rawConfig }) => normalizeVirtualCalendars(rawConfig.virtual_calendars || [...DEFAULT_CONFIG_VALUES.virtual_calendars]) },
{ key: 'language', defaultValue: ({ rawConfig }) => rawConfig.language || DEFAULT_CONFIG_VALUES.language },
{ key: 'locale', defaultValue: ({ rawConfig }) => rawConfig.locale || DEFAULT_CONFIG_VALUES.locale },
{ key: 'color_scheme', defaultValue: ({ rawConfig }) => normalizeDefaultDarkMode(rawConfig.color_scheme), normalize: ({ rawConfig }) => normalizeDefaultDarkMode(rawConfig.color_scheme) },
{ key: 'preference_storage_key', defaultValue: ({ rawConfig }) => rawConfig.preference_storage_key || DEFAULT_CONFIG_VALUES.preference_storage_key }
];
}
const EDITOR_DEFAULT_VALUES = Object.freeze({
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: DEFAULT_EVENT_COLOR_BAR_WIDTH,
event_color_bar_width: DEFAULT_EVENT_COLOR_BAR_WIDTH,
event_tint_opacity: DEFAULT_EVENT_TINT_OPACITY,
first_day_of_week: 0,
header_background_opacity: 0,
background_opacity: 0
});
const EDITOR_WEEKDAY_OPTIONS = Object.freeze(['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']);
function getEditorDefaultValue(key) {
return Object.prototype.hasOwnProperty.call(EDITOR_DEFAULT_VALUES, key) ? EDITOR_DEFAULT_VALUES[key] : 0;
}
function normalizeDefaultViewForEditor(value) {
if (value === 'week') return 'week-compact';
if (value === 'schedule') return 'week-standard';
return value || DEFAULT_VIEW;
}
function getEventCalendarBubbleMode(config = {}) {
if (config.event_calendar_friendly_name) {
return 'friendly_name';
}
if (config.hide_event_calendar_bubble) {
return 'none';
}
return 'icon';
}
function renderEditorSection({ title, content, disclosureKey, open = false }) {
const openAttr = open ? 'open' : '';
return `
${title}
${content}
`;
}
function renderEditorSubSection({ title, content, disclosureKey, open = false }) {
const openAttr = open ? 'open' : '';
return `
${title}
${content}
`;
}
function renderEditorColorInputControl({ id, field, mapKey = null, value, toColorInputValue }) {
const colorValue = 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 `
`;
}
function renderEditorWeekdayCheckboxes({ selectedWeekdays }) {
const days = EDITOR_WEEKDAY_OPTIONS;
return `
${days.map((day) => `${day} `).join('')}
${days.map((_, index) => `
`).join('')}
`;
}
function normalizeWeatherTemperature(value) {
const numericValue = Number(value);
if (!Number.isFinite(numericValue)) return null;
return `${Math.round(numericValue)}°`;
}
function mapWeatherConditionToIcon(conditionValue) {
const condition = String(conditionValue || '').trim().toLowerCase().replace(/_/g, '-');
if (!condition || condition === 'unknown' || condition === 'unavailable') return '';
const iconMap = {
sunny: 'mdi:weather-sunny',
clear: 'mdi:weather-sunny',
'clear-night': 'mdi:weather-night',
partlycloudy: 'mdi:weather-partly-cloudy',
cloudy: 'mdi:weather-cloudy',
overcast: 'mdi:weather-cloudy',
rainy: 'mdi:weather-rainy',
pouring: 'mdi:weather-pouring',
snow: 'mdi:weather-snowy',
snowy: 'mdi:weather-snowy',
'snowy-rainy': 'mdi:weather-snowy-rainy',
hail: 'mdi:weather-hail',
lightning: 'mdi:weather-lightning',
'lightning-rainy': 'mdi:weather-lightning-rainy',
windy: 'mdi:weather-windy',
'windy-variant': 'mdi:weather-windy-variant',
fog: 'mdi:weather-fog',
exceptional: 'mdi:alert-circle-outline'
};
return iconMap[condition] || '';
}
function normalizeHeaderWeatherData(weatherEntity) {
if (!weatherEntity) return null;
const attrs = weatherEntity.attributes || {};
const condition = attrs.condition || weatherEntity.state;
const conditionIcon = mapWeatherConditionToIcon(condition);
const temperature = normalizeWeatherTemperature(
attrs.temperature ?? attrs.current_temperature ?? attrs.temp ?? weatherEntity.state
);
if (!conditionIcon || !temperature) return null;
return { conditionIcon, temperature };
}
function normalizeForecastForDate(forecasts, date, getDateKey) {
if (!Array.isArray(forecasts) || forecasts.length === 0) return null;
const targetDateKey = getDateKey(date);
const match = forecasts.find((item) => {
const forecastDateValue = item?.datetime || item?.date;
if (!forecastDateValue) return false;
const forecastDate = new Date(forecastDateValue);
if (Number.isNaN(forecastDate.getTime())) return false;
return getDateKey(forecastDate) === targetDateKey;
});
if (!match) return null;
const highTemp = normalizeWeatherTemperature(match.temperature ?? match.temphigh ?? match.high);
const lowTemp = normalizeWeatherTemperature(match.templow ?? match.low ?? match.temperature_low);
const conditionIcon = mapWeatherConditionToIcon(match.condition);
if (!conditionIcon || !highTemp) return null;
return { conditionIcon, highTemp, lowTemp };
}
function getWeatherEntityForecast(weatherEntity, wsForecast) {
return Array.isArray(wsForecast) && wsForecast.length > 0
? wsForecast
: weatherEntity?.attributes?.forecast;
}
function getHeaderWeatherEntityRenderSignature(entityState) {
if (!entityState) return '';
const attrs = entityState.attributes || {};
return JSON.stringify({
state: entityState.state,
temperature: attrs.temperature ?? attrs.current_temperature ?? attrs.temp ?? null,
condition: attrs.condition ?? null,
friendly_name: attrs.friendly_name ?? null,
entity_picture: attrs.entity_picture ?? null,
forecast: Array.isArray(attrs.forecast)
? attrs.forecast.map((forecastItem) => ({
datetime: forecastItem?.datetime ?? forecastItem?.date ?? null,
condition: forecastItem?.condition ?? null,
high: forecastItem?.temperature ?? forecastItem?.temphigh ?? forecastItem?.high ?? null,
low: forecastItem?.templow ?? forecastItem?.low ?? forecastItem?.temperature_low ?? null
}))
: null
});
}
function getEntityState(hass, entityId) {
if (!hass || !entityId) return null;
return hass.states?.[entityId] || null;
}
function getEntityFriendlyName(hass, entityId, fallback = entityId) {
const friendlyName = getEntityState(hass, entityId)?.attributes?.friendly_name;
return friendlyName || fallback;
}
function getEntityIcon(hass, entityId, fallback = null) {
const icon = getEntityState(hass, entityId)?.attributes?.icon;
return typeof icon === 'string' && icon.trim() ? icon.trim() : fallback;
}
function getEntityPicture(hass, entityId, fallback = null) {
const picture = getEntityState(hass, entityId)?.attributes?.entity_picture;
return typeof picture === 'string' && picture.trim() ? picture.trim() : fallback;
}
function resolveEntityPictureUrl(hass, picture, fallback = null) {
if (typeof picture !== 'string' || !picture.trim()) return fallback;
const trimmedPicture = picture.trim();
if (trimmedPicture.startsWith('/') && typeof hass?.hassUrl === 'function') {
return hass.hassUrl(trimmedPicture);
}
return trimmedPicture;
}
function getEntityPictureUrl(hass, entityId, fallback = null) {
return resolveEntityPictureUrl(hass, getEntityPicture(hass, entityId), fallback);
}
function getSensorDisplayValue(hass, entityId, fallback = '') {
const state = getEntityState(hass, entityId)?.state;
if (state === undefined || state === null || state === 'unknown' || state === 'unavailable') return fallback;
const displayState = String(state).trim();
return displayState || fallback;
}
function getFormattedHeaderSensorTime(hass, entityId, parseTimeValue, formatTime, fallback = '') {
const sensorState = getSensorDisplayValue(hass, entityId, null);
if (!sensorState || typeof parseTimeValue !== 'function' || typeof formatTime !== 'function') return fallback;
const parsed = parseTimeValue(sensorState);
return parsed ? formatTime(parsed) : fallback;
}
function getHeaderWeatherDisplayData(hass, entityId) {
return normalizeHeaderWeatherData(getEntityState(hass, entityId));
}
function getHeaderEntityRenderSignatureFromState(entityState) {
return getHeaderWeatherEntityRenderSignature(entityState);
}
function getHeaderEntityRenderSignature(hass, entityId) {
return getHeaderEntityRenderSignatureFromState(getEntityState(hass, entityId));
}
function getPersonStateLabel(personState) {
if (!personState || !personState.state || ['unknown', 'unavailable'].includes(personState.state)) {
return '';
}
if (personState.state === 'home') return 'Home';
if (personState.state === 'not_home') return 'Away';
return String(personState.state)
.replace(/_/g, ' ')
.replace(/\b\w/g, (char) => char.toUpperCase());
}
function getPersonEntityPictureUrl(hass, personState) {
return resolveEntityPictureUrl(hass, personState?.attributes?.entity_picture, null);
}
function getEntityRenderSignature(hass, entityIds = []) {
return JSON.stringify(entityIds.map((entityId) => {
const entityState = getEntityState(hass, entityId);
return {
entityId,
state: entityState?.state ?? null,
picture: entityState?.attributes?.entity_picture ?? null,
friendlyName: entityState?.attributes?.friendly_name ?? null
};
}));
}
const DAYLIGHT_CALENDAR_CARD_VERSION = 'v4.7.0';
function getDaylightCalendarCardVersion() {
return DAYLIGHT_CALENDAR_CARD_VERSION.includes('__')
? 'dev'
: DAYLIGHT_CALENDAR_CARD_VERSION;
}
function normalizeDashboardPath(pathValue) {
if (typeof pathValue !== 'string') return null;
const trimmedPath = pathValue.trim();
if (!trimmedPath) return null;
return trimmedPath.startsWith('/') ? trimmedPath : `/${trimmedPath}`;
}
function normalizeEnumValue(value, { aliases = {}, allowed = [], fallback }) {
const normalizedValue = String(value ?? '').trim().toLowerCase();
const mappedValue = aliases[normalizedValue] ?? normalizedValue;
return allowed.includes(mappedValue) ? mappedValue : fallback;
}
function normalizeEntityStringMap(value) {
if (!value || typeof value !== 'object' || Array.isArray(value)) {
return {};
}
return Object.entries(value).reduce((acc, [key, mappedValue]) => {
const normalizedKey = typeof key === 'string' ? key.trim() : '';
const normalizedValue = typeof mappedValue === 'string' ? mappedValue.trim() : '';
if (normalizedKey && normalizedValue) {
acc[normalizedKey] = normalizedValue;
}
return acc;
}, {});
}
function normalizeBooleanStyleValue(value) {
if (typeof value === 'boolean') return value;
if (typeof value === 'string') {
const normalizedValue = value.trim().toLowerCase();
if (normalizedValue === 'true') return true;
if (normalizedValue === 'false') return false;
}
return null;
}
const STALE_RESOURCE_WARNING_STORAGE_KEY = 'daylight-calendar-card:stale-resource-warning-dismissed';
const STALE_RESOURCE_TROUBLESHOOTING_URL = 'https://docs.daylightcalendar.com/troubleshooting#updated-to-the-latest-version-but-still-seeing-old-behavior';
const STALE_RESOURCE_SEGMENT = '/skylight-calendar-card/';
const CURRENT_HACS_RESOURCE_PATH = '/hacsfiles/daylight-calendar-card/skylight-calendar-card.js';
const normalizeResourceUrl = (value) => {
if (typeof value !== 'string') return '';
return value.trim();
};
const isStaleResourceUrl = (url) => {
const normalized = normalizeResourceUrl(url).toLowerCase();
if (!normalized) return false;
return normalized.includes(STALE_RESOURCE_SEGMENT) && !normalized.includes(CURRENT_HACS_RESOURCE_PATH);
};
const collectResourceUrls = (documentLike) => {
const urls = [];
if (!documentLike) return urls;
const addUrl = (value) => {
const normalized = normalizeResourceUrl(value);
if (normalized) urls.push(normalized);
};
try {
for (const script of Array.from(documentLike.scripts || [])) {
addUrl(script?.src);
}
} catch (_error) {
// Ignore unavailable document APIs.
}
try {
for (const link of Array.from(documentLike.querySelectorAll?.('link[href]') || [])) {
addUrl(link?.href);
}
} catch (_error) {
// Ignore unavailable document APIs.
}
return urls;
};
const detectStaleSkylightResource = (documentLike = globalThis.document) => {
const urls = collectResourceUrls(documentLike);
const staleUrl = urls.find(isStaleResourceUrl) || null;
return {
detected: !!staleUrl,
staleUrl,
urls
};
};
function normalizeDefaultDarkMode(value) {
if (value === true) return 'dark';
if (value === false || value === undefined || value === null || value === '') return DEFAULT_THEME_MODE;
return normalizeEnumValue(value, {
allowed: THEME_MODE_OPTIONS,
fallback: DEFAULT_THEME_MODE
});
}
function normalizePastEventMode$1(value) {
return normalizeEnumValue(value, {
allowed: PAST_EVENT_MODE_OPTIONS,
fallback: DEFAULT_PAST_EVENT_MODE
});
}
function normalizeDayBadgeLayoutWeek$1(value) {
return normalizeEnumValue(value, {
allowed: DAY_BADGE_LAYOUT_WEEK_OPTIONS,
fallback: DEFAULT_DAY_BADGE_LAYOUT_WEEK
});
}
function normalizeEventModalSize$1(value) {
const normalized = String(value || '').trim().toLowerCase();
return EVENT_MODAL_SIZE_OPTIONS.includes(normalized) ? normalized : DEFAULT_EVENT_MODAL_SIZE;
}
function getDefaultColor(index) {
const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E2'];
return colors[index % colors.length];
}
class SkylightCalendarCardEditor extends HTMLElement {
constructor() {
super();
this._config = createDefaultStubConfig();
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 = DEFAULT_COMBINE_BACKGROUND;
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 (COMBINE_BACKGROUND_MODE_OPTIONS.includes(normalizedLower)) {
this._combineBackgroundMode = normalizedLower;
this._combineBackgroundHexDraft = '';
return;
}
const normalizedHex = this.normalizeHexColor(rawValue);
if (normalizedHex) {
this._combineBackgroundMode = 'hex';
this._combineBackgroundHexDraft = normalizedHex;
return;
}
this._combineBackgroundMode = DEFAULT_COMBINE_BACKGROUND;
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 !== ''
? normalizePastEventMode$1(config.past_event_mode)
: (config.hide_the_past ? 'hide' : createDefaultStubConfig().past_event_mode);
this._config = {
...createDefaultStubConfig(),
...config,
default_view: normalizedDefaultView || (createDefaultStubConfig().default_view || DEFAULT_VIEW),
past_event_mode: normalizedPastEventMode,
color_scheme: normalizeDefaultDarkMode(config.color_scheme),
header_dashboard_path: normalizeDashboardPath(config.header_dashboard_path),
event_modal_size: normalizeEventModalSize$1(config.event_modal_size),
day_badge_layout_week: normalizeDayBadgeLayoutWeek$1(config.day_badge_layout_week)
};
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 || createDefaultStubConfig();
}
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) {
return normalizeDefaultViewForEditor(value);
}
getEventCalendarBubbleMode() {
return getEventCalendarBubbleMode(this._config);
}
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) {
return getEditorDefaultValue(key);
}
getConfiguredEntitiesForEditor() {
const entities = Array.isArray(this._config.entities) ? this._config.entities : [];
return entities.filter((entityId) => typeof entityId === 'string' && entityId.startsWith('calendar.'));
}
getEntityFriendlyName(entityId) {
return getEntityFriendlyName(this._hass, entityId);
}
getConfiguredEntityIndex(entityId) {
return this.getConfiguredEntitiesForEditor().indexOf(entityId);
}
getEditorCalendarColor(entityId) {
const entityIndex = this.getConfiguredEntityIndex(entityId);
return this.normalizeHexColor(this.getMapFieldValue('colors')[entityId]) ||
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 = 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
Color brightness
Hex color
${['#ffffff', '#ff0000', '#ffff00', '#00ff00', '#000000', '#00ffff', '#0000ff', '#ff00ff']
.map((color) => `
Chosen color
Cancel
Set
`;
}
renderColorInputControl({ id, field, mapKey = null, value }) {
return renderEditorColorInputControl({
id,
field,
mapKey,
value,
toColorInputValue: (colorValue) => this.toColorInputValue(colorValue)
});
}
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 `
${displayName}
${this.renderColorInputControl({ id: `${mapKey}-${entityId}`, field: mapKey, mapKey: entityId, value })}
`;
}
return `
${displayName}
`;
})
.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 `
${displayName}
`;
})
.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);
return renderEditorSection({
title,
content,
disclosureKey,
open: this._openDisclosureKeys.has(disclosureKey)
});
}
renderSubSection(title, content) {
const disclosureKey = this.buildDisclosureKey('subsection', title);
return renderEditorSubSection({
title,
content,
disclosureKey,
open: this._openDisclosureKeys.has(disclosureKey)
});
}
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.
'}
Add virtual calendar
`;
}
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 `
${displayName}
`;
});
legacyEntities.forEach((entityId) => {
checkboxRows.push(`
${this.escapeHtml(entityId)} (not in configured calendars)
`);
});
const checkboxMarkup = checkboxRows.length
? checkboxRows.join('')
: 'Select at least one real calendar above to include calendars here.
';
return `
Included calendar entities
${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() {
return renderEditorWeekdayCheckboxes({
selectedWeekdays: new Set(this.getListFieldValue('week_days'))
});
}
render() {
this.captureOpenDisclosures();
const displayLayoutSection = this.renderSection('Display & layout', `
First day of week
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Week days
${this.renderWeekdayCheckboxes()}
Past-ended events
Show normally
Hide
Mute
${this._config.show_dashboard_nav_button ? `
` : ''}
${this._config.compact_height ? '' : `
Height scale
`}
`);
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' })}
`)}
Color scheme
Auto (browser/app)
Light
Dark
`);
const backgroundSection = this.renderSection('Background image', `
Header opacity
Background opacity
Background image URL
Image repeat
`);
const eventSection = this.renderSection('Events & schedule', `
Event calendar bubble
Icon
Friendly Name
None
Event title prefix
None
Calendar Badge Icon
Calendar Friendly Name
Event color style
Classic
Bar + Neutral
Bar + Tint
${this._config.event_color_mode === 'left-neutral' ? `
Neutral event background color
${this.renderColorInputControl({ id: 'event_neutral_background', field: 'event_neutral_background', value: this._config.event_neutral_background || DEFAULT_EVENT_NEUTRAL_BACKGROUND })}
` : ''}
${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 ? `
Combined indicator style
Stripes
Bars
Dots
Combined background
Neutral
Primary
Hex
${this._combineBackgroundMode === 'hex' ? `
` : ''}
` : ''}
`);
const managementSection = this.renderSection('Event management', `
Event modal size
Narrow
Medium
Wide
Full
${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', `
Preference storage key
`);
const staleResourceDetection = detectStaleSkylightResource();
const staleResourceDiagnostics = staleResourceDetection.detected ? `
Old Skylight resource detected: ${this.escapeHtml(staleResourceDetection.staleUrl)}
Remove the old resource from Settings → Dashboards → Resources and keep /hacsfiles/daylight-calendar-card/skylight-calendar-card.js. HACS showing the latest version confirms the file is installed, but not that this dashboard loaded the current frontend resource.
Troubleshooting guide
` : '';
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.
${staleResourceDiagnostics}
`);
this.innerHTML = `
Title
Default view
Month
Week
Schedule
Agenda
Calendars
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 `${escapeHtml(badge.text)} ` : ''
].join('');
const classes = ['day-badge', hasIcon ? 'has-icon' : '', hasText ? 'has-text' : ''].filter(Boolean).join(' ');
return `${content} `;
}
function renderDayBadges(date, dayEvents, { escapeHtml, getDayBadges }) {
const badges = getDayBadges(date, dayEvents);
if (!badges.length) return '';
const badgesHtml = badges.map((badge) => renderDayBadge(badge, { escapeHtml })).join('');
return `${badgesHtml}
`;
}
function getDayForecastClass(viewMode = 'week-compact') {
return viewMode === 'week-standard'
? 'week-standard-day-forecast'
: viewMode === 'month'
? 'month-day-forecast'
: viewMode === 'agenda'
? 'agenda-day-forecast'
: 'week-day-forecast';
}
function renderWeatherIcon(icon, { escapeHtml }) {
return `
${escapeHtml(forecast.highTemp)}
${forecast.lowTemp ? `${escapeHtml(forecast.lowTemp)} ` : ''}
`;
}
function renderDayForecast(date, viewMode = 'week-compact', { escapeHtml, getForecastForDate }) {
const forecast = getForecastForDate(date);
if (!forecast) return '';
const forecastClass = getDayForecastClass(viewMode);
return `
${renderWeatherIcon(forecast.conditionIcon, { escapeHtml })}
${renderForecastTemperatures(forecast, { escapeHtml })}
`;
}
function normalizeDayBadgeBlock(rule = {}, {
normalizeEventTextValue,
normalizeDayBadgeDisplayColor,
normalizeStyleSizeValue
} = {}) {
const normalized = {};
const text = normalizeEventTextValue(rule.text);
const icon = normalizeEventTextValue(rule.icon);
const normalizedText = text || '';
const normalizedIcon = icon || '';
if (normalizedText) normalized.text = normalizedText;
if (normalizedIcon) normalized.icon = normalizedIcon;
const backgroundColor = normalizeDayBadgeDisplayColor(rule.background_color);
if (backgroundColor) normalized.background_color = backgroundColor;
const color = normalizeDayBadgeDisplayColor(rule.color);
if (color) normalized.color = color;
const size = normalizeStyleSizeValue(rule.size);
if (size) normalized.size = size;
const fontSize = normalizeStyleSizeValue(rule.font_size);
if (fontSize) normalized.font_size = fontSize;
return normalized;
}
function isFullValueTemplate(value) {
return typeof value === 'string' && /^\s*\{\{\s*([A-Za-z0-9_.-]+)\s*\}\}\s*$/.test(value);
}
function normalizeDayBadgeDisplayColor(value, { normalizeSingleColor } = {}) {
if (isFullValueTemplate(value)) return String(value).trim();
return normalizeSingleColor(value);
}
function normalizeResolvedDayBadgeDisplayColor(value, { normalizeSingleColor } = {}) {
const normalized = normalizeSingleColor(value);
if (typeof normalized !== 'string') return undefined;
const trimmed = normalized.trim();
if (!trimmed) return undefined;
if (/^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(trimmed)) return trimmed;
if (/^rgba?\(\s*[+-]?(?:\d+|\d*\.\d+)%?\s*(?:,|\s)\s*[+-]?(?:\d+|\d*\.\d+)%?\s*(?:,|\s)\s*[+-]?(?:\d+|\d*\.\d+)%?(?:\s*(?:,|\/)\s*(?:[01](?:\.\d+)?|\.\d+|\d+%))?\s*\)$/i.test(trimmed)) return trimmed;
if (/^hsla?\(\s*[+-]?(?:\d+|\d*\.\d+)(?:deg|grad|rad|turn)?\s*(?:,|\s)\s*[+-]?(?:\d+|\d*\.\d+)%\s*(?:,|\s)\s*[+-]?(?:\d+|\d*\.\d+)%(?:\s*(?:,|\/)\s*(?:[01](?:\.\d+)?|\.\d+|\d+%))?\s*\)$/i.test(trimmed)) return trimmed;
return undefined;
}
function parseEventDescriptionJson(event) {
const raw = String(event?.description || '').trim();
if (!raw.startsWith('{') || !raw.endsWith('}')) return undefined;
try {
const parsed = JSON.parse(raw);
if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) return undefined;
return parsed;
} catch {
return undefined;
}
}
function buildDayBadgeResolutionContext(date, matchedEvent, { formatLocalDate } = {}) {
const event = matchedEvent && typeof matchedEvent === 'object' ? matchedEvent : {};
const calendar = event.entityId || event.entity_id || event.calendar;
const title = event.summary || event.title;
return {
date: date instanceof Date && !Number.isNaN(date.getTime()) ? formatLocalDate(date) : date,
calendar,
title,
event: {
...event,
calendar,
entity_id: event.entity_id || event.entityId,
title,
summary: event.summary || event.title,
description_json: parseEventDescriptionJson(event)
}
};
}
function resolveSafePath(path, context) {
if (typeof path !== 'string' || !path) return undefined;
const blockedSegments = new Set(['__proto__', 'prototype', 'constructor']);
const segments = path.split('.');
if (!segments.length) return undefined;
let current = context;
for (const segment of segments) {
if (!/^[A-Za-z0-9_-]+$/.test(segment) || blockedSegments.has(segment)) return undefined;
if (current === null || current === undefined || (typeof current !== 'object' && typeof current !== 'function')) return undefined;
if (!Object.prototype.hasOwnProperty.call(current, segment)) return undefined;
current = current[segment];
}
if (current === null || current === undefined) return undefined;
if (['string', 'number', 'boolean'].includes(typeof current)) return String(current);
return undefined;
}
function resolveDayBadgeDisplayValue(value, context) {
if (typeof value !== 'string') return value;
const match = value.match(/^\s*\{\{\s*([A-Za-z0-9_.-]+)\s*\}\}\s*$/);
if (!match) return value;
return resolveSafePath(match[1], context);
}
function resolveDayBadgeForRender(rule, date, matchedEvent, {
formatLocalDate,
normalizeResolvedDayBadgeDisplayColor
} = {}) {
const context = buildDayBadgeResolutionContext(date, matchedEvent, { formatLocalDate });
const resolved = { ...rule };
['icon', 'text', 'background_color', 'color'].forEach((field) => {
const value = resolveDayBadgeDisplayValue(rule[field], context);
if (value === undefined || value === null || String(value).trim() === '') {
delete resolved[field];
return;
}
if (field === 'background_color' || field === 'color') {
const normalizedColor = normalizeResolvedDayBadgeDisplayColor(value);
if (normalizedColor) {
resolved[field] = normalizedColor;
} else {
delete resolved[field];
}
return;
}
resolved[field] = String(value).trim();
});
return resolved;
}
function normalizeDayBadgeConditions(rawConditions, { normalizeEventMatchConditions } = {}) {
return normalizeEventMatchConditions(rawConditions);
}
function normalizeDayBadges(rawRules, {
normalizeAdvancedRuleMatch,
normalizeDayBadgeBlock
} = {}) {
if (!Array.isArray(rawRules)) return [];
return rawRules
.map((rule, index) => {
if (!rule || typeof rule !== 'object') return null;
const rawMatch = rule.match && typeof rule.match === 'object'
? rule.match
: (rule.conditions && typeof rule.conditions === 'object' ? { event: rule.conditions } : null);
const match = normalizeAdvancedRuleMatch(rawMatch, 'event');
if (!match) return null;
const output = normalizeDayBadgeBlock(rule);
if (!output.text && !output.icon) return null;
const numericPriority = Number(rule.priority);
const priority = Number.isFinite(numericPriority) ? numericPriority : 0;
const normalized = {
id: typeof rule.id === 'string' && rule.id.trim() ? rule.id.trim() : `day-badge-${index + 1}`,
type: 'day_badge',
priority,
index,
match,
output,
conditions: match.event
};
Object.assign(normalized, output);
return normalized;
})
.filter(Boolean);
}
function getDateRangeChunks(startDate, endDate, chunkDays = 30) {
const chunks = [];
let cursor = new Date(startDate);
cursor.setHours(0, 0, 0, 0);
while (cursor <= endDate) {
const chunkStart = new Date(cursor);
const chunkEnd = new Date(cursor);
chunkEnd.setDate(chunkEnd.getDate() + chunkDays - 1);
if (chunkEnd > endDate) {
chunkEnd.setTime(endDate.getTime());
}
chunkEnd.setHours(23, 59, 59, 999);
chunks.push({ startDate: chunkStart, endDate: chunkEnd });
cursor = new Date(chunkEnd);
cursor.setDate(cursor.getDate() + 1);
cursor.setHours(0, 0, 0, 0);
}
return chunks;
}
function parseLocalDate(dateStr) {
if (!dateStr || typeof dateStr !== 'string') return new Date(dateStr);
const [year, month, day] = dateStr.split('-').map(Number);
if (![year, month, day].every(Number.isFinite)) return new Date(dateStr);
return new Date(year, month - 1, day);
}
function parsePossiblyLocalDateTime(value) {
if (!value || typeof value !== 'string') return new Date(value);
const hasTimezone = /(?:[zZ]|[+-]\d{2}:?\d{2})$/.test(value);
if (hasTimezone) return new Date(value);
const match = value.match(/^(\d{4})-(\d{2})-(\d{2})[T ](\d{2}):(\d{2})(?::(\d{2}))?$/);
if (!match) return new Date(value);
const [, year, month, day, hour, minute, second = '0'] = match;
return new Date(
Number(year),
Number(month) - 1,
Number(day),
Number(hour),
Number(minute),
Number(second)
);
}
function formatLocalDate(date) {
if (!(date instanceof Date) || Number.isNaN(date.getTime())) return '';
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
}
function getIsoWeekNumber(date) {
const utcDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
const dayNumber = utcDate.getUTCDay() || 7;
utcDate.setUTCDate(utcDate.getUTCDate() + 4 - dayNumber);
const yearStart = new Date(Date.UTC(utcDate.getUTCFullYear(), 0, 1));
return Math.ceil((((utcDate - yearStart) / 86400000) + 1) / 7);
}
function normalizeSingleColor(colorValue) {
if (colorValue === undefined || colorValue === null) {
return colorValue;
}
const trimmed = String(colorValue).trim();
if (!trimmed) return trimmed;
const normalizedName = trimmed
.toLowerCase()
.replace(/[()]/g, '')
.replace(/\s*\/\s*/g, '/')
.replace(/\s+/g, ' ')
.trim();
const mappedColor = COMMON_NAMED_COLORS[normalizedName];
if (mappedColor) {
return mappedColor;
}
return trimmed;
}
function normalizeColorMap(colorMap, { normalizeColor = normalizeSingleColor } = {}) {
if (!colorMap || typeof colorMap !== 'object') return {};
return Object.entries(colorMap).reduce((acc, [entityId, color]) => {
const normalized = normalizeColor(color);
if (normalized !== undefined && normalized !== null && normalized !== '') {
acc[entityId] = normalized;
}
return acc;
}, {});
}
function colorToHex(color, { normalizeColor = normalizeSingleColor } = {}) {
if (!color) return null;
const normalizedColor = normalizeColor(color);
if (typeof normalizedColor !== 'string') 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;
}
function parseColorToRgb(color, {
normalizeColor = normalizeSingleColor,
resolveComputedCssColorToRgb = null
} = {}) {
const normalizedColor = normalizeColor(color);
if (typeof normalizedColor === 'string') {
const rgbMatch = normalizedColor
.match(/^rgba?\((.+)\)$/i);
if (rgbMatch) {
const normalizedChannels = rgbMatch[1]
.replace(/\s*\/\s*.*/, '')
.replace(/,/g, ' ')
.trim()
.split(/\s+/)
.slice(0, 3)
.map((channel) => Number(channel));
if (normalizedChannels.length === 3 && normalizedChannels.every((value) => Number.isFinite(value))) {
const [r, g, b] = normalizedChannels.map((value) => Math.max(0, Math.min(255, Math.round(value))));
return { r, g, b };
}
}
}
const hex = colorToHex(normalizedColor, { normalizeColor });
if (hex) {
return {
r: parseInt(hex.slice(1, 3), 16),
g: parseInt(hex.slice(3, 5), 16),
b: parseInt(hex.slice(5, 7), 16)
};
}
return typeof resolveComputedCssColorToRgb === 'function'
? resolveComputedCssColorToRgb(normalizedColor)
: null;
}
function colorWithAlpha(color, alpha = 1, { colorToRgb = parseColorToRgb } = {}) {
const rgb = colorToRgb(color);
if (!rgb) return color;
const clamped = Math.max(0, Math.min(1, alpha));
return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${clamped})`;
}
function blendRgb(top, bottom, topAlpha = 1) {
if (!top && !bottom) return null;
if (!top) return bottom;
if (!bottom) return top;
const clampedAlpha = Math.max(0, Math.min(1, topAlpha));
return {
r: Math.round((top.r * clampedAlpha) + (bottom.r * (1 - clampedAlpha))),
g: Math.round((top.g * clampedAlpha) + (bottom.g * (1 - clampedAlpha))),
b: Math.round((top.b * clampedAlpha) + (bottom.b * (1 - clampedAlpha)))
};
}
function getContrastColor(backgroundColor, { colorToRgb = parseColorToRgb } = {}) {
const rgb = colorToRgb(backgroundColor);
if (!rgb) return 'white';
const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
return luminance > 0.6 ? 'black' : 'white';
}
function normalizeThemeMode(value) {
if (value === true) return 'dark';
if (value === false || value === undefined || value === null || value === '') return DEFAULT_THEME_MODE;
return normalizeEnumValue(value, {
allowed: THEME_MODE_OPTIONS,
fallback: DEFAULT_THEME_MODE
});
}
function normalizeEventTitlePrefixMode(value) {
return normalizeEnumValue(value, {
aliases: EVENT_TITLE_PREFIX_ALIASES,
allowed: EVENT_TITLE_PREFIX_OPTIONS,
fallback: DEFAULT_EVENT_TITLE_PREFIX
});
}
function normalizePastEventMode(value) {
return normalizeEnumValue(value, {
allowed: PAST_EVENT_MODE_OPTIONS,
fallback: DEFAULT_PAST_EVENT_MODE
});
}
function normalizeDayBadgeLayoutWeek(value) {
return normalizeEnumValue(value, {
allowed: DAY_BADGE_LAYOUT_WEEK_OPTIONS,
fallback: DEFAULT_DAY_BADGE_LAYOUT_WEEK
});
}
function normalizeDefaultHiddenCalendars(config = {}) {
const knownEntities = new Set(Array.isArray(config.entities) ? config.entities : []);
const hiddenCalendars = new Set();
if (Array.isArray(config.default_hidden_calendars)) {
config.default_hidden_calendars.forEach((entityId) => {
if (knownEntities.has(entityId)) hiddenCalendars.add(entityId);
});
}
const visibilityMap = config.default_calendar_visibility || config.calendar_visibility || {};
if (visibilityMap && typeof visibilityMap === 'object' && !Array.isArray(visibilityMap)) {
Object.entries(visibilityMap).forEach(([entityId, value]) => {
if (!knownEntities.has(entityId)) return;
const normalizedValue = typeof value === 'string' ? value.trim().toLowerCase() : value;
if (HIDDEN_CALENDAR_VISIBILITY_VALUES.includes(normalizedValue)) {
hiddenCalendars.add(entityId);
} else if (VISIBLE_CALENDAR_VISIBILITY_VALUES.includes(normalizedValue)) {
hiddenCalendars.delete(entityId);
}
});
}
return Array.from(hiddenCalendars);
}
function normalizeCombineStyle(styleValue) {
return normalizeEnumValue(styleValue, {
allowed: COMBINE_STYLE_OPTIONS,
fallback: DEFAULT_COMBINE_STYLE
});
}
function normalizeEventColorMode(modeValue) {
return normalizeEnumValue(modeValue, {
allowed: EVENT_COLOR_MODE_OPTIONS,
fallback: DEFAULT_EVENT_COLOR_MODE
});
}
function normalizeCombineBackground(backgroundValue, { colorToHex: normalizeColorToHex = colorToHex } = {}) {
const normalized = String(backgroundValue || '').trim();
if (!normalized) return DEFAULT_COMBINE_BACKGROUND;
const lower = normalized.toLowerCase();
if (COMBINE_BACKGROUND_MODE_OPTIONS.includes(lower)) {
return lower;
}
const hex = normalizeColorToHex(normalized);
return hex || DEFAULT_COMBINE_BACKGROUND;
}
function normalizeBackgroundOpacity(opacityValue, fallback = 0) {
const numericOpacity = Number(opacityValue);
if (!Number.isFinite(numericOpacity)) {
return fallback;
}
return Math.min(100, Math.max(0, numericOpacity));
}
function normalizeEventModalSize(value) {
const normalized = String(value || '').trim().toLowerCase();
return EVENT_MODAL_SIZE_OPTIONS.includes(normalized) ? normalized : DEFAULT_EVENT_MODAL_SIZE;
}
function normalizeEventTextValue(value) {
return String(value || '')
.normalize('NFKC')
.replace(/\s+/g, ' ')
.trim();
}
function escapeHtmlAttribute(text) {
const replacements = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
return String(text ?? '').replace(/[&<>"']/g, (char) => replacements[char]);
}
const getEventIdentityKey = (entityId, event) => `${entityId}|${event.uid || ''}|${event.recurring_event_id || ''}|${event.start?.dateTime || event.start?.date || event.start || ''}|${event.end?.dateTime || event.end?.date || event.end || ''}|${event.summary || ''}`;
const normalizeCalendarEvent = (event, { entityId, color }) => ({
...event,
entityId,
color
});
const getEventStartDate = (event, { parseLocalDate } = {}) => {
if (event.start?.dateTime) return new Date(event.start.dateTime);
if (event.start?.date) return parseLocalDate(event.start.date);
return new Date(event.start);
};
const getEventDateTimeInfo = (event, { parseCalendarDate } = {}) => {
if (event.start.dateTime) {
return {
eventStart: new Date(event.start.dateTime),
eventEnd: new Date(event.end.dateTime),
isAllDay: false
};
}
if (event.start.date) {
return {
eventStart: parseCalendarDate(event.start.date),
eventEnd: parseCalendarDate(event.end.date),
isAllDay: true
};
}
const isAllDay = !event.start.includes('T');
return {
eventStart: new Date(event.start),
eventEnd: new Date(event.end),
isAllDay
};
};
const matchPrimitiveCondition = (value, condition) => {
if (typeof condition === 'boolean') {
return value === condition;
}
if (typeof condition === 'string') {
const normalized = condition.trim().toLowerCase();
if (normalized === 'true') return value === true;
if (normalized === 'false') return value === false;
}
return value === condition;
};
const parseRegexCondition = (value) => {
if (typeof value !== 'string') return null;
const trimmed = value.trim();
if (!trimmed) return null;
const prefixed = trimmed.match(/^regex:(.+)$/i);
if (prefixed) {
try {
return new RegExp(prefixed[1].trim(), 'i');
} catch (error) {
return null;
}
}
const slashDelimited = trimmed.match(/^\/(.+)\/([dgimsuvy]*)$/);
if (!slashDelimited) return null;
try {
return new RegExp(slashDelimited[1], slashDelimited[2] || 'i');
} catch (error) {
return null;
}
};
const matchTextCondition = (value, condition, { normalizeEventTextValue }) => {
const rawNormalizedValue = normalizeEventTextValue(value);
if (!rawNormalizedValue) return false;
const normalizedValue = rawNormalizedValue.toLowerCase();
if (typeof condition === 'string') {
const regex = parseRegexCondition(condition);
if (regex) return regex.test(rawNormalizedValue);
const normalizedCondition = condition.trim();
if (!normalizedCondition) return false;
const exactMatch = normalizedCondition.match(/^exact:(.+)$/i);
if (exactMatch) {
return normalizedValue === exactMatch[1].trim().toLowerCase();
}
const containsMatch = normalizedCondition.match(/^(?:contains|substring):(.+)$/i);
if (containsMatch) {
return normalizedValue.includes(containsMatch[1].trim().toLowerCase());
}
return normalizedValue.includes(normalizedCondition.toLowerCase());
}
if (condition && typeof condition === 'object' && !Array.isArray(condition)) {
if (typeof condition.exact === 'string') {
return normalizedValue === condition.exact.trim().toLowerCase();
}
if (typeof condition.substring === 'string') {
return normalizedValue.includes(condition.substring.trim().toLowerCase());
}
if (typeof condition.contains === 'string') {
return normalizedValue.includes(condition.contains.trim().toLowerCase());
}
if (typeof condition.regex === 'string') {
const regex = parseRegexCondition(`regex:${condition.regex}`);
return !!regex && regex.test(rawNormalizedValue);
}
}
return false;
};
const eventFieldMatches = (event, field, condition, helpers) => {
const fieldName = String(field || '').trim().toLowerCase();
if (!fieldName) return false;
if (fieldName === 'all_day') {
const { isAllDay } = helpers.getEventDateTimeInfo(event);
return matchPrimitiveCondition(isAllDay, condition);
}
if (fieldName === 'past') {
return matchPrimitiveCondition(helpers.isPastEvent(event), condition);
}
if (fieldName === 'calendar') {
return helpers.getEventCalendarMatchTokens(event).some((token) => matchTextCondition(token, condition, helpers));
}
const valueByField = {
title: event.summary,
summary: event.summary,
location: event.location,
description: event.description
};
return matchTextCondition(valueByField[fieldName], condition, helpers);
};
const eventMatchesNormalizedRule = (event, match, helpers) => {
if (!event || !match || typeof match !== 'object') return false;
const logicalKeys = new Set(['any', 'all', 'and', 'not']);
const fieldKeys = Object.keys(match).filter((key) => !logicalKeys.has(key));
const fieldsPass = fieldKeys.every((field) => eventFieldMatches(event, field, match[field], helpers));
if (!fieldsPass) return false;
const allConditions = Array.isArray(match.all) ? match.all : [];
if (!allConditions.every((condition) => eventMatchesNormalizedRule(event, condition, helpers))) return false;
const andConditions = Array.isArray(match.and) ? match.and : [];
if (!andConditions.every((condition) => eventMatchesNormalizedRule(event, condition, helpers))) return false;
if (Object.prototype.hasOwnProperty.call(match, 'any')) {
const anyConditions = Array.isArray(match.any) ? match.any : [];
if (anyConditions.length && !anyConditions.some((condition) => eventMatchesNormalizedRule(event, condition, helpers))) return false;
}
if (Object.prototype.hasOwnProperty.call(match, 'not')) {
const notCondition = match.not;
if (Array.isArray(notCondition)) {
if (notCondition.some((condition) => eventMatchesNormalizedRule(event, condition, helpers))) return false;
} else if (notCondition && eventMatchesNormalizedRule(event, notCondition, helpers)) {
return false;
}
}
return true;
};
const findMatchingEventForCondition = (condition, dayEvents = [], helpers) => {
if (!Array.isArray(dayEvents) || !dayEvents.length) return null;
if (condition === true) return dayEvents[0] || null;
if (condition === false) return null;
return dayEvents.find((event) => eventMatchesNormalizedRule(event, condition, helpers)) || null;
};
const dateMatchesDayCondition = (date, conditionName, conditionValue, context = {}) => {
if (conditionValue === false) return false;
const dayStart = new Date(date);
dayStart.setHours(0, 0, 0, 0);
const todayStart = new Date();
todayStart.setHours(0, 0, 0, 0);
if (conditionName === 'today') return matchPrimitiveCondition(!!context.isToday, conditionValue);
if (conditionName === 'past') return matchPrimitiveCondition(dayStart.getTime() < todayStart.getTime(), conditionValue);
if (conditionName === 'future') return matchPrimitiveCondition(dayStart.getTime() > todayStart.getTime(), conditionValue);
if (conditionName === 'weekend') return matchPrimitiveCondition(dayStart.getDay() === 0 || dayStart.getDay() === 6, conditionValue);
if (conditionName === 'weekday') return matchPrimitiveCondition(dayStart.getDay() !== 0 && dayStart.getDay() !== 6, conditionValue);
if (conditionName === 'day_of_week') return Array.isArray(conditionValue) && conditionValue.includes(dayStart.getDay());
return false;
};
const dayMatchesNormalizedRule = (dayMatch, context = {}, helpers) => {
if (!dayMatch || typeof dayMatch !== 'object') return { matches: true, matchedEvent: null };
let matchedEvent = null;
const logicalKeys = new Set(['any', 'all', 'and', 'not']);
const fieldKeys = Object.keys(dayMatch).filter((key) => !logicalKeys.has(key));
for (const field of fieldKeys) {
const condition = dayMatch[field];
if (field === 'has_event') {
const event = findMatchingEventForCondition(condition, context.dayEvents || [], helpers);
if (!event) return { matches: false, matchedEvent: null };
if (!matchedEvent) matchedEvent = event;
continue;
}
if (field === 'no_event') {
const event = findMatchingEventForCondition(condition, context.dayEvents || [], helpers);
if (event) return { matches: false, matchedEvent: null };
continue;
}
if (!dateMatchesDayCondition(context.date, field, condition, context)) {
return { matches: false, matchedEvent: null };
}
}
const allConditions = Array.isArray(dayMatch.all) ? dayMatch.all : [];
for (const condition of allConditions) {
const result = dayMatchesNormalizedRule(condition, context, helpers);
if (!result.matches) return { matches: false, matchedEvent: null };
if (!matchedEvent && result.matchedEvent) matchedEvent = result.matchedEvent;
}
const andConditions = Array.isArray(dayMatch.and) ? dayMatch.and : [];
for (const condition of andConditions) {
const result = dayMatchesNormalizedRule(condition, context, helpers);
if (!result.matches) return { matches: false, matchedEvent: null };
if (!matchedEvent && result.matchedEvent) matchedEvent = result.matchedEvent;
}
if (Object.prototype.hasOwnProperty.call(dayMatch, 'any')) {
const anyConditions = Array.isArray(dayMatch.any) ? dayMatch.any : [];
if (!anyConditions.length) return { matches: true, matchedEvent };
let anyMatched = false;
for (const condition of anyConditions) {
const result = dayMatchesNormalizedRule(condition, context, helpers);
if (result.matches) {
anyMatched = true;
if (!matchedEvent && result.matchedEvent) matchedEvent = result.matchedEvent;
break;
}
}
if (!anyMatched) return { matches: false, matchedEvent: null };
}
if (Object.prototype.hasOwnProperty.call(dayMatch, 'not')) {
const notCondition = dayMatch.not;
if (Array.isArray(notCondition)) {
for (const condition of notCondition) {
if (dayMatchesNormalizedRule(condition, context, helpers).matches) return { matches: false, matchedEvent: null };
}
} else if (notCondition && dayMatchesNormalizedRule(notCondition, context, helpers).matches) {
return { matches: false, matchedEvent: null };
}
}
return { matches: true, matchedEvent };
};
const matchesAdvancedRule = (ruleOrMatch, context = {}, helpers) => {
const match = ruleOrMatch?.match || ruleOrMatch;
if (!match || typeof match !== 'object') return { matches: false, matchedEvent: null };
let matchedEvent = null;
const eventMatch = match.event && Object.keys(match.event).length ? match.event : null;
if (eventMatch) {
if (context.event) {
if (!eventMatchesNormalizedRule(context.event, eventMatch, helpers)) return { matches: false, matchedEvent: null };
matchedEvent = context.event;
} else {
const event = findMatchingEventForCondition(eventMatch, context.dayEvents || [], helpers);
if (!event) return { matches: false, matchedEvent: null };
matchedEvent = event;
}
}
const dayMatch = match.day && Object.keys(match.day).length ? match.day : null;
if (dayMatch) {
const dayResult = dayMatchesNormalizedRule(dayMatch, context, helpers);
if (!dayResult.matches) return { matches: false, matchedEvent: null };
if (!matchedEvent && dayResult.matchedEvent) matchedEvent = dayResult.matchedEvent;
}
const allConditions = Array.isArray(match.all) ? match.all : [];
for (const condition of allConditions) {
const result = matchesAdvancedRule(condition, context, helpers);
if (!result.matches) return { matches: false, matchedEvent: null };
if (!matchedEvent && result.matchedEvent) matchedEvent = result.matchedEvent;
}
const anyConditions = Array.isArray(match.any) ? match.any : [];
if (anyConditions.length) {
let anyMatched = false;
for (const condition of anyConditions) {
const result = matchesAdvancedRule(condition, context, helpers);
if (result.matches) {
anyMatched = true;
if (!matchedEvent && result.matchedEvent) matchedEvent = result.matchedEvent;
break;
}
}
if (!anyMatched) return { matches: false, matchedEvent: null };
}
if (Object.prototype.hasOwnProperty.call(match, 'not')) {
const notCondition = match.not;
if (Array.isArray(notCondition)) {
for (const condition of notCondition) {
if (matchesAdvancedRule(condition, context, helpers).matches) return { matches: false, matchedEvent: null };
}
} else if (notCondition && matchesAdvancedRule(notCondition, context, helpers).matches) {
return { matches: false, matchedEvent: null };
}
}
return { matches: true, matchedEvent };
};
const getEmptyAdvancedMatch = () => ({ event: {}, day: {}, any: [], all: [], not: null });
const normalizeEventMatchConditions = (rawMatch) => {
if (!rawMatch || typeof rawMatch !== 'object' || Array.isArray(rawMatch)) return null;
const normalized = {};
const logicalKeys = new Set(['all', 'and', 'any', 'not']);
const eventAliases = {
title_contains: 'title',
summary_contains: 'summary',
location_contains: 'location',
description_contains: 'description'
};
const calendarAliases = new Set(['calendar_entity', 'entity_id', 'entity']);
Object.entries(rawMatch).forEach(([key, value]) => {
const normalizedKey = String(key || '').trim().toLowerCase();
if (!normalizedKey) return;
if (logicalKeys.has(normalizedKey)) {
if (normalizedKey === 'all' || normalizedKey === 'and') {
const conditions = Array.isArray(value) ? value : [value];
const normalizedConditions = conditions
.map((condition) => normalizeEventMatchConditions(condition))
.filter(Boolean);
if (normalizedConditions.length) {
if (!Array.isArray(normalized.all)) normalized.all = [];
normalized.all.push(...normalizedConditions);
}
return;
}
if (normalizedKey === 'any') {
const conditions = Array.isArray(value) ? value : [value];
const normalizedConditions = conditions
.map((condition) => normalizeEventMatchConditions(condition))
.filter(Boolean);
if (normalizedConditions.length) normalized.any = normalizedConditions;
return;
}
if (normalizedKey === 'not') {
if (Array.isArray(value)) {
const normalizedConditions = value
.map((condition) => normalizeEventMatchConditions(condition))
.filter(Boolean);
if (normalizedConditions.length) normalized.not = normalizedConditions;
} else {
const normalizedCondition = normalizeEventMatchConditions(value);
if (normalizedCondition) normalized.not = normalizedCondition;
}
return;
}
}
if (eventAliases[normalizedKey]) {
const canonicalKey = eventAliases[normalizedKey];
if (normalized[canonicalKey] === undefined) normalized[canonicalKey] = `contains:${value}`;
return;
}
if (calendarAliases.has(normalizedKey)) {
if (normalized.calendar === undefined) normalized.calendar = value;
return;
}
if (normalizedKey === 'all_day_event') {
if (normalized.all_day === undefined) normalized.all_day = value;
return;
}
if (['title', 'summary', 'location', 'description', 'calendar', 'all_day', 'past'].includes(normalizedKey)) {
normalized[normalizedKey] = value;
}
});
return Object.keys(normalized).length ? normalized : null;
};
const normalizeDayMatchConditions = (rawMatch, { normalizeDayOfWeekRule, localeOverride = null } = {}) => {
if (!rawMatch || typeof rawMatch !== 'object' || Array.isArray(rawMatch)) return null;
const normalized = {};
const logicalKeys = new Set(['all', 'and', 'any', 'not']);
Object.entries(rawMatch).forEach(([key, value]) => {
const normalizedKey = String(key || '').trim().toLowerCase();
if (!normalizedKey) return;
if (logicalKeys.has(normalizedKey)) {
if (normalizedKey === 'all' || normalizedKey === 'and') {
const conditions = Array.isArray(value) ? value : [value];
const normalizedConditions = conditions
.map((condition) => normalizeDayMatchConditions(condition, { normalizeDayOfWeekRule, localeOverride }))
.filter(Boolean);
if (normalizedConditions.length) {
if (!Array.isArray(normalized.all)) normalized.all = [];
normalized.all.push(...normalizedConditions);
}
return;
}
if (normalizedKey === 'any') {
const conditions = Array.isArray(value) ? value : [value];
const normalizedConditions = conditions
.map((condition) => normalizeDayMatchConditions(condition, { normalizeDayOfWeekRule, localeOverride }))
.filter(Boolean);
if (normalizedConditions.length) normalized.any = normalizedConditions;
return;
}
if (normalizedKey === 'not') {
if (Array.isArray(value)) {
const normalizedConditions = value
.map((condition) => normalizeDayMatchConditions(condition, { normalizeDayOfWeekRule, localeOverride }))
.filter(Boolean);
if (normalizedConditions.length) normalized.not = normalizedConditions;
} else {
const normalizedCondition = normalizeDayMatchConditions(value, { normalizeDayOfWeekRule, localeOverride });
if (normalizedCondition) normalized.not = normalizedCondition;
}
return;
}
}
if (['today', 'past', 'future', 'weekend', 'weekday'].includes(normalizedKey)) {
normalized[normalizedKey] = value;
return;
}
if (normalizedKey === 'day_of_week') {
const dayOfWeek = normalizeDayOfWeekRule(value, localeOverride);
if (dayOfWeek.length) normalized.day_of_week = dayOfWeek;
return;
}
if (normalizedKey === 'has_event' || normalizedKey === 'no_event') {
if (value === true || value === false) {
normalized[normalizedKey] = value;
} else {
const eventMatch = normalizeEventMatchConditions(value);
if (eventMatch) normalized[normalizedKey] = eventMatch;
}
}
});
return Object.keys(normalized).length ? normalized : null;
};
const normalizeAdvancedRuleMatch = (rawMatch, { defaultScope = 'event', localeOverride = null, normalizeDayOfWeekRule } = {}) => {
if (!rawMatch || typeof rawMatch !== 'object' || Array.isArray(rawMatch)) return null;
const match = getEmptyAdvancedMatch();
const logicalKeys = new Set(['all', 'and', 'any', 'not']);
const explicitKeys = new Set(['event', 'day', ...logicalKeys]);
let hasMatch = false;
if (rawMatch.event && typeof rawMatch.event === 'object' && !Array.isArray(rawMatch.event)) {
const eventMatch = normalizeEventMatchConditions(rawMatch.event);
if (eventMatch) {
match.event = eventMatch;
hasMatch = true;
}
}
if (rawMatch.day && typeof rawMatch.day === 'object' && !Array.isArray(rawMatch.day)) {
const dayMatch = normalizeDayMatchConditions(rawMatch.day, { normalizeDayOfWeekRule, localeOverride });
if (dayMatch) {
match.day = dayMatch;
hasMatch = true;
}
}
const implicitRaw = Object.fromEntries(Object.entries(rawMatch).filter(([key]) => !explicitKeys.has(String(key || '').trim().toLowerCase())));
if (Object.keys(implicitRaw).length) {
if (defaultScope === 'day') {
const dayMatch = normalizeDayMatchConditions(implicitRaw, { normalizeDayOfWeekRule, localeOverride });
if (dayMatch) {
match.day = { ...match.day, ...dayMatch };
hasMatch = true;
}
} else {
const eventMatch = normalizeEventMatchConditions(implicitRaw);
if (eventMatch) {
match.event = { ...match.event, ...eventMatch };
hasMatch = true;
}
}
}
['all', 'and'].forEach((key) => {
if (rawMatch[key] === undefined) return;
const conditions = Array.isArray(rawMatch[key]) ? rawMatch[key] : [rawMatch[key]];
const normalizedConditions = conditions
.map((condition) => normalizeAdvancedRuleMatch(condition, { defaultScope, localeOverride, normalizeDayOfWeekRule }))
.filter(Boolean);
if (normalizedConditions.length) {
match.all.push(...normalizedConditions);
hasMatch = true;
}
});
if (rawMatch.any !== undefined) {
const conditions = Array.isArray(rawMatch.any) ? rawMatch.any : [rawMatch.any];
const normalizedConditions = conditions
.map((condition) => normalizeAdvancedRuleMatch(condition, { defaultScope, localeOverride, normalizeDayOfWeekRule }))
.filter(Boolean);
if (normalizedConditions.length) {
match.any = normalizedConditions;
hasMatch = true;
}
}
if (rawMatch.not !== undefined) {
if (Array.isArray(rawMatch.not)) {
const normalizedConditions = rawMatch.not
.map((condition) => normalizeAdvancedRuleMatch(condition, { defaultScope, localeOverride, normalizeDayOfWeekRule }))
.filter(Boolean);
if (normalizedConditions.length) {
match.not = normalizedConditions;
hasMatch = true;
}
} else {
const normalizedCondition = normalizeAdvancedRuleMatch(rawMatch.not, { defaultScope, localeOverride, normalizeDayOfWeekRule });
if (normalizedCondition) {
match.not = normalizedCondition;
hasMatch = true;
}
}
}
return hasMatch ? match : null;
};
const normalizeLegacyDayStyleMatch = (rule, { localeOverride = null, normalizeDayOfWeekRule, normalizeAdvancedRuleMatch }) => {
const rawCondition = String(rule.condition || '').trim().toLowerCase();
if (!rawCondition) return null;
const isNegatedCondition = rawCondition.startsWith('!');
const condition = isNegatedCondition ? rawCondition.slice(1) : rawCondition;
if (!condition) return null;
if (!['today', 'past', 'future', 'weekend', 'weekday', 'day_of_week', 'has_event'].includes(condition)) return null;
if (isNegatedCondition && condition !== 'has_event') return null;
const dayMatch = {};
if (condition === 'has_event') {
const eventMatch = {};
if (rule.calendar !== undefined && rule.calendar !== null && String(rule.calendar).trim()) {
eventMatch.calendar = rule.calendar;
}
if (rule.title_match !== undefined && rule.title_match !== null && rule.title_match !== '') {
eventMatch.title = rule.title_match;
}
if (!Object.keys(eventMatch).length) return null;
dayMatch[isNegatedCondition ? 'no_event' : 'has_event'] = eventMatch;
} else if (condition === 'day_of_week') {
const dayOfWeek = normalizeDayOfWeekRule(rule.day_of_week ?? rule.day ?? rule.days, localeOverride);
if (!dayOfWeek.length) return null;
dayMatch.day_of_week = dayOfWeek;
} else {
dayMatch[condition] = true;
}
return normalizeAdvancedRuleMatch({ day: dayMatch }, 'day', localeOverride);
};
function isWeatherEntityId(entityId) {
return !!entityId && entityId.startsWith('weather.');
}
function buildWeatherForecastSubscriptionMessage(entityId, forecastType = 'daily') {
return {
type: 'weather/subscribe_forecast',
entity_id: entityId,
forecast_type: forecastType
};
}
function buildWeatherForecastRequestMessage(entityId, forecastType = 'daily') {
return {
type: 'weather/get_forecasts',
entity_ids: [entityId],
forecast_type: forecastType
};
}
const DEFAULT_RETRY_DELAY_MS = 5 * 60 * 1000;
class WeatherForecastController {
constructor({
getHass,
getWeatherEntityId,
onForecastUpdated = () => {},
now = () => Date.now(),
requestForecast = null,
subscribeForecast = null,
retryDelayMs = DEFAULT_RETRY_DELAY_MS
} = {}) {
this.getHass = getHass || (() => null);
this.getWeatherEntityId = getWeatherEntityId || (() => null);
this.onForecastUpdated = onForecastUpdated;
this.now = now;
this.requestForecast = requestForecast;
this.subscribeForecast = subscribeForecast;
this.retryDelayMs = retryDelayMs;
this.forecastByEntity = new Map();
this.subscriptionEntityId = null;
this.unsubscribe = null;
this.subscriptionInFlight = null;
this.subscriptionInFlightEntityId = null;
this.subscriptionGeneration = 0;
this.refreshInFlight = false;
this.refreshRetryAtByEntity = new Map();
}
getActiveWeatherEntityId() {
const entityId = this.getWeatherEntityId();
return isWeatherEntityId(entityId) ? entityId : null;
}
handleConfigChanged(previousEntityId, nextEntityId) {
if (previousEntityId !== nextEntityId) {
this.teardownSubscription();
this.clearForecasts();
this.clearRetryTimes();
}
}
clearForecasts() {
this.forecastByEntity.clear();
}
clearRetryTimes() {
this.refreshRetryAtByEntity.clear();
}
getForecastForEntity(entityId) {
return this.forecastByEntity.get(entityId);
}
getRenderSignature(entityId) {
const forecast = this.getForecastForEntity(entityId);
return JSON.stringify(Array.isArray(forecast) ? forecast : null);
}
teardownSubscription() {
this.subscriptionGeneration += 1;
if (typeof this.unsubscribe === 'function') {
this.unsubscribe();
}
this.unsubscribe = null;
this.subscriptionEntityId = null;
this.subscriptionInFlight = null;
this.subscriptionInFlightEntityId = null;
}
async ensureSubscription() {
const entityId = this.getActiveWeatherEntityId();
if (!entityId) {
this.teardownSubscription();
return undefined;
}
const hass = this.getHass();
const subscribeForecast = this.subscribeForecast || hass?.connection?.subscribeMessage?.bind(hass.connection);
if (typeof subscribeForecast !== 'function') {
return undefined;
}
if (this.subscriptionEntityId === entityId && this.unsubscribe) {
return undefined;
}
if (this.subscriptionInFlight && this.subscriptionInFlightEntityId === entityId) {
return this.subscriptionInFlight;
}
this.teardownSubscription();
const subscriptionGeneration = this.subscriptionGeneration;
this.subscriptionInFlightEntityId = entityId;
const setupPromise = subscribeForecast(
(message) => {
const nextForecast = Array.isArray(message?.forecast) ? message.forecast : [];
this.forecastByEntity.set(entityId, nextForecast);
this.onForecastUpdated(entityId, nextForecast, { source: 'subscription' });
},
buildWeatherForecastSubscriptionMessage(entityId)
)
.then((unsubscribe) => {
const generationMatches = subscriptionGeneration === this.subscriptionGeneration;
const entityMatches = entityId === this.subscriptionInFlightEntityId;
if (!generationMatches || !entityMatches) {
if (typeof unsubscribe === 'function') {
unsubscribe();
}
return;
}
this.unsubscribe = unsubscribe;
this.subscriptionEntityId = entityId;
})
.catch(() => {
if (subscriptionGeneration === this.subscriptionGeneration) {
this.unsubscribe = null;
this.subscriptionEntityId = null;
}
})
.finally(() => {
if (subscriptionGeneration === this.subscriptionGeneration) {
this.subscriptionInFlight = null;
this.subscriptionInFlightEntityId = null;
}
});
this.subscriptionInFlight = setupPromise;
return setupPromise;
}
async refreshForecastData() {
const entityId = this.getActiveWeatherEntityId();
if (!entityId) return undefined;
const hass = this.getHass();
if (!hass || this.refreshInFlight) return undefined;
if (this.forecastByEntity.has(entityId)) return undefined;
const now = this.now();
const retryAt = this.refreshRetryAtByEntity.get(entityId) || 0;
if (retryAt > now) return undefined;
const requestForecast = this.requestForecast || ((message) => hass.callWS(message));
if (typeof requestForecast !== 'function') return undefined;
this.refreshInFlight = true;
try {
const wsResponse = await requestForecast(buildWeatherForecastRequestMessage(entityId));
const dailyForecast = wsResponse?.[entityId]?.forecast;
if (Array.isArray(dailyForecast)) {
this.forecastByEntity.set(entityId, dailyForecast);
this.refreshRetryAtByEntity.delete(entityId);
this.onForecastUpdated(entityId, dailyForecast, { source: 'refresh' });
}
} catch (error) {
this.refreshRetryAtByEntity.set(entityId, now + this.retryDelayMs);
} finally {
this.refreshInFlight = false;
}
return undefined;
}
}
function createWeatherForecastController(dependencies) {
return new WeatherForecastController(dependencies);
}
const resolveTimedEventRange = (startValue, endValue, fallbackDurationMs = 60 * 60 * 1000) => {
const start = parsePossiblyLocalDateTime(startValue);
if (!(start instanceof Date) || Number.isNaN(start.getTime())) {
return { start: null, end: null };
}
const parsedEnd = endValue ? parsePossiblyLocalDateTime(endValue) : null;
if (parsedEnd instanceof Date && !Number.isNaN(parsedEnd.getTime())) {
return { start, end: parsedEnd };
}
return {
start,
end: new Date(start.getTime() + fallbackDurationMs)
};
};
const buildRRuleFromInputs = ({ frequency, interval, untilDate, count, byDay }) => {
const parts = [`FREQ=${frequency}`];
const parsedInterval = parseInt(interval, 10);
if (!Number.isNaN(parsedInterval) && parsedInterval > 1) {
parts.push(`INTERVAL=${parsedInterval}`);
}
if (Array.isArray(byDay) && byDay.length > 0) {
parts.push(`BYDAY=${byDay.join(',')}`);
}
const parsedCount = parseInt(count, 10);
if (!Number.isNaN(parsedCount) && parsedCount > 0) {
parts.push(`COUNT=${parsedCount}`);
} else if (untilDate) {
const until = new Date(`${untilDate}T23:59:59`);
if (!Number.isNaN(until.getTime())) {
const compactUntil = until.toISOString().replace(/[-:]/g, '').split('.')[0] + 'Z';
parts.push(`UNTIL=${compactUntil}`);
}
}
return parts.join(';');
};
const normalizeEventFormData = ({
title,
location,
description,
isAllDay,
startDate,
endDate,
startDateTime,
endDateTime,
fallbackDurationMs = 60 * 60 * 1000,
recurrence = null
}) => {
if (!title) {
return { valid: false, errorKey: 'eventTitleRequired' };
}
const eventData = {
summary: title,
location: location || undefined,
description: description || undefined
};
if (isAllDay) {
if (!startDate || !endDate) {
return { valid: false, errorKey: 'startEndDatesRequired' };
}
const start = parseLocalDate(startDate);
const end = parseLocalDate(endDate);
if (end < start) {
return { valid: false, errorKey: 'endDateBeforeStart' };
}
const exclusiveEndDate = new Date(end);
exclusiveEndDate.setDate(exclusiveEndDate.getDate() + 1);
const exclusiveEndDateStr = formatLocalDate(exclusiveEndDate);
eventData.start = { date: startDate };
eventData.end = { date: exclusiveEndDateStr };
} else {
if (!startDateTime) {
return { valid: false, errorKey: 'startEndTimesRequired' };
}
const { start, end } = resolveTimedEventRange(startDateTime, endDateTime, fallbackDurationMs);
if (end <= start) {
return { valid: false, errorKey: 'endTimeBeforeStart' };
}
eventData.start = { dateTime: start.toISOString() };
eventData.end = { dateTime: end.toISOString() };
}
if (recurrence?.enabled) {
if (recurrence.frequency === 'WEEKLY' && (!Array.isArray(recurrence.byDay) || recurrence.byDay.length === 0)) {
return { valid: false, errorKey: 'recurrenceSelectWeekday' };
}
eventData.rrule = buildRRuleFromInputs({
frequency: recurrence.frequency,
interval: recurrence.interval,
untilDate: recurrence.untilDate,
count: recurrence.count,
byDay: recurrence.frequency === 'WEEKLY' ? recurrence.byDay : []
});
}
return { valid: true, eventData };
};
const buildEventServiceData = (calendarId, eventData) => {
const baseData = {
entity_id: calendarId,
summary: eventData.summary
};
if (eventData.location) {
baseData.location = eventData.location;
}
if (eventData.description) {
baseData.description = eventData.description;
}
if (eventData.start.date) {
baseData.start_date = eventData.start.date;
baseData.end_date = eventData.end.date;
} else {
baseData.start_date_time = eventData.start.dateTime;
baseData.end_date_time = eventData.end.dateTime;
}
if (eventData.rrule) {
baseData.rrule = eventData.rrule;
}
return baseData;
};
const buildCreateEventWebSocketPayload = (calendarId, eventData) => ({
type: 'calendar/event/create',
entity_id: calendarId,
event: {
summary: eventData.summary,
location: eventData.location,
description: eventData.description,
rrule: eventData.rrule,
dtstart: eventData.start.dateTime || eventData.start.date,
dtend: eventData.end.dateTime || eventData.end.date
}
});
const getRecurringUpdateControls = (originalEvent, eventData, editScope = 'this') => {
const isRecurringUpdate = !!eventData.rrule || !!originalEvent.rrule;
return {
isRecurringUpdate,
recurrenceId: (isRecurringUpdate && editScope !== 'all') ? originalEvent.recurrence_id : null,
recurrenceRange: (isRecurringUpdate && editScope === 'future' && originalEvent.recurrence_id) ? 'THISANDFUTURE' : null
};
};
const buildUpdateEventServiceData = (originalEvent, eventData, recurrenceId = null, recurrenceRange = null) => {
const serviceData = {
...buildEventServiceData(originalEvent.entityId, eventData),
uid: originalEvent.uid
};
if (recurrenceId) {
serviceData.recurrence_id = recurrenceId;
}
if (recurrenceRange) {
serviceData.recurrence_range = recurrenceRange;
}
return serviceData;
};
const buildUpdateEventWebSocketPayload = (originalEvent, eventData, recurrenceId = null, recurrenceRange = null) => {
const dtstart = eventData.start.dateTime || eventData.start.date;
const dtend = eventData.end.dateTime || eventData.end.date;
const eventPayload = {
summary: eventData.summary,
dtstart,
dtend
};
if (eventData.location) {
eventPayload.location = eventData.location;
}
if (eventData.description) {
eventPayload.description = eventData.description;
}
if (eventData.rrule) {
eventPayload.rrule = eventData.rrule;
}
const wsPayload = {
type: 'calendar/event/update',
entity_id: originalEvent.entityId,
uid: originalEvent.uid,
event: eventPayload
};
if (recurrenceId) {
wsPayload.recurrence_id = recurrenceId;
}
if (recurrenceRange) {
wsPayload.recurrence_range = recurrenceRange;
}
return wsPayload;
};
const buildDeleteEventPayload = (calendarId, uid, recurrenceId = null, recurrenceRange = null) => {
const payload = {
entity_id: calendarId,
uid: uid
};
if (recurrenceId) {
payload.recurrence_id = recurrenceId;
}
if (recurrenceRange) {
payload.recurrence_range = recurrenceRange;
}
return payload;
};
const buildDeleteEventWebSocketPayload = (calendarId, uid, recurrenceId = null, recurrenceRange = null) => ({
type: 'calendar/event/delete',
...buildDeleteEventPayload(calendarId, uid, recurrenceId, recurrenceRange)
});
function getVisibleCalendarBadgesForEvent(event, { hiddenCalendars = new Set(), getVirtualBadgeForEvent, normalizeSingleColor, configColors = {} } = {}) {
const virtualCalendar = getVirtualBadgeForEvent?.(event);
if (virtualCalendar) {
const visibleSourceEntityIds = virtualCalendar.entities.filter((entityId) => !hiddenCalendars.has(entityId));
if (visibleSourceEntityIds.length === 0) return [];
const fallbackColor = event?.color || normalizeSingleColor?.(configColors[virtualCalendar.entities[0]]);
return [{ entityId: `virtual:${virtualCalendar.id}`, color: virtualCalendar.color || fallbackColor }];
}
if (event?.isCombinedCalendarEvent && Array.isArray(event.sourceCalendars)) {
return event.sourceCalendars.filter(calendar => !hiddenCalendars.has(calendar.entityId));
}
return [{ entityId: event.entityId, color: event.color }];
}
function isCombinedEventWithinSingleVirtualCalendar(event, { hiddenCalendars = new Set(), getVirtualBadgeForEntity } = {}) {
if (!event?.isCombinedCalendarEvent || !Array.isArray(event?.sourceEvents)) return false;
const visibleSources = event.sourceEvents.filter((sourceEvent) => !hiddenCalendars.has(sourceEvent.entityId));
if (visibleSources.length <= 1) return false;
const virtualIds = new Set();
for (const sourceEvent of visibleSources) {
const virtualCalendar = getVirtualBadgeForEntity?.(sourceEvent.entityId);
if (!virtualCalendar) return false;
virtualIds.add(virtualCalendar.id);
if (virtualIds.size > 1) return false;
}
return virtualIds.size === 1;
}
function shouldShowCombinedCornerBubbles(event, { combineCalendars = false, isSingleVirtualCalendar = false, styleOverrides = null } = {}) {
if (!event?.isCombinedCalendarEvent || !combineCalendars) return false;
if (isSingleVirtualCalendar) return false;
return !!styleOverrides?.hasDuplicateBackgroundColors;
}
function getModalCalendarBadgesForEvent(event, { hiddenCalendars = new Set(), getVisibleCalendarBadges } = {}) {
if (event?.isCombinedCalendarEvent && Array.isArray(event.sourceCalendars)) {
const sourceBadges = event.sourceCalendars
.filter((calendar) => calendar?.entityId && !hiddenCalendars.has(calendar.entityId))
.map((calendar) => ({ entityId: calendar.entityId, color: calendar.color || event.color }));
if (sourceBadges.length > 0) {
return sourceBadges;
}
}
return getVisibleCalendarBadges?.(event) || [];
}
function getEventFontSizeDisplayValue(configuredSize, fallbackPx = 11) {
if (configuredSize === undefined || configuredSize === null || configuredSize === '') {
return `${fallbackPx}px`;
}
if (typeof configuredSize === 'number' && Number.isFinite(configuredSize)) {
return `${configuredSize}px`;
}
const normalized = String(configuredSize).trim();
if (!normalized) return `${fallbackPx}px`;
return /^\d+(\.\d+)?$/.test(normalized) ? `${normalized}px` : normalized;
}
function shouldShowEventLocation(event, { styleOverrides = null, showEventLocation = false } = {}) {
const showLocation = styleOverrides?.show_event_location ?? showEventLocation;
return !!(showLocation && event?.location);
}
function getDisplayLocation(location, { styleOverrides = null, useShortLocation = false } = {}) {
const normalizedLocation = normalizeEventTextValue(location);
if (!normalizedLocation) return '';
const shouldShorten = styleOverrides?.use_short_location ?? useShortLocation;
if (!shouldShorten) return normalizedLocation;
const numberMatch = normalizedLocation.match(/\b\d+[A-Za-z0-9-]*\b/);
if (!numberMatch) {
return normalizedLocation;
}
const numberIndex = numberMatch.index ?? -1;
const hasPrefix = numberIndex > 0;
if (hasPrefix) {
const prefix = normalizedLocation
.slice(0, numberIndex)
.replace(/[\s,;:\/\\|-]+$/g, '')
.trim();
if (prefix) {
return prefix;
}
return normalizedLocation;
}
const commonStreetEndingPattern = /\b(street|st\.?|road|rd\.?|avenue|ave\.?|boulevard|blvd\.?|drive|dr\.?|lane|ln\.?|court|ct\.?|circle|cir\.?|place|pl\.?|parkway|pkwy\.?|way|terrace|ter\.?|highway|hwy\.?)\b/i;
const firstSegmentEnd = normalizedLocation.search(/[,;]/);
const streetSegment = firstSegmentEnd >= 0
? normalizedLocation.slice(0, firstSegmentEnd)
: normalizedLocation;
const endingMatch = streetSegment.match(commonStreetEndingPattern);
if (!endingMatch) {
return normalizedLocation;
}
const endingStart = endingMatch.index ?? -1;
if (endingStart < 0) {
return normalizedLocation;
}
const endingText = endingMatch[0] || '';
const shortened = streetSegment
.slice(0, endingStart + endingText.length)
.replace(/[,\s;:\/\\|-]+$/g, '')
.trim();
return shortened || normalizedLocation;
}
function shouldShowEventTime(event, { styleOverrides = null, hiddenCalendars = new Set(), hideTimesForCalendars = [] } = {}) {
if (!event) return true;
if (styleOverrides?.hide_time === true) return false;
if (styleOverrides?.show_time === true) return true;
const visibleEntityIds = event.isCombinedCalendarEvent && Array.isArray(event.sourceEntityIds)
? event.sourceEntityIds.filter(entityId => !hiddenCalendars.has(entityId))
: [event.entityId];
if (visibleEntityIds.length === 0) {
return false;
}
return visibleEntityIds.some(entityId => !hideTimesForCalendars.includes(entityId));
}
function getEventBubbleFontColor(event, { styleOverrides = null, hiddenCalendars = new Set(), eventFontColors = {}, normalizeSingleColor, getEventBackgroundColor, getContrastColor } = {}) {
if (!event) return 'white';
if (styleOverrides?.event_font_color) {
return styleOverrides.event_font_color;
}
const visibleEntityIds = event.isCombinedCalendarEvent && Array.isArray(event.sourceEntityIds)
? event.sourceEntityIds.filter(entityId => !hiddenCalendars.has(entityId))
: [event.entityId];
const preferredEntityId = visibleEntityIds[0] || event.entityId;
const configuredColor = preferredEntityId
? normalizeSingleColor?.(eventFontColors?.[preferredEntityId])
: null;
if (configuredColor) {
return configuredColor;
}
return getContrastColor?.(getEventBackgroundColor?.(event)) || 'white';
}
function getScheduleVisualInfo(event, { getEventDateTimeInfo, shouldRenderTimedEventAsAllDayInSchedule, shouldShowEventTime: shouldShowTime, formatEventTime, translate }) {
const { eventStart, eventEnd, isAllDay } = getEventDateTimeInfo(event);
const rendersAsAllDay = isAllDay || shouldRenderTimedEventAsAllDayInSchedule(eventStart, eventEnd);
const displayTitle = event.summary || translate('untitledEvent');
const shouldIncludeStartTime = !isAllDay && rendersAsAllDay && shouldShowTime(event);
return {
eventStart,
eventEnd,
isAllDay,
rendersAsAllDay,
displayTitle: shouldIncludeStartTime
? translate('eventTitleWithStartTime', {
title: displayTitle,
time: formatEventTime(eventStart, { schedule: true })
})
: displayTitle
};
}
async function fetchEventsByCalendarInRange({
hass,
entities = [],
startDate,
endDate,
getDateRangeChunks,
formatLocalDate,
getCalendarColor,
getEventIdentityKey,
normalizeCalendarEvent
}) {
const chunks = getDateRangeChunks(startDate, endDate, 30);
const eventsByCalendar = await Promise.all(
entities.map((entityId, index) => fetchEventsForCalendar({
hass,
entityId,
colorIndex: index,
chunks,
formatLocalDate,
getCalendarColor,
getEventIdentityKey,
normalizeCalendarEvent
}))
);
return entities.reduce((acc, entityId, index) => {
acc[entityId] = eventsByCalendar[index] || [];
return acc;
}, {});
}
async function fetchEventsForCalendar({
hass,
entityId,
colorIndex = 0,
chunks = [],
formatLocalDate,
getCalendarColor,
getEventIdentityKey,
normalizeCalendarEvent
}) {
const seen = new Set();
const color = getCalendarColor(entityId, colorIndex);
const chunkEventLists = await Promise.all(
chunks.map(chunk => fetchEventsForChunk({ hass, entityId, chunk, formatLocalDate }))
);
const mergedEvents = [];
chunkEventLists.forEach(events => {
if (!events || !Array.isArray(events)) return;
events.forEach(event => {
const key = getEventIdentityKey(entityId, event);
if (seen.has(key)) return;
seen.add(key);
mergedEvents.push(normalizeCalendarEvent(event, { entityId, color }));
});
});
return mergedEvents;
}
async function fetchEventsForChunk({ hass, entityId, chunk, formatLocalDate }) {
const chunkStartStr = chunk.startDate.toISOString();
const chunkEndStr = chunk.endDate.toISOString();
try {
return await fetchEventsViaWebSocket({ hass, entityId, chunkStartStr, chunkEndStr });
} catch (error) {
try {
const startDateOnly = formatLocalDate(chunk.startDate);
const endDateOnly = formatLocalDate(chunk.endDate);
return await hass.callApi('GET', `calendars/${entityId}?start=${startDateOnly}T00:00:00Z&end=${endDateOnly}T23:59:59Z`);
} catch (error2) {
console.error(`Failed to fetch events for ${entityId}:`, error2.message || error2);
return [];
}
}
}
async function fetchEventsViaWebSocket({ hass, entityId, chunkStartStr, chunkEndStr }) {
return hass.callWS({
type: 'calendar/events',
entity_id: entityId,
start_date_time: chunkStartStr,
end_date_time: chunkEndStr
});
}
function mergeEvents(existingEvents, incomingEvents, { getEventIdentityKey, getEventStartDate }) {
const mergedByKey = new Map();
existingEvents.forEach(event => {
mergedByKey.set(getEventIdentityKey(event.entityId, event), event);
});
incomingEvents.forEach(event => {
mergedByKey.set(getEventIdentityKey(event.entityId, event), event);
});
return sortEventsByStartDate(Array.from(mergedByKey.values()), { getEventStartDate });
}
function sortEventsByStartDate(events, { getEventStartDate }) {
return [...events].sort((a, b) => getEventStartDate(a) - getEventStartDate(b));
}
function toStableString(value) {
if (Array.isArray(value)) {
return `[${value.map(item => toStableString(item)).join(',')}]`;
}
if (value && typeof value === 'object') {
const entries = Object.keys(value)
.sort()
.map(key => `${JSON.stringify(key)}:${toStableString(value[key])}`);
return `{${entries.join(',')}}`;
}
return JSON.stringify(value);
}
function getCalendarDataSignature(events = []) {
return events
.map(event => {
const { entityId, color, ...eventData } = event;
return toStableString(eventData);
})
.sort()
.join('|');
}
function isDateRangeCoveredByLoadedEvents(loadedEventRange, targetStartDate, targetEndDate) {
if (!loadedEventRange) return false;
return targetStartDate >= loadedEventRange.startDate &&
targetEndDate <= loadedEventRange.endDate;
}
function shouldRefreshEvents({ lastFetch, now = Date.now(), maxAge = 60000 } = {}) {
return !lastFetch || (now - lastFetch > maxAge);
}
function getMonthGridDates(currentDate, firstDayOfWeek) {
const year = currentDate.getFullYear();
const month = currentDate.getMonth();
const firstDay = new Date(year, month, 1).getDay();
const daysInMonth = new Date(year, month + 1, 0).getDate();
const daysInPrevMonth = new Date(year, month, 0).getDate();
const startDay = (firstDay - firstDayOfWeek + 7) % 7;
const days = [];
for (let i = startDay - 1; i >= 0; i--) {
const day = daysInPrevMonth - i;
days.push({ day, date: new Date(year, month - 1, day), isOtherMonth: true });
}
for (let day = 1; day <= daysInMonth; day++) {
days.push({ day, date: new Date(year, month, day), isOtherMonth: false });
}
const totalCells = startDay + daysInMonth;
const remainingCells = totalCells % 7 === 0 ? 0 : 7 - (totalCells % 7);
for (let day = 1; day <= remainingCells; day++) {
days.push({ day, date: new Date(year, month + 1, day), isOtherMonth: true });
}
return days;
}
function getRollingMonthGridDates(currentDate, firstDayOfWeek, rollingWeeks) {
const anchorDate = new Date(currentDate);
anchorDate.setHours(0, 0, 0, 0);
const currentDay = anchorDate.getDay();
const diff = (currentDay - firstDayOfWeek + 7) % 7;
const weekStart = new Date(anchorDate);
weekStart.setDate(anchorDate.getDate() - diff);
const totalWeeks = rollingWeeks + 1;
const totalDays = totalWeeks * 7;
const currentMonthStart = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
const days = [];
for (let i = 0; i < totalDays; i++) {
const date = new Date(weekStart);
date.setDate(weekStart.getDate() + i);
days.push({ day: date.getDate(), date, isOtherMonth: date < currentMonthStart });
}
return days;
}
function getMonthVisibleDateRange(currentDate, firstDayOfWeek, rollingWeeks = null) {
if (rollingWeeks !== null) {
const days = getRollingMonthGridDates(currentDate, firstDayOfWeek, rollingWeeks);
const startDate = new Date(days[0].date);
startDate.setHours(0, 0, 0, 0);
const endDate = new Date(days[days.length - 1].date);
endDate.setHours(23, 59, 59, 999);
return { startDate, endDate };
}
const days = getMonthGridDates(currentDate, firstDayOfWeek);
const startDate = new Date(days[0].date);
startDate.setHours(0, 0, 0, 0);
const endDate = new Date(days[days.length - 1].date);
endDate.setHours(23, 59, 59, 999);
return { startDate, endDate };
}
function getRollingDaysForView(viewMode, config) {
if (viewMode === 'week-compact' && config.rolling_days_week_compact !== null) {
return config.rolling_days_week_compact;
}
if (viewMode === 'week-standard' && config.rolling_days_schedule !== null) {
return config.rolling_days_schedule;
}
return null;
}
function getWeekDays({ currentDate, weekStart, weekDays, rollingDays }) {
if (rollingDays !== null) {
const days = [];
const startDate = new Date(currentDate);
startDate.setHours(0, 0, 0, 0);
for (let i = 0; i <= rollingDays; i++) {
const date = new Date(startDate);
date.setDate(startDate.getDate() + i);
days.push(date);
}
return days;
}
const days = [];
for (let i = 0; i < 7; i++) {
const date = new Date(weekStart);
date.setDate(weekStart.getDate() + i);
if (weekDays.includes(date.getDay())) {
days.push(date);
}
}
return days;
}
function getWeekVisibleDateRange(weekDays) {
const startDate = new Date(weekDays[0]);
startDate.setHours(0, 0, 0, 0);
const endDate = new Date(weekDays[weekDays.length - 1]);
endDate.setHours(23, 59, 59, 999);
return { startDate, endDate };
}
function getAgendaRollingDays(config) {
if (config?.rolling_days_agenda !== null && config?.rolling_days_agenda !== undefined) {
return config.rolling_days_agenda;
}
return null;
}
function getAgendaPeriodDaySpan(config) {
const rollingDays = getAgendaRollingDays(config);
return rollingDays !== null ? rollingDays : 14;
}
function createAgendaWindow(today, daySpan) {
const startDate = new Date(today);
startDate.setHours(0, 0, 0, 0);
const endDate = new Date(startDate);
endDate.setDate(endDate.getDate() + daySpan);
endDate.setHours(23, 59, 59, 999);
const visibleStartDate = new Date(startDate);
const visibleEndDate = new Date(endDate);
visibleEndDate.setHours(23, 59, 59, 999);
return { startDate, endDate, visibleStartDate, visibleEndDate };
}
function getAgendaDays(startDate, endDate) {
const days = [];
const cursor = new Date(startDate);
cursor.setHours(0, 0, 0, 0);
const end = new Date(endDate);
end.setHours(0, 0, 0, 0);
while (cursor <= end) {
days.push(new Date(cursor));
cursor.setDate(cursor.getDate() + 1);
}
return days;
}
function getAgendaVisibleDateRange(startDate, endDate) {
const visibleStartDate = new Date(startDate);
visibleStartDate.setHours(0, 0, 0, 0);
const visibleEndDate = new Date(endDate);
visibleEndDate.setHours(23, 59, 59, 999);
return { startDate: visibleStartDate, endDate: visibleEndDate };
}
function isAgendaRangeWithinWindow(range, windowStartDate, windowEndDate) {
if (!range?.startDate || !range?.endDate || !windowStartDate || !windowEndDate) {
return false;
}
const rangeStart = new Date(range.startDate);
rangeStart.setHours(0, 0, 0, 0);
const rangeEnd = new Date(range.endDate);
rangeEnd.setHours(23, 59, 59, 999);
const windowStart = new Date(windowStartDate);
windowStart.setHours(0, 0, 0, 0);
const windowEnd = new Date(windowEndDate);
windowEnd.setHours(23, 59, 59, 999);
return rangeStart >= windowStart && rangeEnd <= windowEnd;
}
function buildAgendaDayEntries(agendaDays, { getEventsForDay, isEventHiddenByStyle, sortEventsForDate, hideEmptyDays }) {
return agendaDays
.map((date) => ({
date,
matchingEvents: getEventsForDay(date, { includeHiddenStyledEvents: true }),
events: null
}))
.map((entry) => ({
...entry,
events: sortEventsForDate(entry.matchingEvents.filter((event) => !isEventHiddenByStyle(event)), entry.date)
}))
.filter((entry) => !hideEmptyDays || entry.events.length > 0);
}
function renderAgendaView({
agendaDays,
agendaEventMinHeight,
compactMaxHeight,
config,
today,
dayNames,
monthFormatter,
helpers
}) {
const containerStyle = helpers.getCompactContainerStyle(compactMaxHeight);
const agendaRows = [];
const shouldHideEmptyDays = !!config.hide_empty_days;
const agendaDayEntries = buildAgendaDayEntries(agendaDays, {
getEventsForDay: helpers.getEventsForDay,
isEventHiddenByStyle: helpers.isEventHiddenByStyle,
sortEventsForDate: helpers.sortEventsForDate,
hideEmptyDays: shouldHideEmptyDays
});
agendaDayEntries.forEach((entry, index) => {
const { date, events } = entry;
if (index > 0) {
const previousDate = agendaDayEntries[index - 1].date;
const monthChanged = previousDate.getMonth() !== date.getMonth() || previousDate.getFullYear() !== date.getFullYear();
if (monthChanged) {
agendaRows.push(`${helpers.escapeHtml(monthFormatter.format(date))}
`);
}
}
const isToday = date.toDateString() === today.toDateString();
const dayStyle = helpers.getDayStyleAttributes(date, entry.matchingEvents, isToday);
const dayStyleAttr = dayStyle.style ? ` style="${dayStyle.style}"` : '';
agendaRows.push(`
${dayNames[date.getDay()]}
${date.getDate()}
${helpers.renderDayForecast(date, 'agenda')}
${events.map(event => {
const daySegment = helpers.getEventDaySegment(event, date);
if (!daySegment) return '';
const { segmentStart, segmentEnd, isAllDaySegment } = daySegment;
const timeLabel = isAllDaySegment
? helpers.t('allDay')
: helpers.formatEventTimeRange(segmentStart, segmentEnd);
const eventStyle = helpers.getEventStyle(event);
const eventAgendaMinHeight = helpers.shouldShowCombinedCornerBubbles(event)
? `calc(${agendaEventMinHeight} + 16px)`
: agendaEventMinHeight;
return `
${helpers.renderEventTitleWithPrefix(event, event.summary || helpers.t('untitledEvent'))}
${helpers.shouldShowEventTime(event) ? `
${timeLabel}
` : ''}
${helpers.shouldShowEventLocation(event) ? `
📍 ${helpers.escapeHtml(helpers.getDisplayLocation(event.location, event))}
` : ''}
${helpers.renderEventIcon(event)}
${helpers.renderEventStyleCornerIcon(event)}
${helpers.renderCombinedCornerBubbles(event)}
`;
}).join('')}
${events.length === 0 ? `
${helpers.t('noEvents')}
` : ''}
`);
});
return `
${!config.compact_header && !config.hide_calendars ? helpers.renderCalendarBadges() : ''}
${agendaRows.join('')}
`;
}
function renderEventDetailsModal({
event,
startDate,
endDate,
isAllDay,
calendarName,
visibleBadges,
capabilities,
hasUID,
canEdit,
canDelete,
canForward,
canModify,
helpers
}) {
const {
escapeHtml,
formatDate,
formatEventTime,
formatDuration,
renderEventDescription,
t
} = helpers;
const combinedBadgeHtml = event.isCombinedCalendarEvent
? `${visibleBadges.map(calendar => `${escapeHtml(calendar.name)} `).join('')}
`
: `${escapeHtml(calendarName)}
`;
return `
📅 ${t('start')}
${formatDate(startDate)}${!isAllDay ? ` ${t('at')} ${formatEventTime(startDate)}` : ` (${t('allDay')})`}
🏁 ${t('end')}
${formatDate(endDate)}${!isAllDay ? ` ${t('at')} ${formatEventTime(endDate)}` : ` (${t('allDay')})`}
${!isAllDay ? `
⏱️ ${t('duration')}
${formatDuration(startDate, endDate)}
` : ''}
${event.location ? `
📍 ${t('location')}
${escapeHtml(event.location)}
` : ''}
${event.description ? `
📝 ${t('description')}
${renderEventDescription(event.description)}
` : ''}
${event.attendees && event.attendees.length > 0 ? `
👥 ${t('attendees')}
${event.attendees.map(a => escapeHtml(a.email || a.displayName || t('unknownAttendee'))).join(', ')}
` : ''}
${event.rrule ? `
🔁 ${t('recurrence')}
${t('recurringEvent')}
` : ''}
${!canModify && !capabilities.isReadonly && capabilities.isGoogleCalendar ? `
${t('googleCalendarLimitationTitle')} ${t('googleCalendarLimitationBody')}
` : ''}
${!canModify && !hasUID && !capabilities.isGoogleCalendar ? `
${t('cannotModifyTitle')} ${t('cannotModifyBody')}
` : ''}
${(canEdit || canDelete || canForward) ? `
${canDelete ? `${t('delete')} ` : ''}
${canForward ? `${t('forwardEvent')} ` : ''}
${canEdit ? `${t('editEvent')} ` : ''}
` : ''}
`;
}
function renderEventIcon(event, {
getEventStyleOverrides,
eventCalendarFriendlyName = false,
hideEventCalendarBubble = false,
getModalCalendarBadgesForEvent,
getCalendarName,
escapeHtml
}) {
const styleOverrides = getEventStyleOverrides(event);
const hideCalendarBubble = styleOverrides?.hide_event_calendar_bubble ?? hideEventCalendarBubble;
if (eventCalendarFriendlyName) {
const visibleBadges = getModalCalendarBadgesForEvent(event);
if (visibleBadges.length === 0) {
return '';
}
const namesHtml = visibleBadges
.map(calendar => `${escapeHtml(getCalendarName(calendar.entityId))}
`)
.join('');
return `${namesHtml}
`;
}
if (hideCalendarBubble) {
return '';
}
const visibleBadges = getModalCalendarBadgesForEvent(event);
if (visibleBadges.length === 0) {
return '';
}
const badgesHtml = visibleBadges.map(calendar => {
const name = getCalendarName(calendar.entityId);
const initial = name.charAt(0).toUpperCase();
return `${initial}
`;
}).join('');
return `${badgesHtml}
`;
}
function renderCombinedCornerBubbles(event, {
shouldShowCombinedCornerBubbles,
getModalCalendarBadgesForEvent,
getCalendarName,
escapeHtml
}) {
if (!shouldShowCombinedCornerBubbles(event)) return '';
const visibleBadges = getModalCalendarBadgesForEvent(event);
if (visibleBadges.length <= 1) return '';
const bubblesHtml = visibleBadges.map((calendar) => {
const name = getCalendarName(calendar.entityId);
const initial = name.charAt(0).toUpperCase();
return `${escapeHtml(initial)} `;
}).join('');
return `${bubblesHtml}
`;
}
function renderEventStyleIcon(iconConfig, { position = 'before_title', escapeHtml } = {}) {
if (!iconConfig || iconConfig.position !== position) return '';
const styleParts = [];
if (iconConfig.color) styleParts.push(`color: ${iconConfig.color};`);
if (iconConfig.size) styleParts.push(`--event-style-icon-size: ${iconConfig.size};`);
const styleAttr = styleParts.length ? ` style="${styleParts.join(' ')}"` : '';
const className = position === 'corner' ? 'event-style-icon event-style-icon-corner' : 'event-style-icon event-style-icon-before-title';
return `${titleText} ` : titleText;
const prefixMode = normalizeEventTitlePrefixMode(styleOverrides?.event_title_prefix ?? configuredEventTitlePrefix);
const visibleBadges = getModalCalendarBadgesForEvent(event);
if (prefixMode === 'none' || visibleBadges.length === 0) {
return titleIcon ? `${titleHtml} ` : titleText;
}
if (prefixMode === 'friendly_name') {
const calendarNames = visibleBadges
.map((calendar) => getCalendarName(calendar.entityId))
.filter(Boolean);
const uniqueCalendarNames = Array.from(new Set(calendarNames));
const calendarNameLabel = escapeHtml(uniqueCalendarNames.join(', '));
return `${calendarNameLabel}: ${titleHtml}${initial} `;
}
return `${badgeIconHtml} `;
}).join('');
return `${badgesHtml} ${titleHtml}
${badgeItems.map((badgeItem) => renderCalendarBadge({
badgeItem,
hideCalendarNames,
inline: false,
helpers
})).join('')}
`;
}
function renderCalendarBadgesInline({ badgeItems, hideCalendarNames = false, helpers }) {
if (badgeItems.length === 0) return '';
return `
${badgeItems.map((badgeItem) => renderCalendarBadge({
badgeItem,
hideCalendarNames,
inline: true,
helpers
})).join('')}
`;
}
function renderCalendarBadge({ badgeItem, hideCalendarNames, inline, helpers }) {
const badgeBackground = badgeItem.isHidden ? '#f3f4f6' : helpers.lightenColor(badgeItem.color, 0.85);
const badgeTextColor = badgeItem.isHidden ? '#9ca3af' : helpers.getContractColor(badgeBackground);
const inlineClass = inline ? ' calendar-badge-inline' : '';
const cursorStyle = inline ? '' : '\n cursor: pointer;';
return `
${renderCalendarBadgeIcon({
entityId: badgeItem.entityId,
name: badgeItem.name,
color: badgeItem.color,
isHidden: badgeItem.isHidden,
iconOverride: badgeItem.icon,
helpers
})}
${hideCalendarNames ? '' : renderCalendarBadgeLabel({ badgeItem, badgeTextColor, helpers })}
`;
}
function renderCalendarBadgeLabel({ badgeItem, badgeTextColor, helpers }) {
const personStateLabel = helpers.formatPersonStateLabel(helpers.getCalendarBadgePersonState(badgeItem.entityId));
return `
${helpers.escapeHtml(badgeItem.name)}
${personStateLabel ? `${helpers.escapeHtml(personStateLabel)} ` : ''}
`;
}
function renderCalendarBadgeIcon({ entityId, name, color, isHidden, iconOverride = null, helpers }) {
const configuredBadgeIcon = iconOverride || helpers.getCalendarBadgeIcon(entityId);
const hasPersonEntity = !!helpers.getCalendarBadgePersonEntityId(entityId);
const personPictureUrl = configuredBadgeIcon ? null : helpers.getPersonEntityPictureUrl(helpers.getCalendarBadgePersonState(entityId));
const iconBackground = isHidden ? '#9ca3af' : helpers.normalizeSingleColor(color);
const personIconClass = hasPersonEntity ? ' calendar-badge-person-icon' : '';
if (configuredBadgeIcon && configuredBadgeIcon.startsWith('mdi:')) {
return `
`;
}
if (configuredBadgeIcon || personPictureUrl) {
const imageUrl = configuredBadgeIcon || personPictureUrl;
const normalizedUrl = helpers.normalizeBackgroundImageUrl(imageUrl) || imageUrl;
return ``;
}
const initial = name.charAt(0).toUpperCase();
return `${helpers.escapeHtml(initial)}
`;
}
function formatDateTimeLocal(date) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
return `${year}-${month}-${day}T${hours}:${minutes}`;
}
function formatDate(date) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
}
function renderRecurrenceControls({
recurrenceData,
recurrenceEndMode,
recurrenceWeekdayOptions,
showRecurringFields,
showWeekdays,
helpers
}) {
const { escapeHtmlAttribute, t } = helpers;
return `
`;
}
function renderEventFields({
title,
location,
description,
startDate,
startTime,
endDate,
endTime,
isAllDay,
isRecurring,
recurrenceData,
recurrenceEndMode,
recurrenceWeekdayOptions,
helpers
}) {
const { escapeHtml, escapeHtmlAttribute, t } = helpers;
return `
${renderRecurrenceControls({
recurrenceData,
recurrenceEndMode,
recurrenceWeekdayOptions,
showRecurringFields: isRecurring,
showWeekdays: isRecurring && recurrenceData.frequency === 'WEEKLY',
helpers
})}
${t('description')}
`;
}
function renderCreateEventForm({
writableCalendars,
selectedCalendarIds,
prefill,
startDate,
startTime,
endDate,
endTime,
recurrenceData,
isPrefilledRecurring,
isPrefilledAllDay,
recurrenceEndMode,
recurrenceWeekdayOptions,
helpers
}) {
const { escapeHtml, getCalendarName, t } = helpers;
return `
`;
}
function renderEditEventForm({
event,
startDate,
endDate,
isAllDay,
visibleCalendarOptions,
selectedCombinedCalendarIds,
recurrenceData,
recurringSelectedByDefault,
recurrenceEndMode,
recurrenceWeekdayOptions,
helpers
}) {
const { escapeHtml, getCalendarName, t } = helpers;
return `
`;
}
function renderStandardHeader({
canAddEvents,
shouldShowControls,
helpers
}) {
return `
`;
}
function renderCompactHeader({
canAddEvents,
shouldShowCalendars,
shouldShowControls,
helpers
}) {
return `
`;
}
function renderHeaderTitle({
title,
headerTime,
headerWeather,
helpers
}) {
return `
`;
}
function renderDashboardNavButton({ shouldShow, helpers }) {
if (!shouldShow) return '';
return ``;
}
function renderPeriodNavigationButtons({
buttonType,
hideNavigationButtons,
shouldDisablePreviousNavigation,
helpers
}) {
if (hideNavigationButtons) return '';
if (buttonType === 'previous') {
return `‹ `;
}
if (buttonType === 'next') {
return '› ';
}
if (buttonType === 'today') {
return `${helpers.t('today')} `;
}
return '';
}
function renderViewModeButtons({ hideViewSelector, viewMode, helpers }) {
if (hideViewSelector) return '';
return `
${helpers.t('month')}
${helpers.t('week')}
${helpers.t('schedule')}
${helpers.t('agenda')}
`;
}
function renderThemeToggle({ hideDarkModeToggle, isDarkMode }) {
if (hideDarkModeToggle) return '';
return `${isDarkMode ? '☀︎' : '☾'} `;
}
function renderDayCellHeader({
date,
dayEventsForMatching,
dayNum,
helpers
}) {
return `
`;
}
function renderDayCellEvents({
date,
dayEvents,
hiddenEventCount,
visibleEvents,
helpers
}) {
return `
${dayEvents.slice(0, visibleEvents).map(event => helpers.renderMonthDayEvent(event, date)).join('')}
${hiddenEventCount > 0 ? `${helpers.t('moreEvents', { count: hiddenEventCount })}
` : ''}`;
}
function renderDayCell({
date,
dayEvents,
dayEventsForMatching,
dayNum,
dayStyle,
hiddenEventCount,
isOtherMonth,
isToday,
visibleEvents,
helpers
}) {
let classes = 'day-cell';
if (isOtherMonth) classes += ' other-month';
if (isToday) classes += ' today';
classes += dayStyle.className ? ` ${dayStyle.className}` : '';
const dayStyleAttr = dayStyle.style ? ` style="${dayStyle.style}"` : '';
return `
${renderDayCellHeader({
date,
dayEventsForMatching,
dayNum,
helpers
})}${renderDayCellEvents({
date,
dayEvents,
hiddenEventCount,
visibleEvents,
helpers
})}
`;
}
function renderWeekCompactView({
config,
weekDays,
today,
dayNames,
headerHeight,
helpers
}) {
const headerHeightStyle = headerHeight ? `--week-compact-header-height: ${headerHeight}px;` : '';
const containerStyle = `${headerHeightStyle}${helpers.getCompactContainerStyle()}`;
return `
${!config.compact_header && !config.hide_calendars ? helpers.renderCalendarBadges() : ''}
${weekDays.map(date => {
const isToday = date.toDateString() === today.toDateString();
const dayEventsForMatching = helpers.getEventsForDay(date, { includeHiddenStyledEvents: true });
const events = helpers.sortEventsForDate(dayEventsForMatching.filter((event) => !helpers.isEventHiddenByStyle(event)), date);
const dayStyle = helpers.getDayStyleAttributes(date, dayEventsForMatching, isToday);
const dayStyleAttr = dayStyle.style ? ` style="${dayStyle.style}"` : '';
return `
${events.map(event => {
return helpers.renderWeekCompactEvent(event, date);
}).join('')}
${events.length === 0 ? `
${helpers.t('noEvents')}
` : ''}
`;
}).join('')}
${hasAllDayEvents ? `
` : ''}
${hours.map(hour => `
${helpers.formatScheduleHour(hour)}
`).join('')}
${weekDays.map(date => {
const isToday = date.toDateString() === today.toDateString();
const dayEventsForMatching = helpers.getEventsForDay(date, { includeHiddenStyledEvents: true });
const dayEvents = helpers.sortEventsForDate(dayEventsForMatching.filter((event) => !helpers.isEventHiddenByStyle(event)), date);
const dateKey = helpers.getDateKey(date);
const allDayLanes = allDayLayout.dayLanesByDateKey.get(dateKey) || [];
const dayStyle = helpers.getDayStyleAttributes(date, dayEventsForMatching, isToday);
const dayStyleAttr = dayStyle.style ? ` style="${dayStyle.style}"` : '';
return `
${dayNames[date.getDay()]}
${hasAllDayEvents ? helpers.renderAllDayEventsForDay(allDayLanes, allDayHeight) : ''}
${hours.map(hour => `
`).join('')}
${showCurrentTimeBar && isToday ? helpers.renderCurrentTimeLine(startHour, hourHeight) : ''}
${helpers.renderTimedEventsForDay(dayEvents, date, startHour, endHour, hourHeight)}
`;
}).join('')}
`;
}
function renderMonthDayHeaders({ weekdayNames, firstDayOfWeek, shouldShowWeekNumbers }) {
const orderedDays = [
...weekdayNames.slice(firstDayOfWeek),
...weekdayNames.slice(0, firstDayOfWeek)
];
const dayHeaders = orderedDays.map(day => `
`).join('');
if (!shouldShowWeekNumbers) {
return dayHeaders;
}
return `${dayHeaders}`;
}
function renderMonthGridDays({ currentDate, firstDayOfWeek, shouldShowWeekNumbers, helpers }) {
let html = '';
getMonthGridDates(currentDate, firstDayOfWeek).forEach((dayEntry, dayIndex) => {
if (shouldShowWeekNumbers && dayIndex % 7 === 0) {
html += helpers.renderMonthWeekNumberCell(dayEntry.date);
}
html += helpers.renderDay(dayEntry.day, dayEntry.date, dayEntry.isOtherMonth);
});
return html;
}
function renderRollingWeeks({ currentDate, firstDayOfWeek, rollingWeeks, shouldShowWeekNumbers, helpers }) {
let html = '';
getRollingMonthGridDates(currentDate, firstDayOfWeek, rollingWeeks).forEach((dayEntry, dayIndex) => {
if (shouldShowWeekNumbers && dayIndex % 7 === 0) {
html += helpers.renderMonthWeekNumberCell(dayEntry.date);
}
html += helpers.renderDay(dayEntry.day, dayEntry.date, dayEntry.isOtherMonth);
});
return html;
}
function renderMonthDays({ currentDate, config, viewMode, shouldShowWeekNumbers, helpers }) {
// If rolling_weeks is set, show current week + N additional weeks
if (config.rolling_weeks !== null && viewMode === 'month') {
return renderRollingWeeks({
currentDate,
firstDayOfWeek: config.firstDayOfWeek,
rollingWeeks: config.rolling_weeks,
shouldShowWeekNumbers,
helpers
});
}
return renderMonthGridDays({
currentDate,
firstDayOfWeek: config.firstDayOfWeek,
shouldShowWeekNumbers,
helpers
});
}
function renderMonthView({
compactMaxHeight,
config,
currentDate,
isCompactMonth,
monthWeekRows,
shouldShowHeaderBadges,
shouldShowWeekNumbers,
viewMode,
weekdayNames,
helpers
}) {
const monthStyle = isCompactMonth ? helpers.getCompactMonthGridStyle(monthWeekRows, compactMaxHeight) : '';
const monthClass = [
'calendar-grid',
isCompactMonth ? 'compact-month' : '',
shouldShowWeekNumbers ? 'month-week-numbers' : ''
].filter(Boolean).join(' ');
return `
${shouldShowHeaderBadges ? helpers.renderCalendarBadges() : ''}
${renderMonthDayHeaders({
weekdayNames,
firstDayOfWeek: config.firstDayOfWeek,
shouldShowWeekNumbers
})}
${renderMonthDays({
currentDate,
config,
viewMode,
shouldShowWeekNumbers,
helpers
})}
`;
}
function normalizeVirtualCalendars(virtualCalendars, { normalizeSingleColor }) {
if (!Array.isArray(virtualCalendars)) return [];
return virtualCalendars
.map((entry, index) => {
if (!entry || typeof entry !== 'object') return null;
const id = typeof entry.id === 'string' && entry.id.trim()
? entry.id.trim()
: `virtual_${index + 1}`;
const entities = Array.isArray(entry.entities)
? Array.from(new Set(entry.entities
.map((entityId) => typeof entityId === 'string' ? entityId.trim() : '')
.filter(Boolean)))
: [];
if (entities.length === 0) return null;
return {
id,
name: typeof entry.name === 'string' && entry.name.trim() ? entry.name.trim() : id,
icon: typeof entry.icon === 'string' && entry.icon.trim() ? entry.icon.trim() : null,
color: normalizeSingleColor(entry.color),
entities
};
})
.filter(Boolean);
}
function getVirtualBadgeById(virtualCalendars = [], virtualId) {
return (virtualCalendars || []).find((virtualCalendar) => virtualCalendar.id === virtualId) || null;
}
function getVirtualBadgeForEntity(virtualCalendars = [], entityId) {
return (virtualCalendars || []).find((virtualCalendar) => virtualCalendar.entities.includes(entityId)) || null;
}
function getVirtualBadgeForEvent(virtualCalendars = [], event) {
if (!event) return null;
if (event.isCombinedCalendarEvent && Array.isArray(event.sourceEntityIds) && event.sourceEntityIds.length > 0) {
const matchedVirtualCalendars = event.sourceEntityIds
.map((entityId) => getVirtualBadgeForEntity(virtualCalendars, entityId))
.filter(Boolean);
if (matchedVirtualCalendars.length > 0) {
return matchedVirtualCalendars[0];
}
return null;
}
return getVirtualBadgeForEntity(virtualCalendars, event.entityId);
}
function getCalendarColor(entityId, index = 0, { colors = {}, getDefaultColor, normalizeSingleColor }) {
return normalizeSingleColor(
colors?.[entityId] ||
getDefaultColor(index)
);
}
function getCalendarName(entityId, { calendarNames = {}, hassStates = {}, virtualCalendars = [] } = {}) {
if (!entityId) {
return '';
}
if (entityId.startsWith('virtual:')) {
const virtualId = entityId.replace('virtual:', '');
const virtualBadge = getVirtualBadgeById(virtualCalendars, virtualId);
if (virtualBadge?.name) {
return virtualBadge.name;
}
return virtualId;
}
// Check if there's a custom name mapping
if (calendarNames && calendarNames[entityId]) {
return calendarNames[entityId];
}
// Otherwise use friendly_name from entity or entity ID
const entity = hassStates?.[entityId];
const fallbackName = entityId.includes('.') ? entityId.split('.').slice(1).join('.') : entityId;
return entity?.attributes?.friendly_name || fallbackName;
}
function getVirtualBadgeItems({
entities = [],
virtualCalendars = [],
hideBadgeCalendars = [],
hiddenCalendars = new Set(),
getCalendarColor,
getCalendarName,
getCalendarBadgeIcon
}) {
const hiddenBadgeCalendars = new Set(hideBadgeCalendars || []);
const items = [];
const insertedVirtualIds = new Set();
entities.forEach((entityId, originalIndex) => {
const virtualCalendar = getVirtualBadgeForEntity(virtualCalendars, entityId);
if (virtualCalendar && !insertedVirtualIds.has(virtualCalendar.id)) {
const configuredEntities = virtualCalendar.entities.filter((configuredEntityId) => entities.includes(configuredEntityId));
const hasVisibleEntity = configuredEntities.some((configuredEntityId) => !hiddenBadgeCalendars.has(configuredEntityId));
if (hasVisibleEntity) {
const color = virtualCalendar.color || getCalendarColor(entityId, originalIndex);
const isHidden = configuredEntities.every((configuredEntityId) => hiddenCalendars.has(configuredEntityId));
items.push({
id: virtualCalendar.id,
entityId: `virtual:${virtualCalendar.id}`,
name: virtualCalendar.name,
icon: virtualCalendar.icon,
color,
entities: configuredEntities,
isHidden,
type: 'virtual'
});
}
insertedVirtualIds.add(virtualCalendar.id);
return;
}
if (virtualCalendar || hiddenBadgeCalendars.has(entityId)) return;
const color = getCalendarColor(entityId, originalIndex);
items.push({
id: entityId,
entityId,
name: getCalendarName(entityId),
icon: getCalendarBadgeIcon(entityId),
color,
entities: [entityId],
isHidden: hiddenCalendars.has(entityId),
type: 'entity'
});
});
return items;
}
function getWritableCalendars(entities = [], calendarCapabilities = {}) {
return entities.filter(entityId => {
const caps = calendarCapabilities[entityId];
return caps && caps.canCreate && !caps.isReadonly;
});
}
function getCalendarBadgePersonEntityId(badgeEntityId, calendarPersonEntities = {}) {
const mappings = calendarPersonEntities || {};
if (!badgeEntityId) return null;
if (mappings[badgeEntityId]) {
return mappings[badgeEntityId];
}
if (badgeEntityId.startsWith('virtual:')) {
const virtualId = badgeEntityId.replace('virtual:', '');
return mappings[virtualId] || null;
}
return null;
}
console.info(`Daylight Calendar Card ${getDaylightCalendarCardVersion()} loaded from skylight-calendar-card.js`);
// ============================================================================
// TRANSLATION HELPER FUNCTIONS
// ============================================================================
const normalizeLanguage = (language) => {
if (!language) return DEFAULT_LANGUAGE;
return language.toLowerCase().split('-')[0];
};
const resolveLanguage = (language) => {
const normalized = normalizeLanguage(language);
return TRANSLATIONS[normalized] ? normalized : DEFAULT_LANGUAGE;
};
const interpolate = (template, params = {}) =>
template.replace(/\{(\w+)\}/g, (_, key) => (params[key] !== undefined ? params[key] : ''));
const translate = (language, key, params = {}) => {
const resolved = resolveLanguage(language);
const fallbackStrings = TRANSLATIONS[DEFAULT_LANGUAGE]?.strings || {};
const strings = TRANSLATIONS[resolved]?.strings || fallbackStrings;
const fallback = fallbackStrings[key] || key;
return interpolate(strings[key] || fallback, params);
};
const STALE_RESOURCE_BANNER_ID = 'daylight-calendar-card-stale-resource-warning';
let staleResourceWarningHandled = false;
const logStaleResourceWarning = (staleUrl) => {
console.warn(
`Daylight Calendar Card: old Skylight resource detected${staleUrl ? ` (${staleUrl})` : ''}. ` +
'Remove it from Settings → Dashboards → Resources and keep /hacsfiles/daylight-calendar-card/skylight-calendar-card.js. ' +
'The filename may still be skylight-calendar-card.js; the important part is the daylight-calendar-card folder.'
);
};
const isStaleResourceWarningDismissed = () => {
try {
return window.localStorage?.getItem(STALE_RESOURCE_WARNING_STORAGE_KEY) === 'true';
} catch (_error) {
return false;
}
};
const dismissStaleResourceWarning = (banner) => {
try {
window.localStorage?.setItem(STALE_RESOURCE_WARNING_STORAGE_KEY, 'true');
} catch (_error) {
// Ignore storage failures; the banner can still be dismissed for this page view.
}
banner?.remove?.();
};
const showStaleResourceWarningBanner = (staleUrl) => {
if (isStaleResourceWarningDismissed() || document.getElementById?.(STALE_RESOURCE_BANNER_ID)) return;
const banner = document.createElement('div');
banner.id = STALE_RESOURCE_BANNER_ID;
banner.setAttribute('role', 'status');
banner.style.cssText = [
'position: fixed',
'left: 0',
'right: 0',
'bottom: 0',
'z-index: 2147483647',
'box-sizing: border-box',
'width: 100%',
'display: flex',
'align-items: center',
'gap: 12px',
'padding: 12px 16px',
'background: #323232',
'color: #fff',
'box-shadow: 0 3px 8px rgba(0, 0, 0, 0.32)',
'font-family: var(--primary-font-family, Roboto, Arial, sans-serif)',
'font-size: 14px',
'line-height: 1.35',
'pointer-events: auto'
].join(';');
const message = document.createElement('span');
message.textContent = 'Old Skylight Calendar Card resource detected. Remove it from Settings → Dashboards → Resources.';
message.style.cssText = 'min-width: 0; flex: 1 1 auto;';
if (staleUrl) {
message.title = staleUrl;
}
const docsLink = document.createElement('a');
docsLink.href = STALE_RESOURCE_TROUBLESHOOTING_URL;
docsLink.target = '_blank';
docsLink.rel = 'noreferrer';
docsLink.textContent = 'Help';
docsLink.style.cssText = [
'color: #bbdefb',
'font-size: 12px',
'font-weight: 500',
'text-decoration: none',
'white-space: nowrap'
].join(';');
const dismissButton = document.createElement('button');
dismissButton.type = 'button';
dismissButton.textContent = 'Dismiss';
dismissButton.style.cssText = [
'border: 0',
'background: transparent',
'color: #90caf9',
'font: inherit',
'font-weight: 500',
'text-transform: uppercase',
'cursor: pointer',
'padding: 4px',
'white-space: nowrap'
].join(';');
dismissButton.addEventListener('click', () => dismissStaleResourceWarning(banner));
banner.append(message, docsLink, dismissButton);
document.body?.appendChild?.(banner);
};
const checkAndShowStaleResourceWarning = () => {
if (staleResourceWarningHandled) return;
staleResourceWarningHandled = true;
const detection = detectStaleSkylightResource();
if (!detection.detected) return;
logStaleResourceWarning(detection.staleUrl);
showStaleResourceWarningBanner(detection.staleUrl);
};
// ============================================================================
// MAIN CALENDAR CARD CLASS
// ============================================================================
class SkylightCalendarCard extends HTMLElement {
static COMMON_NAMED_COLORS = COMMON_NAMED_COLORS;
static detectStaleSkylightResource = detectStaleSkylightResource;
constructor() {
super();
this._root = this;
this._config = {};
this._events = [];
this._currentDate = new Date();
this._viewMode = DEFAULT_VIEW; // 'month', 'week-compact', 'week-standard', or 'agenda'
this._weekStart = new Date();
this._fetching = false;
this._lastFetch = null;
this._loadedEventRange = null;
this._calendarDataSignatures = {}; // Track per-calendar data for change detection
this._lastUnchangedDataRender = null; // Throttle unchanged-data UI refreshes
this._hiddenCalendars = new Set(); // Track which calendars are hidden
this._calendarCapabilities = {}; // Track calendar capabilities
this._activeLanguage = DEFAULT_LANGUAGE;
this._hasCustomTitle = false;
this._isDarkMode = false;
this._themeMode = DEFAULT_THEME_MODE;
this._systemThemeMediaQuery = null;
this._handleSystemThemeChange = (event) => {
if (this._themeMode !== DEFAULT_THEME_MODE) {
return;
}
this._isDarkMode = !!event.matches;
this.render();
};
this._weekStandardFixedOffsetHeight = null;
this._weekStandardExtraHeaderHeight = 0;
this._weekStandardHeaderHeight = null;
this._weekCompactHeaderHeight = null;
this._weekStandardContainerTopInViewport = null;
this._monthContainerTopInViewport = null;
this._agendaContainerTopInViewport = null;
this._agendaStartDate = null;
this._agendaEndDate = null;
this._agendaVisibleStartDate = null;
this._agendaVisibleEndDate = null;
this._agendaDaysPerScrollLoad = 7;
this._agendaScrollLoadLock = false;
this._agendaSuppressScrollHandling = false;
this._agendaPendingScrollTop = null;
this._swipeStartX = null;
this._swipeStartY = null;
this._swipeTracking = false;
this._swipeStartedOnInteractive = false;
this._activeModalBackHandler = null;
this._combinedEditTargets = null;
this._combinedDeleteTargets = null;
this._pendingHeaderSensorRender = false;
this._weatherForecastController = createWeatherForecastController({
getHass: () => this._hass,
getWeatherEntityId: () => this._config?.header_weather_sensor,
onForecastUpdated: () => {
if (!this.isEventManagementDialogOpen()) {
this.renderPreservingAgendaScroll();
} else {
this._pendingHeaderSensorRender = true;
}
}
});
this._modalVisibilityObserver = null;
this._monthMeasureRaf = null;
this._monthMeasureRenderRaf = null;
this._wrapMeasureRaf1 = null;
this._wrapMeasureRaf2 = null;
this._monthGridResizeObserver = null;
this._headerResizeObserver = null;
this._hostResizeObserver = null;
this._hostResizeRaf = null;
this._pendingHostResizeRender = false;
this._pendingWidthDependentLayoutRefresh = false;
this._observedResizeParent = null;
this._lastObservedHostSize = null;
this._monthCompactMeasurementDirty = true;
this._lastCompactMonthViewportHeight = null;
this._handleViewportResize = () => {
if (this.isEventManagementDialogOpen()) {
return;
}
if (this._config.compact_height && (this._viewMode === 'week-standard' || this._viewMode === 'agenda')) {
this.render();
return;
}
if (this._viewMode === 'month' && this._config.compact_height && !this.shouldShowAllEventsInMonth()) {
this._monthCompactMeasurementDirty = true;
this.scheduleMonthCompactTopMeasurement();
return;
}
this.updateCompactHeaderWrapState();
this.updateCalendarBadgesScrollState();
this.refreshWidthDependentLayoutMeasurements();
};
}
getRootElementById(id) {
return this._root?.querySelector(`#${id}`) || null;
}
shouldShowAllEventsInMonth() {
return !!(this._config?.show_all_events_month || this._config?.show_all_details_month);
}
shouldRenderMonthEventsAsWeekCompact() {
return this._viewMode === 'month' && !!this._config?.show_all_details_month;
}
getDashboardScopeKey() {
const pathnameSegments = (window.location?.pathname || '').split('/').filter(Boolean);
if (pathnameSegments.length > 0) {
return pathnameSegments[0];
}
const hashPath = (window.location?.hash || '').replace(/^#/, '');
const hashSegments = hashPath.split('/').filter(Boolean);
if (hashSegments.length > 0) {
return hashSegments[0];
}
return 'default';
}
getPreferenceStorageKey() {
const dashboardScope = this.getDashboardScopeKey();
const baseKey = this._config.preference_storage_key || (this._config.entities || []).join('|');
if (!baseKey) {
return null;
}
return `skylight-calendar-card:${dashboardScope}:${baseKey}`;
}
normalizeDashboardPath(pathValue) {
return normalizeDashboardPath(pathValue);
}
getConfiguredDashboardPath() {
return this.normalizeDashboardPath(this._config?.header_dashboard_path);
}
shouldShowDashboardNavButton() {
return !!(this._config?.show_dashboard_nav_button && this.getConfiguredDashboardPath());
}
normalizeEnumValue(value, options) {
return normalizeEnumValue(value, options);
}
normalizeDefaultDarkMode(value) {
return normalizeThemeMode(value);
}
normalizeEventTitlePrefixMode(value) {
return normalizeEventTitlePrefixMode(value);
}
normalizePastEventMode(value) {
return normalizePastEventMode(value);
}
normalizeDayBadgeLayoutWeek(value) {
return normalizeDayBadgeLayoutWeek(value);
}
normalizeEntityStringMap(value) {
return normalizeEntityStringMap(value);
}
normalizeBooleanStyleValue(value) {
return normalizeBooleanStyleValue(value);
}
applyThemeMode(mode = this._themeMode) {
this._themeMode = this.normalizeDefaultDarkMode(mode);
if (this._themeMode === 'dark') {
this._isDarkMode = true;
return;
}
if (this._themeMode === 'light') {
this._isDarkMode = false;
return;
}
const mediaQuery = window.matchMedia?.('(prefers-color-scheme: dark)');
this._isDarkMode = !!mediaQuery?.matches;
}
attachSystemThemeListener() {
const mediaQuery = window.matchMedia?.('(prefers-color-scheme: dark)');
if (!mediaQuery || this._systemThemeMediaQuery === mediaQuery) {
return;
}
this.detachSystemThemeListener();
this._systemThemeMediaQuery = mediaQuery;
if (typeof mediaQuery.addEventListener === 'function') {
mediaQuery.addEventListener('change', this._handleSystemThemeChange);
} else if (typeof mediaQuery.addListener === 'function') {
mediaQuery.addListener(this._handleSystemThemeChange);
}
}
detachSystemThemeListener() {
if (!this._systemThemeMediaQuery) {
return;
}
if (typeof this._systemThemeMediaQuery.removeEventListener === 'function') {
this._systemThemeMediaQuery.removeEventListener('change', this._handleSystemThemeChange);
} else if (typeof this._systemThemeMediaQuery.removeListener === 'function') {
this._systemThemeMediaQuery.removeListener(this._handleSystemThemeChange);
}
this._systemThemeMediaQuery = null;
}
getDefaultHiddenCalendarSet() {
const knownEntities = new Set(this._config.entities || []);
return new Set((this._config.default_hidden_calendars || []).filter((entityId) => knownEntities.has(entityId)));
}
normalizeDefaultHiddenCalendars(config = {}) {
return normalizeDefaultHiddenCalendars(config);
}
loadPersistedPreferences() {
const storageKey = this.getPreferenceStorageKey();
if (!storageKey) return false;
try {
const raw = window.localStorage?.getItem(storageKey);
if (!raw) return false;
const parsed = JSON.parse(raw);
if (Array.isArray(parsed.hiddenCalendars)) {
const knownEntities = new Set(this._config.entities || []);
this._hiddenCalendars = new Set(parsed.hiddenCalendars.filter((entityId) => knownEntities.has(entityId)));
return true;
}
} catch (error) {
console.warn('Failed to load persisted calendar preferences:', error);
}
return false;
}
persistPreferences() {
const storageKey = this.getPreferenceStorageKey();
if (!storageKey) return;
try {
const payload = {
hiddenCalendars: Array.from(this._hiddenCalendars)
};
window.localStorage?.setItem(storageKey, JSON.stringify(payload));
} catch (error) {
console.warn('Failed to persist calendar preferences:', error);
}
}
updateCompactHeaderWrapState() {
if (!this._root) return;
if (typeof window.requestAnimationFrame !== 'function') {
this.measureAndApplyHeaderWrapState();
return;
}
if (this._wrapMeasureRaf1 !== null) window.cancelAnimationFrame(this._wrapMeasureRaf1);
if (this._wrapMeasureRaf2 !== null) window.cancelAnimationFrame(this._wrapMeasureRaf2);
this._wrapMeasureRaf1 = window.requestAnimationFrame(() => {
this._wrapMeasureRaf1 = null;
this._wrapMeasureRaf2 = window.requestAnimationFrame(() => {
this._wrapMeasureRaf2 = null;
this.measureAndApplyHeaderWrapState();
});
});
}
shouldMarkWrappedFromChildren(children) {
const visibleChildren = children.filter((child) => child.offsetParent !== null);
if (visibleChildren.length <= 1) return false;
const firstTop = visibleChildren[0].offsetTop;
return visibleChildren.some((child) => Math.abs(child.offsetTop - firstTop) > 1);
}
getElementContentWidth(element) {
if (!element) return 0;
const computed = window.getComputedStyle(element);
const paddingLeft = parseFloat(computed.paddingLeft) || 0;
const paddingRight = parseFloat(computed.paddingRight) || 0;
return Math.max(0, element.clientWidth - paddingLeft - paddingRight);
}
getOuterWidth(element) {
if (!element) return 0;
const rect = element.getBoundingClientRect();
const computed = window.getComputedStyle(element);
const marginLeft = parseFloat(computed.marginLeft) || 0;
const marginRight = parseFloat(computed.marginRight) || 0;
return rect.width + marginLeft + marginRight;
}
measureNaturalGroupWidth(group) {
if (!group) return 0;
const computed = window.getComputedStyle(group);
const children = Array.from(group.children || [])
.filter((child) => child.offsetParent !== null);
if (!children.length) {
return Math.ceil(group.scrollWidth || 0);
}
const childWidths = children.reduce((sum, child) => {
return sum + this.getOuterWidth(child);
}, 0);
const internalGap = parseFloat(computed.columnGap)
|| parseFloat(computed.gap)
|| 0;
return Math.ceil(childWidths + internalGap * Math.max(children.length - 1, 0));
}
shouldMarkHeaderWrappedFromWidth(header, leftGroup, controlsGroup) {
if (!header || !leftGroup || !controlsGroup) return false;
const computedStyle = window.getComputedStyle(header);
const gap = parseFloat(computedStyle.columnGap)
|| parseFloat(computedStyle.gap)
|| 0;
const requiredWidth = this.measureNaturalGroupWidth(leftGroup)
+ this.measureNaturalGroupWidth(controlsGroup)
+ gap;
const availableWidth = this.getElementContentWidth(header);
const tolerance = 2;
return requiredWidth > (availableWidth + tolerance);
}
getUnwrappedHeaderMeasurementElements(header) {
if (!header || typeof header.cloneNode !== 'function') return null;
const parent = header.parentNode || this._root;
if (typeof parent?.appendChild !== 'function') return null;
const clone = header.cloneNode(true);
if (!clone) return null;
clone.classList?.remove?.('is-wrapped');
clone.querySelector?.('.header-controls')?.classList?.remove?.('is-wrapped');
clone.querySelector?.('.compact-header-controls')?.classList?.remove?.('is-wrapped');
clone.querySelector?.('.calendar-badges-inline')?.classList?.remove?.('is-wrapped');
if (clone.style) {
const width = header.getBoundingClientRect?.().width || header.clientWidth || 0;
clone.style.position = 'absolute';
clone.style.visibility = 'hidden';
clone.style.pointerEvents = 'none';
clone.style.left = '-10000px';
clone.style.top = '0';
clone.style.height = 'auto';
clone.style.maxHeight = 'none';
clone.style.overflow = 'visible';
if (width > 0) clone.style.width = `${width}px`;
}
parent.appendChild(clone);
return {
clone,
leftGroup: this._config.compact_header
? clone.querySelector?.('.compact-header-left')
: clone.querySelector?.('.header-left'),
controlsGroup: this._config.compact_header
? clone.querySelector?.('.compact-header-controls')
: clone.querySelector?.('.header-controls')
};
}
shouldMarkGroupWrappedFromWidth(group) {
if (!group) return false;
const requiredWidth = this.measureNaturalGroupWidth(group);
const availableWidth = this.getElementContentWidth(group);
const tolerance = 2;
return requiredWidth > (availableWidth + tolerance);
}
setClassStateIfChanged(element, className, shouldHaveClass) {
if (!element?.classList) return;
if (element.classList.contains(className) === shouldHaveClass) return;
element.classList.toggle(className, shouldHaveClass);
}
measureAndApplyHeaderWrapState() {
if (!this._root) return;
const headerSelector = this._config.compact_header ? '.header-compact' : '.header';
const controlsSelector = this._config.compact_header ? '.compact-header-controls' : '.header-controls';
const header = this._root.querySelector(headerSelector);
const controls = this._root.querySelector(controlsSelector);
const badges = this._root.querySelector('.calendar-badges-inline');
if (header) {
const liveLeftGroup = this._config.compact_header
? header.querySelector('.compact-header-left')
: header.querySelector('.header-left');
const liveControlsGroup = this._config.compact_header
? header.querySelector('.compact-header-controls')
: header.querySelector('.header-controls');
const probe = this.getUnwrappedHeaderMeasurementElements(header);
let shouldWrapHeader = false;
let shouldWrapControls = false;
try {
const leftGroup = probe?.leftGroup || liveLeftGroup;
const controlsGroup = probe?.controlsGroup || liveControlsGroup;
shouldWrapHeader = this.shouldMarkHeaderWrappedFromWidth(header, leftGroup, controlsGroup);
shouldWrapControls = controls ? this.shouldMarkGroupWrappedFromWidth(probe?.controlsGroup || controls) : false;
} finally {
probe?.clone?.remove?.();
}
this.setClassStateIfChanged(header, 'is-wrapped', shouldWrapHeader);
if (controls) {
this.setClassStateIfChanged(controls, 'is-wrapped', shouldWrapControls);
}
} else if (controls) {
const shouldWrapControls = this.shouldMarkGroupWrappedFromWidth(controls);
this.setClassStateIfChanged(controls, 'is-wrapped', shouldWrapControls);
}
if (this._config.compact_header && badges) {
const shouldWrapBadges = this.shouldMarkWrappedFromChildren(Array.from(badges.children));
this.setClassStateIfChanged(badges, 'is-wrapped', shouldWrapBadges);
}
}
updateCalendarBadgesScrollState() {
if (!this._root || this._config.compact_header) return;
const badgesContainer = this._root.querySelector('.calendar-badges-container');
const badges = this._root.querySelector('.calendar-badges');
if (!badgesContainer || !badges) return;
const maxScrollLeft = badges.scrollWidth - badges.clientWidth;
const hasOverflow = maxScrollLeft > 1;
const showLeftIndicator = hasOverflow && badges.scrollLeft > 1;
const showRightIndicator = hasOverflow && badges.scrollLeft < (maxScrollLeft - 1);
badgesContainer.classList.toggle('has-overflow', hasOverflow);
badgesContainer.classList.toggle('show-left-indicator', showLeftIndicator);
badgesContainer.classList.toggle('show-right-indicator', showRightIndicator);
}
isEventManagementDialogOpen() {
const modal = this.getRootElementById('event-modal');
return !!modal && modal.classList.contains('show');
}
getConfigNormalizationSchema() {
return createConfigNormalizationSchema({
hasCustomTitle: this._hasCustomTitle,
normalizeDashboardPath: this.normalizeDashboardPath.bind(this),
normalizeCombineStyle: this.normalizeCombineStyle.bind(this),
normalizeCombineBackground: this.normalizeCombineBackground.bind(this),
normalizeEventColorMode: this.normalizeEventColorMode.bind(this),
normalizeSingleColor: this.normalizeSingleColor.bind(this),
normalizeBackgroundOpacity: this.normalizeBackgroundOpacity.bind(this),
normalizeEventModalSize: this.normalizeEventModalSize.bind(this),
normalizeVirtualCalendars: this.normalizeVirtualCalendars.bind(this),
normalizeDefaultDarkMode: this.normalizeDefaultDarkMode.bind(this),
getDefaultTitle: (language) => translate(language, 'defaultTitle')
});
}
getConfigNormalizationContext(rawConfig, language) {
const normalizedDefaultView = rawConfig.default_view === 'week'
? 'week-compact'
: rawConfig.default_view === 'schedule'
? 'week-standard'
: rawConfig.default_view;
const hasConfiguredHeaderBackgroundOpacity = rawConfig.header_background_opacity !== undefined && rawConfig.header_background_opacity !== null && rawConfig.header_background_opacity !== '';
const normalizedHeaderBackgroundOpacity = hasConfiguredHeaderBackgroundOpacity
? this.normalizeBackgroundOpacity(rawConfig.header_background_opacity, 0)
: (rawConfig.header_background_transparent ? 100 : 0);
const hasConfiguredBackgroundOpacity = rawConfig.background_opacity !== undefined && rawConfig.background_opacity !== null && rawConfig.background_opacity !== '';
const normalizedBackgroundOpacity = hasConfiguredBackgroundOpacity
? this.normalizeBackgroundOpacity(rawConfig.background_opacity, 0)
: (rawConfig.background_transparent ? 100 : 0);
const configuredWeekStartHour = Number(rawConfig.week_start_hour);
const normalizedWeekStartHour = Number.isFinite(configuredWeekStartHour)
? Math.min(23, Math.max(0, configuredWeekStartHour))
: 0;
const configuredWeekEndHour = Number(rawConfig.week_end_hour);
const normalizedWeekEndHour = Number.isFinite(configuredWeekEndHour)
? Math.min(23, Math.max(0, configuredWeekEndHour))
: 23;
const rawCombineWidth = Number(rawConfig.combine_calendars_width);
const rawEventBarWidth = Number(rawConfig.event_color_bar_width);
const hasCombineWidth = Number.isFinite(rawCombineWidth) && rawCombineWidth > 0;
const hasEventBarWidth = Number.isFinite(rawEventBarWidth) && rawEventBarWidth > 0;
const normalizedCombineWidth = hasCombineWidth
? rawCombineWidth
: (hasEventBarWidth ? rawEventBarWidth : DEFAULT_EVENT_COLOR_BAR_WIDTH);
return {
normalizedDefaultView,
normalizedCalendarColors: this.normalizeColorMap(rawConfig.colors || {}),
normalizedEventFontColors: this.normalizeColorMap(rawConfig.event_font_colors || {}),
normalizedEventStyles: this.normalizeEventStyles(rawConfig.event_styles || []),
normalizedDayStyles: this.normalizeDayStyles(
this.buildDayStyleRules(rawConfig),
resolveLanguage(rawConfig.locale || rawConfig.language || this._hass?.locale?.language || this._hass?.language)
),
normalizedDayBadges: this.normalizeDayBadges(rawConfig.day_badges || []),
normalizedDayBadgeLayoutWeek: this.normalizeDayBadgeLayoutWeek(rawConfig.day_badge_layout_week),
normalizedHeaderColor: this.normalizeSingleColor(rawConfig.header_color),
normalizedHeaderTextColor: this.normalizeSingleColor(rawConfig.header_text_color),
normalizedHeaderBackgroundOpacity,
normalizedBackgroundOpacity,
normalizedWeekStartHour,
normalizedWeekEndHour,
normalizedEventTitlePrefix: this.normalizeEventTitlePrefixMode(rawConfig.event_title_prefix),
normalizedTimeZone: this.normalizeTimeZone(rawConfig.time_zone),
normalizedPastEventMode: rawConfig.past_event_mode !== undefined && rawConfig.past_event_mode !== null && rawConfig.past_event_mode !== ''
? this.normalizePastEventMode(rawConfig.past_event_mode)
: (rawConfig.hide_the_past ? 'hide' : 'none'),
normalizedCombineWidth,
normalizedEventBarWidth: hasEventBarWidth ? rawEventBarWidth : normalizedCombineWidth,
normalizedCalendarPersonEntities: this.normalizeEntityStringMap(rawConfig.calendar_person_entities || {}),
normalizedDefaultHiddenCalendars: this.normalizeDefaultHiddenCalendars(rawConfig),
normalizedHeaderTimeSensor: typeof rawConfig.header_time_sensor === 'string' && rawConfig.header_time_sensor.trim()
? rawConfig.header_time_sensor.trim()
: null,
normalizedHeaderWeatherSensor: typeof rawConfig.header_weather_sensor === 'string' && rawConfig.header_weather_sensor.trim()
? rawConfig.header_weather_sensor.trim()
: null,
language
};
}
normalizeConfig(rawConfig, language = resolveLanguage(rawConfig.language || this._hass?.language || this._hass?.locale?.language)) {
const derived = this.getConfigNormalizationContext(rawConfig, language);
const schemaContext = { rawConfig, language, derived };
const schema = this.getConfigNormalizationSchema();
const defaults = schema.reduce((acc, field) => {
acc[field.key] = field.defaultValue(schemaContext);
return acc;
}, {});
const normalizedOverrides = schema.reduce((acc, field) => {
if (field.normalize) {
acc[field.key] = field.normalize(schemaContext);
}
return acc;
}, {});
const normalizedConfig = {
...defaults,
...rawConfig,
...normalizedOverrides
};
if (!Object.prototype.hasOwnProperty.call(rawConfig, 'use_24hr_schedule')) {
delete normalizedConfig.use_24hr_schedule; // Preserve locale-based hour cycle defaults when unset
}
return normalizedConfig;
}
setConfig(config) {
const previousHeaderWeatherSensor = this._config?.header_weather_sensor || null;
if (!config.entities || !Array.isArray(config.entities)) {
throw new Error('You need to define calendar entities');
}
const language = resolveLanguage(config.language || this._hass?.language || this._hass?.locale?.language);
this._hasCustomTitle = config.title !== undefined && config.title !== null;
this._config = this.normalizeConfig(config, language);
this._viewMode = this._config.default_view;
this.applyThemeMode(this._config.color_scheme);
this._hiddenCalendars = this.getDefaultHiddenCalendarSet();
this.loadPersistedPreferences();
this._loadedEventRange = null;
this._calendarDataSignatures = {};
this._lastUnchangedDataRender = null;
this._weatherForecastController.handleConfigChanged(previousHeaderWeatherSensor, this._config.header_weather_sensor);
this.ensureWeatherForecastSubscription();
this.setWeekStart();
this.resetAgendaWindowToToday();
this.render();
this._activeLanguage = language;
}
set hass(hass) {
const oldHass = this._hass;
this._hass = hass;
let shouldRender = false;
// Check calendar capabilities when hass is set
if (!oldHass || this._hass !== oldHass) {
this.checkAllCalendarCapabilities();
}
if (this._themeMode === DEFAULT_THEME_MODE) {
const hassDarkMode = this._hass?.themes?.darkMode;
if (typeof hassDarkMode === 'boolean' && this._isDarkMode !== hassDarkMode) {
this._isDarkMode = hassDarkMode;
shouldRender = true;
}
}
const resolvedLanguage = this.getLanguage();
if (resolvedLanguage !== this._activeLanguage) {
this._activeLanguage = resolvedLanguage;
if (!this._hasCustomTitle) {
this._config.title = translate(this._activeLanguage, 'defaultTitle');
}
shouldRender = true;
}
const configuredHeaderTimeSensor = this._config?.header_time_sensor;
const configuredHeaderWeatherSensor = this._config?.header_weather_sensor;
const previousHeaderTimeSensorState = configuredHeaderTimeSensor
? this.getHeaderEntityRenderSignature(oldHass?.states?.[configuredHeaderTimeSensor])
: null;
const nextHeaderTimeSensorState = configuredHeaderTimeSensor
? this.getHeaderEntityRenderSignature(hass?.states?.[configuredHeaderTimeSensor])
: null;
const previousHeaderWeatherSensorState = configuredHeaderWeatherSensor
? this.getHeaderEntityRenderSignature(oldHass?.states?.[configuredHeaderWeatherSensor])
: null;
const nextHeaderWeatherSensorState = configuredHeaderWeatherSensor
? this.getHeaderEntityRenderSignature(hass?.states?.[configuredHeaderWeatherSensor])
: null;
const headerSensorChanged = previousHeaderTimeSensorState !== nextHeaderTimeSensorState ||
previousHeaderWeatherSensorState !== nextHeaderWeatherSensorState;
const badgePersonStateChanged = this.getCalendarBadgePersonRenderSignature(oldHass) !==
this.getCalendarBadgePersonRenderSignature(hass);
if (headerSensorChanged || badgePersonStateChanged) {
if (this.isEventManagementDialogOpen()) {
this._pendingHeaderSensorRender = true;
} else {
shouldRender = true;
this._pendingHeaderSensorRender = false;
}
}
this.ensureWeatherForecastSubscription();
this.refreshWeatherForecastData();
if (shouldRender) {
this.renderPreservingAgendaScroll();
}
// Refresh only when stale or when current view needs dates outside loaded range.
if (!oldHass) {
this.ensureEventsForCurrentRange({ force: true });
} else {
this.ensureEventsForCurrentRange();
}
}
async checkAllCalendarCapabilities() {
if (!this._hass) return;
for (const entityId of this._config.entities) {
const entity = this._hass.states[entityId];
if (entity) {
const features = entity.attributes?.supported_features || 0;
// Check if this is a Google Calendar (which doesn't support UPDATE/DELETE services)
const isGoogleCalendar = entityId.includes('google') ||
entity.attributes?.integration === 'google';
this._calendarCapabilities[entityId] = {
canCreate: true, // Most calendars support creation
canUpdate: (features & 2) !== 0, // UPDATE_EVENT = 2
canDelete: (features & 4) !== 0, // DELETE_EVENT = 4
isReadonly: this._config.readonly_calendars.includes(entityId),
isGoogleCalendar: isGoogleCalendar // Track Google Calendar separately
};
}
}
}
normalizeColorMap(colorMap) {
return normalizeColorMap(colorMap, {
normalizeColor: this.normalizeSingleColor.bind(this)
});
}
normalizeSingleColor(colorValue) {
return normalizeSingleColor(colorValue);
}
colorToHex(color) {
return colorToHex(color, {
normalizeColor: this.normalizeSingleColor.bind(this)
});
}
colorToRgb(color) {
return parseColorToRgb(color, {
normalizeColor: this.normalizeSingleColor.bind(this),
resolveComputedCssColorToRgb: this.resolveComputedCssColorToRgb.bind(this)
});
}
colorWithAlpha(color, alpha = 1) {
return colorWithAlpha(color, alpha, {
colorToRgb: this.colorToRgb.bind(this)
});
}
blendRgb(top, bottom, topAlpha = 1) {
return blendRgb(top, bottom, topAlpha);
}
resolveComputedCssColorToRgb(color) {
if (typeof color !== 'string' || typeof window === 'undefined' || typeof document === 'undefined') {
return null;
}
const probe = document.createElement('span');
probe.style.color = color;
probe.style.position = 'absolute';
probe.style.pointerEvents = 'none';
probe.style.opacity = '0';
const parent = this.isConnected ? this : document.body;
if (!parent) return null;
parent.appendChild(probe);
const computed = window.getComputedStyle(probe).color;
probe.remove();
const match = computed.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)/i);
if (!match) return null;
return {
r: Number(match[1]),
g: Number(match[2]),
b: Number(match[3])
};
}
normalizeCombineStyle(styleValue) {
return normalizeCombineStyle(styleValue);
}
normalizeEventColorMode(modeValue) {
return normalizeEventColorMode(modeValue);
}
normalizeCombineBackground(backgroundValue) {
return normalizeCombineBackground(backgroundValue, {
colorToHex: this.colorToHex.bind(this)
});
}
getEmptyAdvancedMatch() {
return getEmptyAdvancedMatch();
}
normalizeEventMatchConditions(rawMatch) {
return normalizeEventMatchConditions(rawMatch);
}
normalizeDayMatchConditions(rawMatch, localeOverride = null) {
return normalizeDayMatchConditions(rawMatch, {
normalizeDayOfWeekRule: this.normalizeDayOfWeekRule.bind(this),
localeOverride
});
}
normalizeAdvancedRuleMatch(rawMatch, defaultScope = 'event', localeOverride = null) {
return normalizeAdvancedRuleMatch(rawMatch, {
defaultScope,
localeOverride,
normalizeDayOfWeekRule: this.normalizeDayOfWeekRule.bind(this)
});
}
normalizeEventStyles(rawRules) {
if (!Array.isArray(rawRules)) return [];
return rawRules
.map((rule, index) => {
if (!rule || typeof rule !== 'object') return null;
const rawMatch = rule.match && typeof rule.match === 'object' ? rule.match : (rule.when && typeof rule.when === 'object' ? rule.when : null);
const match = this.normalizeAdvancedRuleMatch(rawMatch, 'event');
let style = null;
if (typeof rule.style === 'string' && rule.style.trim().toLowerCase() === 'hide') {
style = { hide: true };
} else if (rule.style && typeof rule.style === 'object') {
style = rule.style;
}
if (!match || !style) return null;
const numericPriority = Number(rule.priority);
const priority = Number.isFinite(numericPriority) ? numericPriority : 0;
const normalizedStyle = this.normalizeEventStyleBlock(style);
if (!Object.keys(normalizedStyle).length) return null;
return {
id: typeof rule.id === 'string' && rule.id.trim() ? rule.id.trim() : `event-style-${index + 1}`,
type: 'event_style',
priority,
index,
match,
output: { style: normalizedStyle },
style: normalizedStyle
};
})
.filter(Boolean);
}
normalizeLegacyDayStyleMatch(rule, localeOverride = null) {
return normalizeLegacyDayStyleMatch(rule, {
localeOverride,
normalizeDayOfWeekRule: this.normalizeDayOfWeekRule.bind(this),
normalizeAdvancedRuleMatch: this.normalizeAdvancedRuleMatch.bind(this)
});
}
normalizeDayStyles(rawRules, localeOverride = null) {
if (!Array.isArray(rawRules)) return [];
return rawRules
.map((rule, index) => {
if (!rule || typeof rule !== 'object') return null;
const rawExplicitMatch = rule.match && typeof rule.match === 'object' ? rule.match : (rule.when && typeof rule.when === 'object' ? rule.when : null);
const match = rawExplicitMatch
? this.normalizeAdvancedRuleMatch(rawExplicitMatch, 'day', localeOverride)
: this.normalizeLegacyDayStyleMatch(rule, localeOverride);
if (!match) return null;
const numericPriority = Number(rule.priority);
const priority = Number.isFinite(numericPriority) ? numericPriority : 0;
const style = this.normalizeDayStyleBlock(rule.style && typeof rule.style === 'object' ? rule.style : rule);
if (
style.background === undefined &&
style.opacity === undefined &&
style.background_opacity === undefined &&
style.border_color === undefined &&
style.border_width === undefined
) return null;
const normalized = {
id: typeof rule.id === 'string' && rule.id.trim() ? rule.id.trim() : `day-style-${index + 1}`,
type: 'day_style',
priority,
index,
match,
output: { style },
style
};
// Backward-compatible mirrors used by older internal tests and helper paths.
if (style.background !== undefined) normalized.background = style.background;
if (style.opacity !== undefined) normalized.opacity = style.opacity;
if (style.background_opacity !== undefined) normalized.background_opacity = style.background_opacity;
if (style.border_color !== undefined) normalized.border_color = style.border_color;
if (style.border_width !== undefined) normalized.border_width = style.border_width;
const day = match.day || {};
if (day.today !== undefined) normalized.condition = 'today';
else if (day.past !== undefined) normalized.condition = 'past';
else if (day.future !== undefined) normalized.condition = 'future';
else if (day.weekend !== undefined) normalized.condition = 'weekend';
else if (day.weekday !== undefined) normalized.condition = 'weekday';
else if (day.day_of_week !== undefined) {
normalized.condition = 'day_of_week';
normalized.day_of_week = day.day_of_week;
} else if (day.has_event !== undefined) normalized.condition = 'has_event';
else if (day.no_event !== undefined) {
normalized.condition = 'has_event';
normalized.negate = true;
}
return normalized;
})
.filter(Boolean);
}
buildDayStyleRules(rawConfig = {}) {
const rules = Array.isArray(rawConfig.day_styles) ? [...rawConfig.day_styles] : [];
const todayStyle = this.buildTodayDayStyleRule(rawConfig);
if (todayStyle) rules.push(todayStyle);
return rules;
}
buildTodayDayStyleRule(rawConfig = {}) {
const hasTodayBackgroundColor = rawConfig.today_background_color !== undefined && rawConfig.today_background_color !== null && rawConfig.today_background_color !== '';
const hasTodayStyle = rawConfig.today_style && typeof rawConfig.today_style === 'object' && !Array.isArray(rawConfig.today_style);
if (!hasTodayBackgroundColor && !hasTodayStyle) return null;
const style = {
...(hasTodayBackgroundColor ? { background_color: rawConfig.today_background_color } : {}),
...(hasTodayStyle ? rawConfig.today_style : {})
};
return {
condition: 'today',
priority: 0,
style
};
}
normalizeDayStyleBlock(style = {}) {
const normalized = {};
const backgroundValue = style.background !== undefined ? style.background : (style.background_color !== undefined ? style.background_color : style.color);
const normalizedBackground = String(backgroundValue || '').trim().toLowerCase() === 'auto'
? 'auto'
: this.normalizeSingleColor(backgroundValue);
if (normalizedBackground) normalized.background = normalizedBackground;
const numericOpacity = Number(style.opacity);
if (Number.isFinite(numericOpacity)) {
normalized.opacity = Math.max(0, Math.min(1, numericOpacity));
}
const numericBackgroundOpacity = Number(style.background_opacity);
if (Number.isFinite(numericBackgroundOpacity)) {
normalized.background_opacity = Math.max(0, Math.min(1, numericBackgroundOpacity));
}
const normalizedBorderColor = this.normalizeSingleColor(style.border_color);
if (normalizedBorderColor) normalized.border_color = normalizedBorderColor;
const normalizedBorderWidth = this.normalizeStyleBorderWidth(style.border_width);
if (normalizedBorderWidth) normalized.border_width = normalizedBorderWidth;
return normalized;
}
normalizeDayBadgeBlock(rule = {}) {
return normalizeDayBadgeBlock(rule, {
normalizeEventTextValue: this.normalizeEventTextValue.bind(this),
normalizeDayBadgeDisplayColor: this.normalizeDayBadgeDisplayColor.bind(this),
normalizeStyleSizeValue: this.normalizeStyleSizeValue.bind(this)
});
}
isFullValueTemplate(value) {
return isFullValueTemplate(value);
}
normalizeDayBadgeDisplayColor(value) {
return normalizeDayBadgeDisplayColor(value, {
normalizeSingleColor: this.normalizeSingleColor.bind(this)
});
}
normalizeResolvedDayBadgeDisplayColor(value) {
return normalizeResolvedDayBadgeDisplayColor(value, {
normalizeSingleColor: this.normalizeSingleColor.bind(this)
});
}
parseEventDescriptionJson(event) {
return parseEventDescriptionJson(event);
}
buildDayBadgeResolutionContext(date, matchedEvent) {
return buildDayBadgeResolutionContext(date, matchedEvent, {
formatLocalDate: this.formatLocalDate.bind(this)
});
}
resolveSafePath(path, context) {
return resolveSafePath(path, context);
}
resolveDayBadgeDisplayValue(value, context) {
return resolveDayBadgeDisplayValue(value, context);
}
resolveDayBadgeForRender(rule, date, matchedEvent) {
return resolveDayBadgeForRender(rule, date, matchedEvent, {
formatLocalDate: this.formatLocalDate.bind(this),
normalizeResolvedDayBadgeDisplayColor: this.normalizeResolvedDayBadgeDisplayColor.bind(this)
});
}
normalizeDayBadgeConditions(rawConditions) {
return normalizeDayBadgeConditions(rawConditions, {
normalizeEventMatchConditions: this.normalizeEventMatchConditions.bind(this)
});
}
normalizeDayBadges(rawRules) {
return normalizeDayBadges(rawRules, {
normalizeAdvancedRuleMatch: this.normalizeAdvancedRuleMatch.bind(this),
normalizeDayBadgeBlock: this.normalizeDayBadgeBlock.bind(this)
});
}
normalizeCssLength(value, { allowZero = false } = {}) {
if (value === undefined || value === null || value === '') return null;
if (typeof value === 'number' && Number.isFinite(value)) {
if (allowZero) return `${Math.max(0, value)}px`;
return value > 0 ? `${value}px` : null;
}
const trimmed = String(value).trim();
if (!trimmed) return null;
if (/^\d*\.?\d+(px|rem|em|%)$/i.test(trimmed)) {
return trimmed;
}
const parsed = Number(trimmed);
if (Number.isFinite(parsed) && (allowZero ? parsed >= 0 : parsed > 0)) {
return `${parsed}px`;
}
return null;
}
normalizeStyleSizeValue(value) {
return this.normalizeCssLength(value, { allowZero: false });
}
normalizeStyleBorderWidth(value) {
return this.normalizeCssLength(value, { allowZero: true });
}
normalizeDayOfWeekRule(value, localeOverride = null) {
const dayMap = new Map([
['sun', 0], ['sunday', 0], ['0', 0],
['mon', 1], ['monday', 1], ['1', 1],
['tue', 2], ['tues', 2], ['tuesday', 2], ['2', 2],
['wed', 3], ['weds', 3], ['wednesday', 3], ['3', 3],
['thu', 4], ['thur', 4], ['thurs', 4], ['thursday', 4], ['4', 4],
['fri', 5], ['friday', 5], ['5', 5],
['sat', 6], ['saturday', 6], ['6', 6]
]);
this.getLocalizedWeekdayMap(localeOverride).forEach((dayIndexes, token) => {
if (!dayMap.has(token)) {
dayMap.set(token, dayIndexes.length === 1 ? dayIndexes[0] : dayIndexes);
}
});
const values = Array.isArray(value) ? value : [value];
const normalizedDays = [];
values.forEach((entry) => {
if (entry === undefined || entry === null || entry === '') return;
if (typeof entry === 'number' && Number.isInteger(entry) && entry >= 0 && entry <= 6) {
normalizedDays.push(entry);
return;
}
const normalizedEntry = String(entry).trim().toLowerCase();
if (!normalizedEntry) return;
if (dayMap.has(normalizedEntry)) {
const mappedValue = dayMap.get(normalizedEntry);
if (Array.isArray(mappedValue)) {
normalizedDays.push(...mappedValue);
} else {
normalizedDays.push(mappedValue);
}
}
});
return Array.from(new Set(normalizedDays));
}
getLocalizedWeekdayMap(localeOverride = null) {
const locale = resolveLanguage(localeOverride || this.getLocale());
const cacheKey = locale || 'default';
if (!this._localizedWeekdayMapCache) this._localizedWeekdayMapCache = new Map();
if (this._localizedWeekdayMapCache.has(cacheKey)) return this._localizedWeekdayMapCache.get(cacheKey);
const map = new Map();
const formats = ['long', 'short', 'narrow'];
const anchorSunday = new Date(Date.UTC(2024, 0, 7)); // Sunday
formats.forEach((weekdayFormat) => {
for (let dayIndex = 0; dayIndex < 7; dayIndex += 1) {
const date = new Date(anchorSunday);
date.setUTCDate(anchorSunday.getUTCDate() + dayIndex);
const localizedName = new Intl.DateTimeFormat(locale, { weekday: weekdayFormat, timeZone: 'UTC' }).format(date);
const normalizedName = String(localizedName || '').trim().toLowerCase();
if (!normalizedName) continue;
if (!map.has(normalizedName)) {
map.set(normalizedName, [dayIndex]);
continue;
}
const existingDayIndexes = map.get(normalizedName);
if (!existingDayIndexes.includes(dayIndex)) existingDayIndexes.push(dayIndex);
}
});
this._localizedWeekdayMapCache.set(cacheKey, map);
return map;
}
normalizeEventStyleBlock(style = {}) {
const normalized = {};
const setIfDefined = (key, value) => {
if (value !== undefined && value !== null && value !== '') {
normalized[key] = value;
}
};
const normalizedBackground = this.normalizeSingleColor(style.background_color ?? style.color);
if (normalizedBackground) normalized.background_color = normalizedBackground;
const normalizedFontColor = this.normalizeSingleColor(style.event_font_color ?? style.font_color);
if (normalizedFontColor) normalized.event_font_color = normalizedFontColor;
const normalizedOpacity = this.normalizeEventStyleOpacity(style.opacity);
if (normalizedOpacity !== null) normalized.opacity = normalizedOpacity;
const normalizedFilter = this.normalizeEventStyleFilter(style.filter);
if (normalizedFilter !== null) normalized.filter = normalizedFilter;
setIfDefined('event_font_size', style.event_font_size);
setIfDefined('event_time_font_size', style.event_time_font_size);
setIfDefined('event_location_font_size', style.event_location_font_size);
const icon = this.normalizeEventIconName(style.icon);
if (icon) normalized.icon = icon;
const iconColor = this.normalizeEventIconColor(style.icon_color);
if (iconColor) normalized.icon_color = iconColor;
const iconSize = this.normalizeStyleSizeValue(style.icon_size);
if (iconSize) normalized.icon_size = iconSize;
const iconPosition = this.normalizeEventIconPosition(style.icon_position);
if (iconPosition) normalized.icon_position = iconPosition;
const showEventLocation = this.normalizeBooleanStyleValue(style.show_event_location);
if (showEventLocation !== null) normalized.show_event_location = showEventLocation;
const useShortLocation = this.normalizeBooleanStyleValue(style.use_short_location);
if (useShortLocation !== null) normalized.use_short_location = useShortLocation;
const hideTime = this.normalizeBooleanStyleValue(style.hide_time);
if (hideTime !== null) normalized.hide_time = hideTime;
const showTime = this.normalizeBooleanStyleValue(style.show_time);
if (showTime !== null) normalized.show_time = showTime;
const hideCalendarBubble = this.normalizeBooleanStyleValue(style.hide_event_calendar_bubble);
if (hideCalendarBubble !== null) normalized.hide_event_calendar_bubble = hideCalendarBubble;
const hideEvent = this.normalizeBooleanStyleValue(style.hide);
if (hideEvent !== null) normalized.hide = hideEvent;
if (style.event_title_prefix !== undefined) normalized.event_title_prefix = this.normalizeEventTitlePrefixMode(style.event_title_prefix);
return normalized;
}
normalizeEventIconName(iconValue) {
const normalized = this.normalizeEventTextValue(iconValue);
if (!normalized) return null;
if (!/^mdi:[a-z0-9]+(?:-[a-z0-9]+)*$/.test(normalized)) return null;
return normalized;
}
normalizeEventIconColor(colorValue) {
if (colorValue === undefined || colorValue === null) return null;
const normalized = this.normalizeSingleColor(colorValue);
const trimmed = String(normalized || '').trim();
if (!trimmed) return null;
if (/[;{}<>\"']/.test(trimmed)) return null;
return trimmed;
}
normalizeEventIconPosition(positionValue) {
const normalized = String(positionValue || '').trim().toLowerCase();
if (!normalized) return null;
if (normalized === 'before_title' || normalized === 'corner') return normalized;
return null;
}
normalizeEventStyleOpacity(opacityValue) {
if (opacityValue === undefined || opacityValue === null || opacityValue === '') return null;
const numericOpacity = Number(opacityValue);
if (!Number.isFinite(numericOpacity)) return null;
return Math.max(0, Math.min(1, numericOpacity));
}
normalizeEventStyleFilter(filterValue) {
if (filterValue === undefined || filterValue === null) return null;
const normalized = String(filterValue).trim();
if (!normalized) return null;
if (/[;{}<>\"']/.test(normalized)) return null;
return normalized;
}
getRuleMatcherHelpers() {
return {
getEventCalendarMatchTokens: this.getEventCalendarMatchTokens.bind(this),
getEventDateTimeInfo: this.getEventDateTimeInfo.bind(this),
isPastEvent: this.isPastEvent.bind(this),
normalizeEventTextValue: this.normalizeEventTextValue.bind(this)
};
}
eventMatchesRule(event, match) {
const normalizedMatch = this.normalizeEventMatchConditions(match);
return this.eventMatchesNormalizedRule(event, normalizedMatch);
}
eventMatchesNormalizedRule(event, match) {
return eventMatchesNormalizedRule(event, match, this.getRuleMatcherHelpers());
}
getEventCalendarMatchTokens(event) {
const tokens = [];
const entityIds = new Set();
if (event?.entityId) entityIds.add(event.entityId);
if (Array.isArray(event?.sourceEntityIds)) {
event.sourceEntityIds.forEach((entityId) => entityId && entityIds.add(entityId));
} else if (Array.isArray(event?.sourceCalendars)) {
event.sourceCalendars.forEach((calendar) => calendar?.entityId && entityIds.add(calendar.entityId));
}
entityIds.forEach((entityId) => {
tokens.push(entityId);
tokens.push(this.getCalendarName(entityId));
const virtualCalendar = this.getVirtualBadgeForEntity(entityId);
if (virtualCalendar) {
tokens.push(`virtual:${virtualCalendar.id}`);
tokens.push(virtualCalendar.id);
tokens.push(virtualCalendar.name);
}
});
return Array.from(new Set(tokens.filter(Boolean)));
}
eventFieldMatches(event, field, condition) {
return eventFieldMatches(event, field, condition, this.getRuleMatcherHelpers());
}
matchPrimitiveCondition(value, condition) {
return matchPrimitiveCondition(value, condition);
}
parseRegexCondition(value) {
return parseRegexCondition(value);
}
matchTextCondition(value, condition) {
return matchTextCondition(value, condition, this.getRuleMatcherHelpers());
}
findMatchingEventForCondition(condition, dayEvents = []) {
return findMatchingEventForCondition(condition, dayEvents, this.getRuleMatcherHelpers());
}
dateMatchesDayCondition(date, conditionName, conditionValue, context = {}) {
return dateMatchesDayCondition(date, conditionName, conditionValue, context);
}
dayMatchesNormalizedRule(dayMatch, context = {}) {
return dayMatchesNormalizedRule(dayMatch, context, this.getRuleMatcherHelpers());
}
matchesAdvancedRule(ruleOrMatch, context = {}) {
return matchesAdvancedRule(ruleOrMatch, context, this.getRuleMatcherHelpers());
}
findMatchingDayStyleEvent(rule, dayEvents) {
return this.matchesAdvancedRule(rule, { dayEvents }).matchedEvent;
}
getDayStyleConfig(date, dayEvents, isToday) {
const rules = Array.isArray(this._config?.day_styles) ? this._config.day_styles : [];
if (!rules.length) return null;
const candidates = {};
const applyCandidate = (key, value, rule) => {
if (value === undefined || value === null) return;
const candidatePriority = Number.isFinite(rule.priority) ? rule.priority : 0;
const existing = candidates[key];
if (!existing || candidatePriority > existing.priority || (candidatePriority === existing.priority && rule.index < existing.ruleIndex)) {
candidates[key] = { value, priority: candidatePriority, ruleIndex: rule.index };
}
};
rules.forEach((rule) => {
const result = this.matchesAdvancedRule(rule, { date, dayEvents, isToday });
if (!result.matches) return;
const dayStyle = rule.output?.style || rule.style || {};
if (dayStyle.background) {
if (dayStyle.background === 'auto' && result.matchedEvent?.color) {
applyCandidate('background', result.matchedEvent.color, rule);
} else if (dayStyle.background !== 'auto') {
applyCandidate('background', dayStyle.background, rule);
}
}
applyCandidate('opacity', dayStyle.opacity, rule);
applyCandidate('background_opacity', dayStyle.background_opacity, rule);
applyCandidate('border_color', dayStyle.border_color, rule);
applyCandidate('border_width', dayStyle.border_width, rule);
});
const background = candidates.background?.value ?? null;
const opacity = candidates.opacity?.value ?? null;
const backgroundOpacity = candidates.background_opacity?.value ?? null;
const borderColor = candidates.border_color?.value ?? null;
const borderWidth = candidates.border_width?.value ?? null;
if (!background && opacity === null && backgroundOpacity === null && !borderColor && !borderWidth) return null;
return {
background,
opacity,
background_opacity: backgroundOpacity,
border_color: borderColor,
border_width: borderWidth
};
}
getDayStyleAttributes(date, dayEvents, isToday) {
const dayStyle = this.getDayStyleConfig(date, dayEvents, isToday);
if (!dayStyle) return { className: '', style: '' };
const styles = [];
if (dayStyle.background) {
const backgroundColor = dayStyle.background_opacity !== null
? this.colorWithAlpha(dayStyle.background, dayStyle.background_opacity)
: dayStyle.background;
styles.push(`--day-conditional-background: ${dayStyle.background}`);
styles.push(`background: ${backgroundColor} !important`);
}
if (dayStyle.opacity !== null) {
styles.push(`--day-conditional-opacity: ${dayStyle.opacity}`);
styles.push(`opacity: ${dayStyle.opacity}`);
}
if (dayStyle.border_color || dayStyle.border_width) {
const borderWidth = dayStyle.border_width || '2px';
const borderColor = dayStyle.border_color || 'var(--divider-color, #d1d5db)';
styles.push(`--day-style-border-width: ${borderWidth}`);
styles.push(`--day-style-border-color: ${borderColor}`);
}
const classNames = ['day-style-rule'];
if (dayStyle.background) classNames.push('day-style-has-background');
if (dayStyle.border_color || dayStyle.border_width) classNames.push('day-style-has-border');
return {
className: classNames.join(' '),
style: styles.join('; ')
};
}
normalizeVirtualCalendars(virtualCalendars) {
return normalizeVirtualCalendars(virtualCalendars, {
normalizeSingleColor: this.normalizeSingleColor.bind(this)
});
}
getVirtualBadgeById(virtualId) {
return getVirtualBadgeById(this._config.virtual_calendars || [], virtualId);
}
getVirtualBadgeForEntity(entityId) {
return getVirtualBadgeForEntity(this._config.virtual_calendars || [], entityId);
}
getVirtualBadgeForEvent(event) {
return getVirtualBadgeForEvent(this._config.virtual_calendars || [], event);
}
getVirtualBadgeItems() {
return getVirtualBadgeItems({
entities: this._config.entities,
virtualCalendars: this._config.virtual_calendars || [],
hideBadgeCalendars: this._config.hide_badge_calendars || [],
hiddenCalendars: this._hiddenCalendars,
getCalendarColor: this.getCalendarColor.bind(this),
getCalendarName: this.getCalendarName.bind(this),
getCalendarBadgeIcon: this.getCalendarBadgeIcon.bind(this)
});
}
getWritableCalendars() {
return getWritableCalendars(this._config.entities, this._calendarCapabilities);
}
getEventIdentityKey(entityId, event) {
return getEventIdentityKey(entityId, event);
}
async fetchEventsInRange(startDate, endDate) {
const eventsByCalendar = await this.fetchEventsByCalendarInRange(startDate, endDate);
return Object.values(eventsByCalendar).flat();
}
async fetchEventsByCalendarInRange(startDate, endDate) {
return fetchEventsByCalendarInRange({
hass: this._hass,
entities: this._config.entities,
startDate,
endDate,
getDateRangeChunks: this.getDateRangeChunks.bind(this),
formatLocalDate: this.formatLocalDate.bind(this),
getCalendarColor: this.getCalendarColor.bind(this),
getEventIdentityKey: this.getEventIdentityKey.bind(this),
normalizeCalendarEvent
});
}
getCalendarColor(entityId, index = 0) {
return getCalendarColor(entityId, index, {
colors: this._config?.colors || {},
getDefaultColor: this.getDefaultColor.bind(this),
normalizeSingleColor: this.normalizeSingleColor.bind(this)
});
}
async fetchEventsForCalendar(entityId, colorIndex, chunks) {
return fetchEventsForCalendar({
hass: this._hass,
entityId,
colorIndex,
chunks,
formatLocalDate: this.formatLocalDate.bind(this),
getCalendarColor: this.getCalendarColor.bind(this),
getEventIdentityKey: this.getEventIdentityKey.bind(this),
normalizeCalendarEvent
});
}
async fetchEventsForChunk(entityId, chunk) {
return fetchEventsForChunk({
hass: this._hass,
entityId,
chunk,
formatLocalDate: this.formatLocalDate.bind(this)
});
}
async fetchEventsViaWebSocket(entityId, chunkStartStr, chunkEndStr) {
return fetchEventsViaWebSocket({
hass: this._hass,
entityId,
chunkStartStr,
chunkEndStr
});
}
mergeEvents(existingEvents, incomingEvents) {
return mergeEvents(existingEvents, incomingEvents, {
getEventIdentityKey: this.getEventIdentityKey.bind(this),
getEventStartDate: this.getEventStartDate.bind(this)
});
}
toStableString(value) {
return toStableString(value);
}
getCalendarDataSignature(events = []) {
return getCalendarDataSignature(events);
}
async updateEvents({ preserveScroll = false } = {}) {
if (!this._hass || this._fetching) return;
const { startDate, endDate } = this.getEventFetchRange();
this._fetching = true;
this._lastFetch = Date.now();
try {
const newEventsByCalendar = await this.fetchEventsByCalendarInRange(startDate, endDate);
const changedCalendars = this._config.entities.filter(entityId => {
const hasOldSignature = Object.prototype.hasOwnProperty.call(this._calendarDataSignatures, entityId);
if (!hasOldSignature) {
return true;
}
const oldSignature = this._calendarDataSignatures[entityId];
const newSignature = this.getCalendarDataSignature(newEventsByCalendar[entityId]);
return oldSignature !== newSignature;
});
if (changedCalendars.length === 0) {
this._loadedEventRange = { startDate, endDate };
const now = Date.now();
const shouldRenderForUnchangedData = !this._lastUnchangedDataRender ||
(now - this._lastUnchangedDataRender >= 15 * 60 * 1000);
if (shouldRenderForUnchangedData) {
this._lastUnchangedDataRender = now;
if (preserveScroll) {
this.renderPreservingAgendaScroll();
} else {
this.render();
}
}
return;
}
this._config.entities.forEach(entityId => {
this._calendarDataSignatures[entityId] = this.getCalendarDataSignature(newEventsByCalendar[entityId]);
});
const mergedEvents = sortEventsByStartDate(Object.values(newEventsByCalendar).flat(), {
getEventStartDate: this.getEventStartDate.bind(this)
});
this._events = mergedEvents;
this._loadedEventRange = { startDate, endDate };
this._lastUnchangedDataRender = Date.now();
if (preserveScroll) {
this.renderPreservingAgendaScroll();
} else {
this.render();
}
} finally {
this._fetching = false;
}
}
async extendEventsForRange(startDate, endDate, { render = true } = {}) {
if (!this._hass || this._fetching) return;
this._fetching = true;
this._lastFetch = Date.now();
try {
const additionalEvents = await this.fetchEventsInRange(startDate, endDate);
this._events = this.mergeEvents(this._events, additionalEvents);
if (render) {
this.render();
}
} finally {
this._fetching = false;
}
}
isDateRangeCoveredByLoadedEvents(targetStartDate, targetEndDate) {
return isDateRangeCoveredByLoadedEvents(this._loadedEventRange, targetStartDate, targetEndDate);
}
async ensureEventsForCurrentRange({ force = false, renderIfCovered = false } = {}) {
const shouldRefreshForAge = shouldRefreshEvents({ lastFetch: this._lastFetch });
const { startDate: visibleStartDate, endDate: visibleEndDate } = this.getVisibleDateRange();
// Background stale refreshes run through this path via hass updates.
// Keep dialogs stable by postponing only those refreshes while modal is open.
if (this.isEventManagementDialogOpen() && (force || shouldRefreshForAge)) {
return;
}
if (force || shouldRefreshForAge || !this._loadedEventRange) {
const shouldPreserveScrollDuringRefresh = this._viewMode === 'agenda' && !force && !renderIfCovered;
await this.updateEvents({ preserveScroll: shouldPreserveScrollDuringRefresh });
return;
}
// Gate fetches on the actually visible range. If the user can already see
// all required dates from loaded data, avoid any network call.
if (this.isDateRangeCoveredByLoadedEvents(visibleStartDate, visibleEndDate)) {
if (renderIfCovered) {
this.render();
}
return;
}
// Once visible range falls outside loaded coverage, fetch around current view
// (with buffer) and only request missing leading/trailing segments.
const { startDate, endDate } = this.getEventFetchRange();
const missingRanges = [];
if (startDate < this._loadedEventRange.startDate) {
const missingStartEnd = new Date(this._loadedEventRange.startDate);
missingStartEnd.setDate(missingStartEnd.getDate() - 1);
missingStartEnd.setHours(23, 59, 59, 999);
missingRanges.push({ startDate, endDate: missingStartEnd });
}
if (endDate > this._loadedEventRange.endDate) {
const missingEndStart = new Date(this._loadedEventRange.endDate);
missingEndStart.setDate(missingEndStart.getDate() + 1);
missingEndStart.setHours(0, 0, 0, 0);
missingRanges.push({ startDate: missingEndStart, endDate });
}
for (const range of missingRanges) {
await this.extendEventsForRange(range.startDate, range.endDate, { render: false });
}
this._loadedEventRange = {
startDate: new Date(Math.min(this._loadedEventRange.startDate.getTime(), startDate.getTime())),
endDate: new Date(Math.max(this._loadedEventRange.endDate.getTime(), endDate.getTime()))
};
this.render();
}
getEventFetchRange() {
const { startDate: visibleStart, endDate: visibleEnd } = this.getVisibleDateRange();
// Keep a small look-behind and look-ahead buffer.
const startDate = new Date(visibleStart);
startDate.setDate(startDate.getDate() - 7);
const endDate = new Date(visibleEnd);
endDate.setDate(endDate.getDate() + 30);
return { startDate, endDate };
}
getVisibleDateRange() {
if (this._viewMode === 'agenda') {
this.ensureAgendaWindowInitialized();
return getAgendaVisibleDateRange(this._agendaStartDate, this._agendaEndDate);
}
if (this._viewMode === 'month') {
return getMonthVisibleDateRange(this._currentDate, this._config.firstDayOfWeek, this._config.rolling_weeks);
}
// Week views: from first shown day to last shown day.
return getWeekVisibleDateRange(this.getWeekDays());
}
getDateRangeChunks(startDate, endDate, chunkDays = 30) {
return getDateRangeChunks(startDate, endDate, chunkDays);
}
getEventStartDate(event) {
return getEventStartDate(event, { parseLocalDate: this.parseLocalDate.bind(this) });
}
parseLocalDate(dateStr) {
return parseLocalDate(dateStr);
}
parseCalendarDate(dateStr) {
if (!dateStr || typeof dateStr !== 'string') return new Date(dateStr);
const [year, month, day] = dateStr.split('-').map(Number);
if (![year, month, day].every(Number.isFinite)) return new Date(dateStr);
return this.zonedTimeToDate(year, month, day, 0, 0, 0, 0);
}
parseCalendarDateWithOffset(dateStr, dayOffset = 0) {
if (!dateStr || typeof dateStr !== 'string') return new Date(dateStr);
const [year, month, day] = dateStr.split('-').map(Number);
if (![year, month, day].every(Number.isFinite)) return new Date(dateStr);
const adjusted = new Date(Date.UTC(year, month - 1, day + dayOffset));
return this.zonedTimeToDate(adjusted.getUTCFullYear(), adjusted.getUTCMonth() + 1, adjusted.getUTCDate(), 0, 0, 0, 0);
}
parsePossiblyLocalDateTime(value) {
return parsePossiblyLocalDateTime(value);
}
formatLocalDate(date) {
return formatLocalDate(date);
}
normalizeTimeZone(timeZone) {
if (timeZone === undefined || timeZone === null) return null;
const normalized = String(timeZone).trim();
if (!normalized) return null;
try {
return new Intl.DateTimeFormat('en-US', { timeZone: normalized }).resolvedOptions().timeZone || normalized;
} catch (error) {
console.warn(`Daylight Calendar Card: ignoring invalid time_zone config value "${normalized}".`);
return null;
}
}
getConfiguredTimeZone() {
return this._config?.time_zone || null;
}
withTimeZone(formatOptions = {}) {
const timeZone = this.getConfiguredTimeZone();
return timeZone ? { ...formatOptions, timeZone } : formatOptions;
}
getDateTimeParts(date, options = {}) {
const formatter = new Intl.DateTimeFormat('en-US', this.withTimeZone({
year: 'numeric', month: '2-digit', day: '2-digit',
hour: '2-digit', minute: '2-digit', second: '2-digit',
hourCycle: 'h23', ...options
}));
return formatter.formatToParts(date).reduce((acc, part) => {
if (part.type !== 'literal') acc[part.type] = part.value;
return acc;
}, {});
}
getDateParts(date) {
if (!this.getConfiguredTimeZone()) {
return { year: date.getFullYear(), month: date.getMonth() + 1, day: date.getDate(), weekday: date.getDay() };
}
const parts = this.getDateTimeParts(date, { weekday: 'short' });
const utcDate = new Date(Date.UTC(Number(parts.year), Number(parts.month) - 1, Number(parts.day)));
return { year: Number(parts.year), month: Number(parts.month), day: Number(parts.day), weekday: utcDate.getUTCDay() };
}
getDisplayDateParts(date) {
return { year: date.getFullYear(), month: date.getMonth() + 1, day: date.getDate(), weekday: date.getDay() };
}
zonedTimeToDate(year, month, day, hour = 0, minute = 0, second = 0, millisecond = 0) {
const timeZone = this.getConfiguredTimeZone();
if (!timeZone) return new Date(year, month - 1, day, hour, minute, second, millisecond);
let timestamp = Date.UTC(year, month - 1, day, hour, minute, second, millisecond);
for (let i = 0; i < 3; i++) {
const parts = this.getDateTimeParts(new Date(timestamp));
const asUTC = Date.UTC(Number(parts.year), Number(parts.month) - 1, Number(parts.day), Number(parts.hour), Number(parts.minute), Number(parts.second), millisecond);
const wantedUTC = Date.UTC(year, month - 1, day, hour, minute, second, millisecond);
const delta = asUTC - wantedUTC;
if (delta === 0) break;
timestamp -= delta;
}
return new Date(timestamp);
}
getDayBounds(date) {
const { year, month, day } = this.getDisplayDateParts(date);
const dayStart = this.zonedTimeToDate(year, month, day, 0, 0, 0, 0);
const next = new Date(year, month - 1, day + 1);
const nextDayStart = this.zonedTimeToDate(next.getFullYear(), next.getMonth() + 1, next.getDate(), 0, 0, 0, 0);
return { dayStart, nextDayStart };
}
getDatePartValue(date, part) {
return this.getDisplayDateParts(date)[part];
}
getDefaultColor(index) {
const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E2'];
return colors[index % colors.length];
}
connectedCallback() {
checkAndShowStaleResourceWarning();
window.addEventListener('resize', this._handleViewportResize);
window.visualViewport?.addEventListener('resize', this._handleViewportResize);
this.attachSystemThemeListener();
this.observeHostAndParentResize();
this.render();
}
disconnectedCallback() {
window.removeEventListener('resize', this._handleViewportResize);
window.visualViewport?.removeEventListener('resize', this._handleViewportResize);
this.cancelMonthCompactMeasurement();
if (this._monthGridResizeObserver) {
this._monthGridResizeObserver.disconnect();
this._monthGridResizeObserver = null;
}
if (this._headerResizeObserver) {
this._headerResizeObserver.disconnect();
this._headerResizeObserver = null;
}
if (this._hostResizeObserver) {
this._hostResizeObserver.disconnect();
this._hostResizeObserver = null;
}
this._observedResizeParent = null;
this._lastObservedHostSize = null;
this._pendingHostResizeRender = false;
if (this._hostResizeRaf !== null) {
window.cancelAnimationFrame(this._hostResizeRaf);
this._hostResizeRaf = null;
}
this.detachSystemThemeListener();
this.teardownWeatherForecastSubscription();
this.updateEventModalOpenState(null);
if (this._modalVisibilityObserver) {
this._modalVisibilityObserver.disconnect();
this._modalVisibilityObserver = null;
}
if (this._wrapMeasureRaf1 !== null) {
window.cancelAnimationFrame(this._wrapMeasureRaf1);
this._wrapMeasureRaf1 = null;
}
if (this._wrapMeasureRaf2 !== null) {
window.cancelAnimationFrame(this._wrapMeasureRaf2);
this._wrapMeasureRaf2 = null;
}
}
getCompactMaxHeight(containerTopInViewport = null) {
if (!this._config.compact_height) return null;
const viewportHeight = window.visualViewport?.height || window.innerHeight;
const containerTop = Math.max(
containerTopInViewport ?? this.getBoundingClientRect().top,
0
);
const bottomSpacing = 0;
const minimumHeight = 180;
return Math.max(minimumHeight, Math.floor(viewportHeight - containerTop - bottomSpacing));
}
getElementSizeForAllocation(element) {
if (!element || typeof element.getBoundingClientRect !== 'function') return { width: 0, height: 0 };
const rect = element.getBoundingClientRect();
return {
width: Number.isFinite(rect.width) ? rect.width : 0,
height: Number.isFinite(rect.height) ? rect.height : 0
};
}
hasFixedHeightParentAllocation() {
const parent = this.parentElement;
if (!parent || typeof parent.getBoundingClientRect !== 'function') return false;
const parentSize = this.getElementSizeForAllocation(parent);
if (parentSize.height <= 0) return false;
const parentStyle = typeof window.getComputedStyle === 'function' ? window.getComputedStyle(parent) : null;
const parentMaxHeight = parentStyle?.maxHeight || '';
const parentDisplay = parentStyle?.display || '';
const parentOverflowY = parentStyle?.overflowY || parentStyle?.overflow || '';
const inlineStyle = parent.getAttribute?.('style') || '';
const hasExplicitCssHeight = Boolean(
parent.style?.height ||
parent.style?.minHeight ||
parent.style?.maxHeight ||
/(?:^|;)\s*(?:height|min-height|max-height)\s*:/i.test(inlineStyle) ||
(parentMaxHeight && parentMaxHeight !== 'none' && parentMaxHeight !== '0px')
);
const looksLikeGridAllocation = /grid/i.test(parentDisplay) || parent.hasAttribute?.('grid_options') || parent.classList?.contains('grid-cell');
const clipsOrScrollsOverflow = /(auto|hidden|scroll|clip)/.test(parentOverflowY);
const hostSize = this.getElementSizeForAllocation(this);
const parentHasExtraAllocatedHeight = hostSize.height > 0 && parentSize.height - hostSize.height > 1;
return hasExplicitCssHeight || looksLikeGridAllocation || clipsOrScrollsOverflow || parentHasExtraAllocatedHeight;
}
getGridAwareCompactContainerStyle() {
return 'height: 100%; min-height: 0; overflow-y: auto;';
}
getCompactMonthGridStyle(monthWeekRows, compactMaxHeight = null) {
const rowTemplate = `grid-template-rows: auto repeat(${monthWeekRows}, minmax(0, 1fr));`;
if (this.hasFixedHeightParentAllocation()) {
return `height: 100%; min-height: 0; overflow-y: auto; ${rowTemplate}`;
}
const resolvedMaxHeight = compactMaxHeight || this.getCompactMaxHeight(this._monthContainerTopInViewport);
return resolvedMaxHeight
? `height: ${resolvedMaxHeight}px; overflow-y: auto; ${rowTemplate}`
: '';
}
getCompactContainerStyle(maxHeight = null) {
if (!this._config.compact_height) return '';
if (this.hasFixedHeightParentAllocation()) {
return this.getGridAwareCompactContainerStyle();
}
const resolvedMaxHeight = maxHeight || this.getCompactMaxHeight();
if (!resolvedMaxHeight) return '';
return `height: ${resolvedMaxHeight}px; max-height: ${resolvedMaxHeight}px; overflow-y: auto;`;
}
preserveAgendaScrollForNextRender() {
if (this._viewMode !== 'agenda' || Number.isFinite(this._agendaPendingScrollTop)) return;
const agendaContainer = this.getRootElementById('agenda-container');
if (!agendaContainer) return;
this._agendaPendingScrollTop = agendaContainer.scrollTop;
}
renderPreservingAgendaScroll() {
this.preserveAgendaScrollForNextRender();
this.render();
}
setAgendaScrollTopWithoutTriggeringLoad(container, scrollTop) {
if (!container) return;
this._agendaSuppressScrollHandling = true;
container.scrollTop = scrollTop;
window.requestAnimationFrame(() => {
this._agendaSuppressScrollHandling = false;
});
}
updateWeekStandardFixedOffsetHeightFromDom({ renderOnChange = true } = {}) {
if (this._viewMode !== 'week-standard' || !this._root) return;
if (this.isEventManagementDialogOpen()) return;
const baselineHeaderHeight = 60;
const container = this._root.querySelector('.week-standard-container');
const dayHeaders = Array.from(this._root.querySelectorAll('.week-standard-day-header'));
if (!container || dayHeaders.length === 0) return;
const measuredContainerTop = Math.max(container.getBoundingClientRect().top, 0);
if (!Number.isFinite(measuredContainerTop)) return;
const hasRenderedStackedDayBadges = this._config.day_badge_layout_week === 'stacked'
&& dayHeaders.some((header) => Boolean(header.querySelector?.('.day-badges .day-badge')));
if (!hasRenderedStackedDayBadges) {
const extraHeaderHeightChanged = this._weekStandardExtraHeaderHeight !== 0;
const headerHeightChanged = this._weekStandardHeaderHeight !== null;
const containerTopChanged = this._weekStandardContainerTopInViewport === null || Math.abs(this._weekStandardContainerTopInViewport - measuredContainerTop) > 1;
if (extraHeaderHeightChanged || headerHeightChanged || containerTopChanged) {
this._weekStandardExtraHeaderHeight = 0;
this._weekStandardHeaderHeight = null;
this._weekStandardContainerTopInViewport = measuredContainerTop;
container.style.removeProperty('--week-standard-day-header-height');
container.style.removeProperty('--week-standard-time-header-spacer-height');
if (renderOnChange) this.render();
}
return;
}
const previousHeaderHeightStyle = container.style.getPropertyValue('--week-standard-day-header-height');
if (previousHeaderHeightStyle) {
container.style.removeProperty('--week-standard-day-header-height');
}
const measuredSharedHeaderHeight = Math.ceil(Math.max(
baselineHeaderHeight,
...dayHeaders.map((header) => header.getBoundingClientRect?.().height || 0)
));
if (previousHeaderHeightStyle) {
container.style.setProperty('--week-standard-day-header-height', previousHeaderHeightStyle);
}
if (!Number.isFinite(measuredSharedHeaderHeight)) return;
const effectiveExtraHeaderHeight = Math.max(0, measuredSharedHeaderHeight - baselineHeaderHeight);
const effectiveSharedHeaderHeight = effectiveExtraHeaderHeight > 0 ? measuredSharedHeaderHeight : null;
const extraHeaderHeightChanged = Math.abs(this._weekStandardExtraHeaderHeight - effectiveExtraHeaderHeight) > 1;
const headerHeightChanged = this._weekStandardHeaderHeight === null
? effectiveSharedHeaderHeight !== null
: effectiveSharedHeaderHeight === null || Math.abs(this._weekStandardHeaderHeight - effectiveSharedHeaderHeight) > 1;
const containerTopChanged = this._weekStandardContainerTopInViewport === null || Math.abs(this._weekStandardContainerTopInViewport - measuredContainerTop) > 1;
if (extraHeaderHeightChanged || headerHeightChanged || containerTopChanged) {
this._weekStandardExtraHeaderHeight = effectiveExtraHeaderHeight;
this._weekStandardHeaderHeight = effectiveSharedHeaderHeight;
this._weekStandardContainerTopInViewport = measuredContainerTop;
if (effectiveSharedHeaderHeight === null) {
container.style.removeProperty('--week-standard-day-header-height');
container.style.removeProperty('--week-standard-time-header-spacer-height');
} else {
const timeHeaderSpacerHeight = Math.max(60, effectiveSharedHeaderHeight - 35);
container.style.setProperty('--week-standard-day-header-height', `${effectiveSharedHeaderHeight}px`);
container.style.setProperty('--week-standard-time-header-spacer-height', `${timeHeaderSpacerHeight}px`);
}
if (renderOnChange) this.render();
}
}
updateWeekCompactStackedHeaderHeightFromDom({ renderOnChange = true } = {}) {
if (this._viewMode !== 'week-compact' || !this._root) return;
if (this.isEventManagementDialogOpen()) return;
const container = this._root.querySelector('.week-compact-container');
const dayHeaders = Array.from(this._root.querySelectorAll('.week-day-header'));
if (!container || dayHeaders.length === 0) return;
const hasRenderedStackedDayBadges = this._config.day_badge_layout_week === 'stacked'
&& dayHeaders.some((header) => Boolean(header.querySelector?.('.day-badges .day-badge')));
if (!hasRenderedStackedDayBadges) {
if (this._weekCompactHeaderHeight !== null) {
this._weekCompactHeaderHeight = null;
container.style.removeProperty('--week-compact-header-height');
if (renderOnChange) this.render();
}
return;
}
const previousHeaderHeightStyle = container.style.getPropertyValue('--week-compact-header-height');
if (previousHeaderHeightStyle) {
container.style.removeProperty('--week-compact-header-height');
}
const measuredHeaderHeight = Math.ceil(Math.max(
0,
...dayHeaders.map((header) => header.getBoundingClientRect?.().height || 0)
));
if (previousHeaderHeightStyle) {
container.style.setProperty('--week-compact-header-height', previousHeaderHeightStyle);
}
if (!Number.isFinite(measuredHeaderHeight) || measuredHeaderHeight <= 0) return;
const headerHeightChanged = this._weekCompactHeaderHeight === null || Math.abs(this._weekCompactHeaderHeight - measuredHeaderHeight) > 1;
if (headerHeightChanged) {
this._weekCompactHeaderHeight = measuredHeaderHeight;
container.style.setProperty('--week-compact-header-height', `${measuredHeaderHeight}px`);
if (renderOnChange) this.render();
}
}
cancelMonthCompactMeasurement() {
if (this._monthMeasureRaf !== null) {
window.cancelAnimationFrame(this._monthMeasureRaf);
this._monthMeasureRaf = null;
}
if (this._monthMeasureRenderRaf !== null) {
window.cancelAnimationFrame(this._monthMeasureRenderRaf);
this._monthMeasureRenderRaf = null;
}
}
scheduleMonthCompactTopMeasurement(force = false) {
if (this._viewMode !== 'month' || !this._config.compact_height || this.shouldShowAllEventsInMonth()) return;
if (this.isEventManagementDialogOpen()) return;
if (!force && !this._monthCompactMeasurementDirty && this._monthContainerTopInViewport !== null) return;
if (this._monthMeasureRaf !== null) return;
this._monthMeasureRaf = window.requestAnimationFrame(() => {
this._monthMeasureRaf = null;
this.updateMonthContainerTopInViewportFromDom();
this._monthCompactMeasurementDirty = false;
});
}
observeHostAndParentResize() {
if (typeof window.ResizeObserver !== 'function') return;
const parent = this.parentElement || null;
if (this._hostResizeObserver && this._observedResizeParent === parent) return;
if (this._hostResizeObserver) {
this._hostResizeObserver.disconnect();
this._hostResizeObserver = null;
}
this._observedResizeParent = parent;
this._lastObservedHostSize = this.measureHostAndParentSize();
this._hostResizeObserver = new window.ResizeObserver(() => {
this.scheduleHostAndParentResizeHandling();
});
this._hostResizeObserver.observe(this);
if (parent) {
this._hostResizeObserver.observe(parent);
}
}
measureHostAndParentSize() {
const hostSize = this.getElementSizeForAllocation(this);
const parentSize = this.getElementSizeForAllocation(this.parentElement);
return {
hostWidth: Math.round(hostSize.width),
hostHeight: Math.round(hostSize.height),
parentWidth: Math.round(parentSize.width),
parentHeight: Math.round(parentSize.height)
};
}
hasObservedHostSizeChanged(nextSize) {
const previousSize = this._lastObservedHostSize;
if (!previousSize) return true;
return Object.keys(nextSize).some((key) => Math.abs(nextSize[key] - previousSize[key]) > 1);
}
scheduleHostAndParentResizeHandling() {
if (this._hostResizeRaf !== null) return;
this._hostResizeRaf = window.requestAnimationFrame(() => {
this._hostResizeRaf = null;
const nextSize = this.measureHostAndParentSize();
if (!this.hasObservedHostSizeChanged(nextSize)) return;
this._lastObservedHostSize = nextSize;
const needsCompactHeightRender = !!this._config.compact_height;
if (this._config.compact_height && this._viewMode === 'month' && !this.shouldShowAllEventsInMonth()) {
this._monthCompactMeasurementDirty = true;
}
if (needsCompactHeightRender) {
if (this.isEventManagementDialogOpen()) {
this._pendingHostResizeRender = true;
return;
}
this.render();
return;
}
if (this.isEventManagementDialogOpen() && this.hasWidthDependentMeasuredLayoutState()) {
this._pendingWidthDependentLayoutRefresh = true;
return;
}
this.updateCompactHeaderWrapState();
this.updateCalendarBadgesScrollState();
this.refreshWidthDependentLayoutMeasurements();
});
}
hasWidthDependentMeasuredLayoutState() {
return this._config?.day_badge_layout_week === 'stacked'
&& (this._viewMode === 'week-standard' || this._viewMode === 'week-compact');
}
refreshWidthDependentLayoutMeasurements() {
if (this._viewMode === 'week-standard') {
this.updateWeekStandardFixedOffsetHeightFromDom({ renderOnChange: false });
} else if (this._viewMode === 'week-compact') {
this.updateWeekCompactStackedHeaderHeightFromDom({ renderOnChange: false });
}
}
flushPendingHostResizeRender() {
const shouldRender = this._pendingHostResizeRender;
const shouldRefreshWidthMeasurements = this._pendingWidthDependentLayoutRefresh;
this._pendingHostResizeRender = false;
this._pendingWidthDependentLayoutRefresh = false;
if (shouldRefreshWidthMeasurements) {
this.refreshWidthDependentLayoutMeasurements();
}
if (shouldRender) {
this.render();
}
}
observeHeaderResize() {
if (!this._root || typeof window.ResizeObserver !== 'function') return;
if (this._headerResizeObserver) {
this._headerResizeObserver.disconnect();
this._headerResizeObserver = null;
}
const headerSelector = this._config.compact_header ? '.header-compact' : '.header';
const header = this._root.querySelector(headerSelector);
if (!header) return;
this._headerResizeObserver = new window.ResizeObserver(() => {
this.updateCompactHeaderWrapState();
});
this._headerResizeObserver.observe(header);
}
observeMonthGridResize() {
if (!this._root || typeof window.ResizeObserver !== 'function') return;
if (this._monthGridResizeObserver) {
this._monthGridResizeObserver.disconnect();
this._monthGridResizeObserver = null;
}
if (this._viewMode !== 'month' || !this._config.compact_height || this.shouldShowAllEventsInMonth()) return;
const container = this._root.querySelector('.calendar-container');
if (!container) return;
this._monthGridResizeObserver = new window.ResizeObserver(() => {
this._monthCompactMeasurementDirty = true;
this.scheduleMonthCompactTopMeasurement();
});
this._monthGridResizeObserver.observe(container);
}
updateMonthContainerTopInViewportFromDom() {
if (this._viewMode !== 'month' || !this._config.compact_height || this.shouldShowAllEventsInMonth() || !this._root) return;
if (this.isEventManagementDialogOpen()) return;
const container = this._root.querySelector('.calendar-grid');
if (!container) return;
const measuredContainerTop = Math.max(container.getBoundingClientRect().top, 0);
const viewportHeight = window.visualViewport?.height || window.innerHeight;
if (!Number.isFinite(measuredContainerTop)) return;
if (!Number.isFinite(viewportHeight)) return;
const containerTopChanged = this._monthContainerTopInViewport === null || Math.abs(this._monthContainerTopInViewport - measuredContainerTop) > 1;
const viewportHeightChanged = this._lastCompactMonthViewportHeight === null || Math.abs(this._lastCompactMonthViewportHeight - viewportHeight) > 1;
if (containerTopChanged) {
this._monthContainerTopInViewport = measuredContainerTop;
}
if (viewportHeightChanged) {
this._lastCompactMonthViewportHeight = viewportHeight;
}
if (containerTopChanged || viewportHeightChanged) {
if (this._monthMeasureRenderRaf === null) {
this._monthMeasureRenderRaf = window.requestAnimationFrame(() => {
this._monthMeasureRenderRaf = null;
this.render();
});
}
}
}
updateAgendaContainerTopInViewportFromDom() {
if (this._viewMode !== 'agenda' || !this._config.compact_height || !this._root) return;
if (this.isEventManagementDialogOpen()) return;
const container = this._root.querySelector('.agenda-container');
if (!container) return;
const measuredContainerTop = Math.max(container.getBoundingClientRect().top, 0);
if (!Number.isFinite(measuredContainerTop)) return;
const containerTopChanged = this._agendaContainerTopInViewport === null || Math.abs(this._agendaContainerTopInViewport - measuredContainerTop) > 1;
if (containerTopChanged) {
this._agendaContainerTopInViewport = measuredContainerTop;
this.render();
}
}
getLanguage() {
return resolveLanguage(this._config.language || this._hass?.language || this._hass?.locale?.language);
}
getLocale() {
if (this._config.locale) return this._config.locale;
const configuredLanguage = this._config.language ? resolveLanguage(this._config.language) : null;
if (configuredLanguage) return TRANSLATIONS[configuredLanguage]?.locale || this._config.language;
const hassLocale = this._hass?.locale?.language;
if (hassLocale) return hassLocale;
const hassLanguage = this._hass?.language;
if (hassLanguage) {
const resolvedHassLanguage = resolveLanguage(hassLanguage);
return TRANSLATIONS[resolvedHassLanguage]?.locale || hassLanguage;
}
return globalThis.navigator?.languages?.[0]
|| globalThis.navigator?.language
|| TRANSLATIONS[DEFAULT_LANGUAGE]?.locale
|| 'en-US';
}
t(key, params = {}) {
return translate(this.getLanguage(), key, params);
}
getWeekdayNameFormat() {
return this._config?.display_full_weekday_names ? 'long' : 'short';
}
getWeekdayNames(format = this.getWeekdayNameFormat()) {
const formatter = new Intl.DateTimeFormat(this.getLocale(), { weekday: format });
const baseDate = new Date(2021, 5, 6);
const names = [];
for (let i = 0; i < 7; i++) {
const date = new Date(baseDate);
date.setDate(baseDate.getDate() + i);
names.push(formatter.format(date));
}
return names;
}
setWeekStart() {
const date = new Date(this._currentDate);
const day = date.getDay();
const diff = (day - this._config.firstDayOfWeek + 7) % 7;
date.setDate(date.getDate() - diff);
date.setHours(0, 0, 0, 0);
this._weekStart = date;
}
resetAgendaWindowToToday() {
const today = new Date();
today.setHours(0, 0, 0, 0);
this._currentDate = new Date(today);
const agendaWindow = createAgendaWindow(today, this.getAgendaPeriodDaySpan());
this._agendaStartDate = agendaWindow.startDate;
this._agendaEndDate = agendaWindow.endDate;
this._agendaVisibleStartDate = agendaWindow.visibleStartDate;
this._agendaVisibleEndDate = agendaWindow.visibleEndDate;
}
ensureAgendaWindowInitialized() {
if (this._agendaStartDate && this._agendaEndDate) return;
this.resetAgendaWindowToToday();
}
getAgendaDays() {
this.ensureAgendaWindowInitialized();
return getAgendaDays(this._agendaStartDate, this._agendaEndDate);
}
getAgendaVisibleDateRangeFromDom() {
if (!this._root || this._viewMode !== 'agenda') return null;
const container = this.getRootElementById('agenda-container');
if (!container) return null;
const containerRect = container.getBoundingClientRect();
const dayRows = Array.from(container.querySelectorAll('.agenda-day-row'));
if (dayRows.length === 0) return null;
const visibleDates = dayRows
.map((row) => {
const rect = row.getBoundingClientRect();
const isVisible = rect.bottom > containerRect.top && rect.top < containerRect.bottom;
if (!isVisible) return null;
const rawDate = row.getAttribute('data-date');
if (!rawDate) return null;
return new Date(rawDate);
})
.filter((date) => date instanceof Date && !Number.isNaN(date.getTime()));
if (visibleDates.length === 0) return null;
const startDate = new Date(visibleDates[0]);
startDate.setHours(0, 0, 0, 0);
const endDate = new Date(visibleDates[visibleDates.length - 1]);
endDate.setHours(23, 59, 59, 999);
return { startDate, endDate };
}
updateAgendaVisibleDateRangeFromDom() {
const visibleRange = this.getAgendaVisibleDateRangeFromDom();
if (!visibleRange) {
this._agendaVisibleStartDate = null;
this._agendaVisibleEndDate = null;
this.updateAgendaPeriodLabelInDom();
return;
}
this._agendaVisibleStartDate = visibleRange.startDate;
this._agendaVisibleEndDate = visibleRange.endDate;
this.updateAgendaPeriodLabelInDom();
}
isAgendaRangeWithinCurrentWindow(range) {
return isAgendaRangeWithinWindow(range, this._agendaStartDate, this._agendaEndDate);
}
updateAgendaPeriodLabelInDom() {
if (!this._root || this._viewMode !== 'agenda') return;
const label = this.getPeriodLabel();
this._root.querySelectorAll('.month-year').forEach((labelEl) => {
labelEl.textContent = label;
});
}
getAgendaViewportDayCapacity() {
if (!this._root || this._viewMode !== 'agenda') {
return this._agendaDaysPerScrollLoad;
}
const container = this.getRootElementById('agenda-container');
if (!container) {
return this._agendaDaysPerScrollLoad;
}
const rows = Array.from(container.querySelectorAll('.agenda-day-row'));
if (rows.length === 0) {
return this._agendaDaysPerScrollLoad;
}
const maxHeight = container.clientHeight;
if (!Number.isFinite(maxHeight) || maxHeight <= 0) {
return this._agendaDaysPerScrollLoad;
}
let consumedHeight = 0;
let dayCount = 0;
for (const row of rows) {
const rowHeight = row.getBoundingClientRect().height;
if (!Number.isFinite(rowHeight) || rowHeight <= 0) continue;
if ((consumedHeight + rowHeight) > maxHeight && dayCount > 0) {
break;
}
consumedHeight += rowHeight;
dayCount += 1;
if (consumedHeight >= maxHeight) {
break;
}
}
return Math.max(1, dayCount || this._agendaDaysPerScrollLoad);
}
getAgendaRollingDays() {
return getAgendaRollingDays(this._config);
}
getAgendaPeriodDaySpan() {
return getAgendaPeriodDaySpan(this._config);
}
getRollingDaysForView(viewMode = this._viewMode) {
return getRollingDaysForView(viewMode, this._config);
}
getWeekDays(viewMode = this._viewMode) {
return getWeekDays({
currentDate: this._currentDate,
weekStart: this._weekStart,
weekDays: this._config.week_days,
rollingDays: this.getRollingDaysForView(viewMode)
});
}
getStyles() {
return getCardStyles();
}
render() {
const shouldRestoreAgendaScrollPosition = this._viewMode === 'agenda' && Number.isFinite(this._agendaPendingScrollTop);
const agendaScrollTopToRestore = shouldRestoreAgendaScrollPosition ? this._agendaPendingScrollTop : null;
const today = new Date();
const year = this._currentDate.getFullYear();
const month = this._currentDate.getMonth();
const themeCardBackground = this._isDarkMode ? '#2a2f36' : '#ffffff';
const calendarBaseBackground = `var(--calendar-background, var(--theme-card-background, var(--ha-card-background, var(--card-background-color, ${themeCardBackground}))))`;
const normalizedBackgroundOpacity = this.normalizeBackgroundOpacity(this._config.background_opacity, this._config.background_transparent ? 100 : 0);
const rawHeaderBackgroundColor = this.normalizeSingleColor(this._config.header_color);
const resolvedHeaderBackgroundBase = typeof rawHeaderBackgroundColor === 'string' && rawHeaderBackgroundColor.trim().toLowerCase() === 'match-card-background'
? calendarBaseBackground
: (rawHeaderBackgroundColor || DEFAULT_CONFIG_VALUES.header_color);
const normalizedHeaderBackgroundOpacity = this.normalizeBackgroundOpacity(
this._config.header_background_opacity,
this._config.header_background_transparent ? 100 : 0
);
const normalizedHeaderReveal = Math.max(0, Math.min(1, normalizedHeaderBackgroundOpacity / 100));
const headerAlpha = Math.max(0.2, 1 - (normalizedHeaderReveal * 0.75));
const configuredHeaderTextColor = this.normalizeSingleColor(this._config.header_text_color);
let resolvedHeaderTextColor = configuredHeaderTextColor;
if (!resolvedHeaderTextColor) {
const headerBaseForContrast = typeof rawHeaderBackgroundColor === 'string' && rawHeaderBackgroundColor.trim().toLowerCase() === 'match-card-background'
? themeCardBackground
: resolvedHeaderBackgroundBase;
const headerBaseRgb = this.colorToRgb(headerBaseForContrast);
const themeCardBackgroundRgb = this.colorToRgb(themeCardBackground);
if (headerBaseRgb && themeCardBackgroundRgb && headerAlpha < 1) {
const blendedHeaderRgb = {
r: Math.round((headerBaseRgb.r * headerAlpha) + (themeCardBackgroundRgb.r * (1 - headerAlpha))),
g: Math.round((headerBaseRgb.g * headerAlpha) + (themeCardBackgroundRgb.g * (1 - headerAlpha))),
b: Math.round((headerBaseRgb.b * headerAlpha) + (themeCardBackgroundRgb.b * (1 - headerAlpha)))
};
resolvedHeaderTextColor = this.getContractColor(`rgb(${blendedHeaderRgb.r}, ${blendedHeaderRgb.g}, ${blendedHeaderRgb.b})`);
} else {
resolvedHeaderTextColor = this.getContractColor(headerBaseForContrast);
}
}
const headerControlBackground = this.colorWithAlpha(resolvedHeaderTextColor, 0.16);
const headerControlHoverBackground = this.colorWithAlpha(resolvedHeaderTextColor, 0.24);
const headerControlActiveBackground = this.colorWithAlpha(resolvedHeaderTextColor, 0.32);
const headerControlBorder = this.colorWithAlpha(resolvedHeaderTextColor, 0.4);
const headerControlBorderHover = this.colorWithAlpha(resolvedHeaderTextColor, 0.6);
const wrappedHeaderBackground = normalizedHeaderBackgroundOpacity <= 0
? resolvedHeaderBackgroundBase
: 'transparent';
const headerStyle = `--header-background-base: ${resolvedHeaderBackgroundBase}; --header-background-alpha: ${headerAlpha}; --header-wrapped-background: ${wrappedHeaderBackground}; --header-text-color: ${resolvedHeaderTextColor}; --header-control-bg: ${headerControlBackground}; --header-control-bg-hover: ${headerControlHoverBackground}; --header-control-bg-active: ${headerControlActiveBackground}; --header-control-border: ${headerControlBorder}; --header-control-border-hover: ${headerControlBorderHover};`;
const normalizedBackgroundImageUrl = this.normalizeBackgroundImageUrl(this._config.background_image_url);
const safeBackgroundImageUrl = normalizedBackgroundImageUrl
? String(normalizedBackgroundImageUrl).replace(/[\'\\]/g, '\\$&')
: null;
const hasCustomBackground = normalizedBackgroundOpacity > 0;
const backgroundImageStyle = safeBackgroundImageUrl
? `--calendar-background-image: url('${safeBackgroundImageUrl}'); --calendar-background-size: ${this._config.background_image_size}; --calendar-background-position: ${this._config.background_image_position}; --calendar-background-repeat: ${this._config.background_image_repeat};`
: '';
const backgroundAlpha = (100 - normalizedBackgroundOpacity) / 100;
const normalizedReveal = Math.max(0, Math.min(1, normalizedBackgroundOpacity / 100));
const scaledBackgroundImageAlpha = Math.max(0, Math.min(1, normalizedReveal * 0.75));
const backgroundImageAlpha = safeBackgroundImageUrl ? scaledBackgroundImageAlpha : 0;
const customSurfaceAlpha = Math.max(0.2, 1 - (normalizedReveal * 0.75));
const customSurfacePalette = this._isDarkMode
? {
calendar: '48, 54, 63',
column: '59, 67, 77',
allDay: '53, 60, 69',
slot: '53, 60, 69'
}
: {
calendar: '249, 250, 251',
column: '255, 255, 255',
allDay: '249, 250, 251',
slot: '255, 255, 255'
};
const backgroundStyle = `--theme-card-background: ${themeCardBackground}; --calendar-background-opacity: ${backgroundAlpha}; --calendar-background-image-opacity: ${backgroundImageAlpha}; --custom-surface-alpha: ${customSurfaceAlpha}; --custom-surface-calendar-rgb: ${customSurfacePalette.calendar}; --custom-surface-column-rgb: ${customSurfacePalette.column}; --custom-surface-all-day-rgb: ${customSurfacePalette.allDay}; --custom-surface-slot-rgb: ${customSurfacePalette.slot};`;
const containerStyle = `${headerStyle} ${backgroundStyle} ${backgroundImageStyle}`.trim();
this._root.innerHTML = `
${this._config.uix?.style ? `
` : ''}
${this._config.hide_header ? '' : (this._config.compact_header ? this.renderCompactHeader() : this.renderStandardHeader())}
${this.renderCalendarView()}
${allDayLanes.length > 0 ? allDayLanes.map(lane => {
if (!lane) {
return '
';
}
const {
event,
continuesFromPreviousDay,
continuesToNextDay,
bridgeFromPreviousDay,
bridgeToNextDay,
showTitle,
displayTitle,
visibleDaySpan
} = lane;
const eventStyle = this.getEventStyle(event, { withBorderAccent: false });
return `
${showTitle ? this.renderEventTitleWithPrefix(event, displayTitle || event.summary || this.t('untitledEvent')) : ''}
${this.renderEventStyleCornerIcon(event)}
`;
}).join('') : ''}
${this.renderEventTitleWithPrefix(event, displayTitle || event.summary || this.t('untitledEvent'))}
${this.shouldShowEventTime(event) ? `
${this.formatEventTimeRange(eventStart, eventEnd, { schedule: true })}
` : ''}
${this.shouldShowEventLocation(event) ? `
📍 ${this.escapeHtml(this.getDisplayLocation(event.location, event))}
` : ''}
${this.renderEventIcon(event)}
${this.renderEventStyleCornerIcon(event)}
${this.renderCombinedCornerBubbles(event)}
`;
}).join('');
}
getLocalDayHourFloat(dateTime, referenceDate) {
// Use wall-clock hour values relative to the rendered day so DST transitions
// do not visually shift events by ±1 hour in the schedule grid.
const referenceParts = this.getDisplayDateParts(referenceDate);
const timeParts = this.getDateTimeParts(dateTime);
const dayKey = Date.UTC(referenceParts.year, referenceParts.month - 1, referenceParts.day);
const timeKey = Date.UTC(Number(timeParts.year), Number(timeParts.month) - 1, Number(timeParts.day));
const dayDiff = (timeKey - dayKey) / 86400000;
return (dayDiff * 24) +
Number(timeParts.hour) +
(Number(timeParts.minute) / 60) +
(Number(timeParts.second) / 3600) +
(dateTime.getMilliseconds() / 3600000);
}
getVisibleCalendarBadgesForEvent(event) {
return getVisibleCalendarBadgesForEvent(event, {
hiddenCalendars: this._hiddenCalendars,
getVirtualBadgeForEvent: (badgeEvent) => this.getVirtualBadgeForEvent(badgeEvent),
normalizeSingleColor: (color) => this.normalizeSingleColor(color),
configColors: this._config.colors
});
}
renderEventIcon(event) {
if (this.shouldShowCombinedCornerBubbles(event)) {
return '';
}
return renderEventIcon(event, {
getEventStyleOverrides: (iconEvent) => this.getEventStyleOverrides(iconEvent),
eventCalendarFriendlyName: this._config.event_calendar_friendly_name,
hideEventCalendarBubble: this._config.hide_event_calendar_bubble,
getModalCalendarBadgesForEvent: (iconEvent) => this.getModalCalendarBadgesForEvent(iconEvent),
getCalendarName: (entityId) => this.getCalendarName(entityId),
escapeHtml: (value) => this.escapeHtml(value)
});
}
isCombinedEventWithinSingleVirtualCalendar(event) {
return isCombinedEventWithinSingleVirtualCalendar(event, {
hiddenCalendars: this._hiddenCalendars,
getVirtualBadgeForEntity: (entityId) => this.getVirtualBadgeForEntity(entityId)
});
}
shouldShowCombinedCornerBubbles(event) {
return shouldShowCombinedCornerBubbles(event, {
combineCalendars: this._config.combine_calendars,
isSingleVirtualCalendar: this.isCombinedEventWithinSingleVirtualCalendar(event),
styleOverrides: this.getEventStyleOverrides(event)
});
}
renderCombinedCornerBubbles(event) {
return renderCombinedCornerBubbles(event, {
shouldShowCombinedCornerBubbles: (bubbleEvent) => this.shouldShowCombinedCornerBubbles(bubbleEvent),
getModalCalendarBadgesForEvent: (bubbleEvent) => this.getModalCalendarBadgesForEvent(bubbleEvent),
getCalendarName: (entityId) => this.getCalendarName(entityId),
escapeHtml: (value) => this.escapeHtml(value)
});
}
getEventStyleIconConfig(event) {
const styleOverrides = this.getEventStyleOverrides(event);
const icon = this.normalizeEventIconName(styleOverrides?.icon);
if (!icon) return null;
return {
icon,
color: this.normalizeEventIconColor(styleOverrides?.icon_color),
size: this.normalizeStyleSizeValue(styleOverrides?.icon_size),
position: this.normalizeEventIconPosition(styleOverrides?.icon_position) || 'before_title'
};
}
renderEventStyleIcon(event, { position = 'before_title' } = {}) {
return renderEventStyleIcon(this.getEventStyleIconConfig(event), {
position,
escapeHtml: (value) => this.escapeHtml(value)
});
}
renderEventStyleCornerIcon(event) {
return renderEventStyleCornerIcon(event, {
getEventStyleIconConfig: (iconEvent) => this.getEventStyleIconConfig(iconEvent),
escapeHtml: (value) => this.escapeHtml(value)
});
}
renderEventTitleWithPrefix(event, title) {
return renderEventTitleWithPrefix(event, title, {
t: (key) => this.t(key),
escapeHtml: (value) => this.escapeHtml(value),
getEventStyleOverrides: (titleEvent) => this.getEventStyleOverrides(titleEvent),
getEventStyleIconConfig: (titleEvent) => this.getEventStyleIconConfig(titleEvent),
normalizeEventTitlePrefixMode: (mode) => this.normalizeEventTitlePrefixMode(mode),
configuredEventTitlePrefix: this._config.event_title_prefix,
getModalCalendarBadgesForEvent: (titleEvent) => this.getModalCalendarBadgesForEvent(titleEvent),
getCalendarName: (entityId) => this.getCalendarName(entityId),
normalizeSingleColor: (color) => this.normalizeSingleColor(color),
getCalendarBadgeIcon: (entityId) => this.getCalendarBadgeIcon(entityId),
normalizeBackgroundImageUrl: (url) => this.normalizeBackgroundImageUrl(url)
});
}
lightenColor(color, amount) {
const rgb = this.colorToRgb(color);
if (!rgb) {
return this.normalizeSingleColor(color);
}
// Lighten by blending with white
const nr = Math.round(rgb.r + (255 - rgb.r) * amount);
const ng = Math.round(rgb.g + (255 - rgb.g) * amount);
const nb = Math.round(rgb.b + (255 - rgb.b) * amount);
return `rgb(${nr}, ${ng}, ${nb})`;
}
getEventFontSize(event = null, configKey = 'event_font_size', fallbackPx = 11) {
const styleOverrides = event ? this.getEventStyleOverrides(event) : null;
return getEventFontSizeDisplayValue(styleOverrides?.[configKey] ?? this._config?.[configKey], fallbackPx);
}
getEventBubbleFontSize(event = null) {
return this.getEventFontSize(event, 'event_font_size', 11);
}
getEventTimeFontSize(event = null) {
return this.getEventFontSize(event, 'event_time_font_size', 9);
}
getEventLocationFontSize(event = null) {
return this.getEventFontSize(event, 'event_location_font_size', 9);
}
shouldShowEventLocation(event) {
return shouldShowEventLocation(event, {
styleOverrides: this.getEventStyleOverrides(event),
showEventLocation: this._config.show_event_location
});
}
getDisplayLocation(location, event = null) {
return getDisplayLocation(location, {
styleOverrides: event ? this.getEventStyleOverrides(event) : null,
useShortLocation: this._config?.use_short_location
});
}
getEventBubbleFontColor(event) {
return getEventBubbleFontColor(event, {
styleOverrides: event ? this.getEventStyleOverrides(event) : null,
hiddenCalendars: this._hiddenCalendars,
eventFontColors: this._config?.event_font_colors,
normalizeSingleColor: (color) => this.normalizeSingleColor(color),
getEventBackgroundColor: (colorEvent) => this.getEventBackgroundColor(colorEvent),
getContrastColor: (color) => this.getContractColor(color)
});
}
shouldShowEventTime(event) {
return shouldShowEventTime(event, {
styleOverrides: event ? this.getEventStyleOverrides(event) : null,
hiddenCalendars: this._hiddenCalendars,
hideTimesForCalendars: this._config.hide_times_for_calendars
});
}
shouldShowCurrentTimeBar(today, startHour, endHour) {
const now = new Date();
now.setSeconds(0, 0);
if (now.toDateString() !== today.toDateString()) {
return false;
}
const currentHourFloat = now.getHours() + (now.getMinutes() / 60);
return currentHourFloat >= startHour && currentHourFloat <= (endHour + 1);
}
renderCurrentTimeLine(startHour, hourHeight) {
const now = new Date();
const currentHourFloat = now.getHours() + (now.getMinutes() / 60);
const top = (currentHourFloat - startHour) * hourHeight;
return `
`;
}
formatScheduleHour(hour) {
const date = this.zonedTimeToDate(2020, 1, 1, hour, 0, 0, 0);
return this.formatScheduleTime(date);
}
getTimeFormatOptions() {
const formatOptions = {
hour: 'numeric',
minute: '2-digit'
};
const config = this._config || {};
if (Object.prototype.hasOwnProperty.call(config, 'use_24hr_schedule')) {
formatOptions.hour12 = !config.use_24hr_schedule;
}
return formatOptions;
}
formatScheduleTime(date) {
return new Intl.DateTimeFormat(this.getLocale(), this.withTimeZone(this.getTimeFormatOptions())).format(date);
}
uses24HourEventTime() {
const formatter = new Intl.DateTimeFormat(this.getLocale(), this.withTimeZone(this.getTimeFormatOptions()));
return formatter.resolvedOptions().hour12 === false;
}
isWholeHour(date) {
const parts = this.getDateTimeParts(date);
return Number(parts.minute) === 0 && Number(parts.second) === 0 && date.getMilliseconds() === 0;
}
formatLocalizedHour(date) {
const formatter = new Intl.DateTimeFormat(this.getLocale(), this.withTimeZone(this.getTimeFormatOptions()));
const hourPart = formatter.formatToParts(date).find((part) => part.type === 'hour');
if (hourPart) {
return hourPart.value;
}
return new Intl.NumberFormat(this.getLocale(), { useGrouping: false }).format(date.getHours());
}
formatShort12HourEventTime(date, options = {}) {
if (!this.isWholeHour(date)) {
return this.formatBaseEventTime(date, options);
}
const formatter = new Intl.DateTimeFormat(this.getLocale(), this.withTimeZone(this.getTimeFormatOptions()));
const parts = formatter.formatToParts(date);
const minuteIndex = parts.findIndex((part) => part.type === 'minute');
const shortenedParts = parts.filter((part, index) => {
if (part.type === 'minute') return false;
return !(part.type === 'literal' && index === minuteIndex - 1);
});
return shortenedParts.map((part) => part.value).join('').replace(/\s+/g, ' ').trim();
}
formatShort24HourEventTime(date, { appendHourSuffix = true, omitWholeHourMinutes = true, schedule = false } = {}) {
if (this.isWholeHour(date) && omitWholeHourMinutes) {
return `${this.formatLocalizedHour(date)}${appendHourSuffix ? 'h' : ''}`;
}
return this.formatBaseEventTime(date, { schedule });
}
formatBaseEventTime(date, { schedule = false } = {}) {
return schedule ? this.formatScheduleTime(date) : this.formatTime(date);
}
formatEventTime(date, options = {}) {
if (!this._config?.shorten_event_times) {
return this.formatBaseEventTime(date, options);
}
if (this.uses24HourEventTime()) {
return this.formatShort24HourEventTime(date, options);
}
return this.formatShort12HourEventTime(date, options);
}
formatEventTimeRange(startDate, endDate, options = {}) {
if (!this._config?.shorten_event_times) {
return `${this.formatBaseEventTime(startDate, options)} - ${this.formatBaseEventTime(endDate, options)}`;
}
if (!this.uses24HourEventTime()) {
return `${this.formatShort12HourEventTime(startDate, options)} - ${this.formatShort12HourEventTime(endDate, options)}`;
}
const startWholeHour = this.isWholeHour(startDate);
const endWholeHour = this.isWholeHour(endDate);
if (startWholeHour && endWholeHour) {
return `${this.formatShort24HourEventTime(startDate, { ...options, appendHourSuffix: false })}-${this.formatShort24HourEventTime(endDate, options)}`;
}
return `${this.formatShort24HourEventTime(startDate, { ...options, appendHourSuffix: false })}-${this.formatShort24HourEventTime(endDate, { ...options, appendHourSuffix: endWholeHour })}`;
}
getMonthWeekRowCount() {
if (this._config.rolling_weeks !== null && this._viewMode === 'month') {
return this._config.rolling_weeks + 1;
}
const year = this._currentDate.getFullYear();
const month = this._currentDate.getMonth();
const firstDay = new Date(year, month, 1).getDay();
const daysInMonth = new Date(year, month + 1, 0).getDate();
const startDay = (firstDay - this._config.firstDayOfWeek + 7) % 7;
return Math.ceil((startDay + daysInMonth) / 7);
}
getEventBubbleFontSizePx() {
const fallbackPx = 11;
const sizeValue = this.getEventBubbleFontSize();
if (typeof window === 'undefined' || !this._root) {
const parsed = parseFloat(sizeValue);
return Number.isFinite(parsed) ? parsed : fallbackPx;
}
const probe = document.createElement('span');
probe.style.position = 'absolute';
probe.style.visibility = 'hidden';
probe.style.fontSize = sizeValue;
probe.style.lineHeight = 'normal';
probe.textContent = 'M';
this._root.appendChild(probe);
const computedFontSize = parseFloat(window.getComputedStyle(probe).fontSize);
probe.remove();
return Number.isFinite(computedFontSize) ? computedFontSize : fallbackPx;
}
getFontSizePx(sizeValue, fallbackPx = 11) {
if (typeof window === 'undefined' || !this._root) {
const parsed = parseFloat(sizeValue);
return Number.isFinite(parsed) ? parsed : fallbackPx;
}
const probe = document.createElement('span');
probe.style.position = 'absolute';
probe.style.visibility = 'hidden';
probe.style.fontSize = sizeValue;
probe.style.lineHeight = 'normal';
probe.textContent = 'M';
this._root.appendChild(probe);
const computedFontSize = parseFloat(window.getComputedStyle(probe).fontSize);
probe.remove();
return Number.isFinite(computedFontSize) ? computedFontSize : fallbackPx;
}
getAgendaEventMinHeight() {
const timeFontPx = this.getFontSizePx(this.getEventTimeFontSize(), 9);
const titleFontPx = this.getFontSizePx(this.getEventBubbleFontSize(), 11);
const locationFontPx = this.getFontSizePx(this.getEventLocationFontSize(), 9);
const timeRowHeight = Math.ceil(timeFontPx * 1.2);
const titleRowHeight = Math.ceil(titleFontPx * 1.25);
const locationRowHeight = Math.ceil(locationFontPx * 1.3);
const verticalPadding = 20; // 10px top + 10px bottom
const rowSpacing = 8; // time mb + location mt
const buffer = 8;
const total = verticalPadding + timeRowHeight + titleRowHeight + locationRowHeight + rowSpacing + buffer;
return `${Math.max(56, total)}px`;
}
getMonthEventRowHeight() {
const fontSizePx = this.getEventBubbleFontSizePx();
const lineHeightPx = fontSizePx * 1.2;
const verticalPaddingPx = 8; // .event has 4px top + 4px bottom padding
const marginBottomPx = 3; // .event margin-bottom in month view
return Math.ceil(lineHeightPx + verticalPaddingPx + marginBottomPx);
}
renderDays() {
return renderMonthDays({
currentDate: this._currentDate,
config: this._config,
viewMode: this._viewMode,
shouldShowWeekNumbers: this.shouldShowMonthWeekNumbers(),
helpers: {
renderDay: (day, date, isOtherMonth) => this.renderDay(day, date, isOtherMonth),
renderMonthWeekNumberCell: (rowStartDate) => this.renderMonthWeekNumberCell(rowStartDate)
}
});
}
getMaxVisibleEventsForMonthDay() {
const defaultMaxVisible = 3;
if (this._viewMode === 'month' && this.shouldShowAllEventsInMonth()) {
return Number.MAX_SAFE_INTEGER;
}
if (this._viewMode !== 'month' || !this._config.compact_height) {
return defaultMaxVisible;
}
const compactMaxHeight = this.getCompactMaxHeight(this._monthContainerTopInViewport);
if (!compactMaxHeight) {
return defaultMaxVisible;
}
const weekRows = this.getMonthWeekRowCount();
if (!weekRows || weekRows < 1) {
return defaultMaxVisible;
}
const gridGap = 1;
const dayHeaderRowHeight = 41;
const dayCellVerticalPadding = 16; // .day-cell has 8px top + 8px bottom padding
const dayNumberBlockHeight = 42; // .day-header-row min-height in CSS
const eventRowHeight = this.getMonthEventRowHeight();
const contentHeight = compactMaxHeight - dayHeaderRowHeight - (weekRows * gridGap);
const dayCellHeight = Math.floor(contentHeight / weekRows);
// Do not pre-reserve space for the "+N more" indicator here. Overflow handling
// swaps one event row for the indicator in renderDay(), so reserving both causes
// under-counting and hidden space.
const usableEventHeight = dayCellHeight - dayCellVerticalPadding - dayNumberBlockHeight;
if (!Number.isFinite(usableEventHeight) || usableEventHeight <= 0) {
return 1;
}
return Math.max(1, Math.floor(usableEventHeight / eventRowHeight));
}
shouldShowMonthWeekNumbers() {
return this._viewMode === 'month' && !!this._config?.show_week_numbers_month;
}
getIsoWeekNumber(date) {
return getIsoWeekNumber(date);
}
formatMonthWeekNumberLabel(date) {
const weekNumber = this.getIsoWeekNumber(date);
const weekPrefix = this.t('monthWeekPrefix');
const localizedWeekNumber = new Intl.NumberFormat(this.getLocale()).format(weekNumber);
return `${weekPrefix}${localizedWeekNumber}`;
}
getIsoWeekAnchorDateForRow(rowStartDate) {
const anchorDate = new Date(rowStartDate);
const daysUntilMonday = (1 - anchorDate.getDay() + 7) % 7;
anchorDate.setDate(anchorDate.getDate() + daysUntilMonday);
return anchorDate;
}
renderMonthWeekNumberCell(rowStartDate) {
const weekLabel = this.formatMonthWeekNumberLabel(this.getIsoWeekAnchorDateForRow(rowStartDate));
return `
${this.escapeHtml(weekLabel)}
`;
}
getDayBadges(date, dayEvents) {
const rules = Array.isArray(this._config?.day_badges) ? this._config.day_badges : [];
if (!rules.length || !Array.isArray(dayEvents)) return [];
return rules
.map((rule) => {
const matchResult = this.matchesAdvancedRule(rule, { date, dayEvents });
if (!matchResult.matches) return null;
const resolvedRule = this.resolveDayBadgeForRender(rule, date, matchResult.matchedEvent);
if (!resolvedRule.icon && !resolvedRule.text) return null;
return resolvedRule;
})
.filter(Boolean);
}
renderDayBadges(date, dayEvents) {
return renderDayBadges(date, dayEvents, {
escapeHtml: this.escapeHtml.bind(this),
getDayBadges: this.getDayBadges.bind(this)
});
}
renderDay(dayNum, date, isOtherMonth) {
const today = new Date();
const isToday = date.toDateString() === today.toDateString();
const dayEventsForMatching = this.getEventsForDay(date, { includeHiddenStyledEvents: true });
let dayEvents = dayEventsForMatching.filter((event) => !this.isEventHiddenByStyle(event));
dayEvents = this.sortEventsForDate(dayEvents, date);
const maxVisible = this.getMaxVisibleEventsForMonthDay();
const hasOverflow = dayEvents.length > maxVisible;
const visibleEvents = hasOverflow ? Math.max(0, maxVisible - 1) : maxVisible;
const hiddenEventCount = Math.max(0, dayEvents.length - visibleEvents);
const dayStyle = this.getDayStyleAttributes(date, dayEventsForMatching, isToday);
return renderDayCell({
date,
dayEvents,
dayEventsForMatching,
dayNum,
dayStyle,
hiddenEventCount,
isOtherMonth,
isToday,
visibleEvents,
helpers: {
renderDayBadges: this.renderDayBadges.bind(this),
renderDayForecast: this.renderDayForecast.bind(this),
renderMonthDayEvent: this.renderMonthDayEvent.bind(this),
t: this.t.bind(this)
}
});
}
renderMonthDayEvent(event, date) {
if (this.shouldRenderMonthEventsAsWeekCompact()) {
return this.renderWeekCompactEvent(event, date);
}
return this.renderEvent(event, date);
}
renderWeekCompactEvent(event, date) {
const daySegment = this.getEventDaySegment(event, date);
if (!daySegment) return '';
const { segmentStart, segmentEnd, isAllDaySegment } = daySegment;
const timeLabel = isAllDaySegment
? this.t('allDay')
: this.formatEventTimeRange(segmentStart, segmentEnd);
const eventStyle = this.getEventStyle(event);
return `
${this.shouldShowEventTime(event) ? `
${timeLabel}
` : ''}
${this.renderEventTitleWithPrefix(event, event.summary || this.t('untitledEvent'))}
${this.shouldShowEventLocation(event) ? `
📍 ${this.escapeHtml(this.getDisplayLocation(event.location, event))}
` : ''}
${this.renderEventStyleCornerIcon(event)}
${this.renderCombinedCornerBubbles(event)}
${!isAllDaySegment && this.shouldShowEventTime(event) ? `${this.formatEventTime(segmentStart)} ` : ''}
${this.renderEventTitleWithPrefix(event, event.summary || this.t('untitledEvent'))}
${this.renderEventStyleCornerIcon(event)}
${this.renderCombinedCornerBubbles(event)}
`;
}
normalizeEventTextValue(value) {
return normalizeEventTextValue(value);
}
getNormalizedEventTimeValue(value) {
if (!value) return '';
const toDateTimeTimestamp = (rawValue) => {
const normalizedRaw = this.normalizeEventTextValue(rawValue);
if (!normalizedRaw) return null;
const floatingMatch = normalizedRaw.match(/^(\d{4})-(\d{2})-(\d{2})[T ](\d{2}):(\d{2})(?::(\d{2}))?(?:\.(\d+))?(Z|[+-]\d{2}:\d{2})?$/i);
if (!floatingMatch) {
return null;
}
const [, yearText, monthText, dayText, hourText, minuteText, secondText, fractionText, tzText] = floatingMatch;
const year = Number(yearText);
const month = Number(monthText);
const day = Number(dayText);
const hour = Number(hourText);
const minute = Number(minuteText);
const second = Number(secondText || '0');
const millis = Number(((fractionText || '').slice(0, 3)).padEnd(3, '0'));
const timestamp = tzText
? Date.parse(`${yearText}-${monthText}-${dayText}T${hourText}:${minuteText}:${String(second).padStart(2, '0')}.${String(millis).padStart(3, '0')}${tzText.toUpperCase()}`)
: new Date(year, month - 1, day, hour, minute, second, millis).getTime();
return Number.isFinite(timestamp) ? timestamp : null;
};
if (typeof value === 'object') {
if (value.dateTime) {
const parsedTimestamp = toDateTimeTimestamp(value.dateTime);
if (parsedTimestamp !== null) return `dt:${parsedTimestamp}`;
const ts = new Date(value.dateTime).getTime();
return Number.isFinite(ts) ? `dt:${ts}` : `dt:${String(value.dateTime)}`;
}
if (value.date) {
const day = this.normalizeEventTextValue(value.date);
return `d:${day}`;
}
}
const normalized = this.normalizeEventTextValue(value);
if (!normalized) return '';
if (/^\d{4}-\d{2}-\d{2}$/.test(normalized)) {
return `d:${normalized}`;
}
const parsedTimestamp = toDateTimeTimestamp(normalized);
if (parsedTimestamp !== null) return `dt:${parsedTimestamp}`;
const ts = new Date(normalized).getTime();
return Number.isFinite(ts) ? `dt:${ts}` : normalized;
}
getEventExactMatchKey(event) {
const start = this.getNormalizedEventTimeValue(event.start);
const end = this.getNormalizedEventTimeValue(event.end);
const summary = this.normalizeEventTextValue(event.summary);
const location = this.normalizeEventTextValue(event.location);
return `${start}|${end}|${summary}|${location}`;
}
combineDuplicateCalendarEvents(events) {
if (!this._config.combine_calendars) {
return events;
}
const groupedEvents = new Map();
events.forEach(event => {
const key = this.getEventExactMatchKey(event);
if (!groupedEvents.has(key)) {
groupedEvents.set(key, {
baseEvent: event,
calendars: [{ entityId: event.entityId, color: event.color }],
sourceEvents: [event]
});
return;
}
const grouped = groupedEvents.get(key);
if (!grouped.calendars.some(calendar => calendar.entityId === event.entityId)) {
grouped.calendars.push({ entityId: event.entityId, color: event.color });
}
grouped.sourceEvents.push(event);
});
return Array.from(groupedEvents.values()).flatMap(({ baseEvent, calendars, sourceEvents }) => {
if (calendars.length === 1) {
return sourceEvents;
}
return {
...baseEvent,
isCombinedCalendarEvent: true,
sourceCalendars: calendars,
sourceEntityIds: calendars.map(calendar => calendar.entityId),
sourceEvents,
entityId: calendars[0].entityId,
color: calendars[0].color
};
});
}
getVisibleCalendarColorsForEvent(event) {
const virtualCalendar = this.getVirtualBadgeForEvent(event);
if (virtualCalendar) {
const virtualSourceEntityIds = (Array.isArray(event?.sourceEntityIds) ? event.sourceEntityIds : [event?.entityId])
.filter((entityId) => virtualCalendar.entities.includes(entityId));
const hasVisibleVirtualSource = virtualSourceEntityIds.some((entityId) => !this._hiddenCalendars.has(entityId));
if (!hasVisibleVirtualSource) return [];
const fallbackColor = event?.color || this.normalizeSingleColor(this._config.colors[virtualCalendar.entities[0]]);
const virtualColor = virtualCalendar.color || fallbackColor;
if (event?.isCombinedCalendarEvent && Array.isArray(event.sourceCalendars)) {
const additionalColors = Array.from(new Set(event.sourceCalendars
.filter((calendar) => calendar?.entityId && !virtualCalendar.entities.includes(calendar.entityId))
.filter((calendar) => !this._hiddenCalendars.has(calendar.entityId))
.map((calendar) => calendar.color)
.filter(Boolean)));
if (additionalColors.length > 0) {
return [virtualColor, ...additionalColors];
}
}
return [virtualColor];
}
if (event.isCombinedCalendarEvent && Array.isArray(event.sourceEntityIds)) {
const hasVisibleSourceCalendar = event.sourceEntityIds.some((entityId) => !this._hiddenCalendars.has(entityId));
if (!hasVisibleSourceCalendar) {
return [];
}
} else if (this._hiddenCalendars.has(event.entityId)) {
return [];
}
const backgroundColors = this.getEventStyleOverrides(event)?.backgroundColors || [];
if (backgroundColors.length > 0) {
return backgroundColors;
}
if (event.isCombinedCalendarEvent && Array.isArray(event.sourceCalendars)) {
return event.sourceCalendars
.filter(calendar => !this._hiddenCalendars.has(calendar.entityId))
.map(calendar => calendar.color);
}
if (this._hiddenCalendars.has(event.entityId)) {
return [];
}
return [event.color];
}
getMatchedEventStyleRules(event) {
const configuredRules = Array.isArray(this._config?.event_styles) ? this._config.event_styles : [];
if (configuredRules.length === 0) return [];
return configuredRules.filter((rule) => this.matchesAdvancedRule(rule, { event }).matches);
}
getSingleEventStyleCandidates(event) {
const rules = this.getMatchedEventStyleRules(event);
const candidates = {};
rules.forEach((rule) => {
Object.entries(rule.output?.style || rule.style || {}).forEach(([key, value]) => {
if (value === undefined || value === null || value === '') return;
const existing = candidates[key];
if (!existing || rule.priority > existing.priority || (rule.priority === existing.priority && rule.index < existing.ruleIndex)) {
candidates[key] = { value, priority: rule.priority, ruleIndex: rule.index };
}
});
});
return candidates;
}
getEventStyleOverrides(event) {
if (!event) return null;
if (event.isCombinedCalendarEvent && Array.isArray(event.sourceEvents)) {
const visibleSources = event.sourceEvents.filter((sourceEvent) => !this._hiddenCalendars.has(sourceEvent.entityId));
if (visibleSources.length === 0) return null;
const sourceCandidates = visibleSources.map((sourceEvent, sourceIndex) => ({
sourceEvent,
sourceIndex,
candidates: this.getSingleEventStyleCandidates(sourceEvent)
}));
const explicitBackgroundColors = sourceCandidates
.map(({ candidates }) => candidates.background_color?.value)
.filter((color) => color !== undefined && color !== null && color !== '');
const backgroundColors = sourceCandidates.map(({ sourceEvent, candidates }) =>
candidates.background_color?.value || sourceEvent.color
);
const uniqueBackgroundCount = new Set(backgroundColors).size;
const hasDuplicateBackgroundColors = uniqueBackgroundCount !== backgroundColors.length;
const mergedOverrides = {};
const allStyleKeys = new Set(sourceCandidates.flatMap(({ candidates }) => Object.keys(candidates)));
allStyleKeys.delete('background_color');
allStyleKeys.forEach((styleKey) => {
let best = null;
sourceCandidates.forEach(({ candidates, sourceIndex }) => {
const candidate = candidates[styleKey];
if (!candidate) return;
const candidatePriority = Number.isFinite(candidate.priority) ? candidate.priority : 0;
if (!best || candidatePriority > best.priority || (candidatePriority === best.priority && sourceIndex < best.sourceIndex)) {
best = { ...candidate, priority: candidatePriority, sourceIndex };
}
});
if (best) mergedOverrides[styleKey] = best.value;
});
return {
...mergedOverrides,
backgroundColors,
hasDuplicateBackgroundColors,
hasExplicitBackgroundColor: explicitBackgroundColors.length > 0
};
}
const candidates = this.getSingleEventStyleCandidates(event);
const overrides = Object.entries(candidates).reduce((acc, [key, meta]) => {
acc[key] = meta.value;
return acc;
}, {});
overrides.backgroundColors = [overrides.background_color || event.color];
overrides.hasDuplicateBackgroundColors = false;
overrides.hasExplicitBackgroundColor = Object.prototype.hasOwnProperty.call(overrides, 'background_color');
return overrides;
}
isEventHiddenByStyle(event) {
return this.getEventStyleOverrides(event)?.hide === true;
}
createZebraStripeGradient(colors) {
if (colors.length === 1) {
return colors[0];
}
const configuredStripeWidth = Number(this._config?.combine_calendars_width);
const stripeWidthPx = Number.isFinite(configuredStripeWidth) && configuredStripeWidth > 0
? configuredStripeWidth
: 12;
const cycle = colors.map((color, index) => {
const start = index * stripeWidthPx;
const end = start + stripeWidthPx;
return `${color} ${start}px ${end}px`;
}).join(', ');
return `repeating-linear-gradient(135deg, ${cycle})`;
}
createVerticalBarsGradient(colors) {
const segments = colors.map((color, index) => {
const start = (index / colors.length) * 100;
const end = ((index + 1) / colors.length) * 100;
return `${color} ${start}% ${end}%`;
}).join(', ');
return `linear-gradient(to bottom, ${segments})`;
}
createDotsDecoration(colors, indicatorWidth) {
const safeWidth = Math.max(1, indicatorWidth);
const dotRadius = Math.max(2, Math.floor(safeWidth * 0.3));
const x = safeWidth / 2;
return colors
.map((color, index) => {
const y = (safeWidth / 2) + (index * safeWidth);
return `radial-gradient(circle at ${x}px ${y}px, ${color} 0 ${dotRadius}px, transparent ${dotRadius + 1}px)`;
})
.join(', ');
}
getCombinedBackgroundColor(visibleColors, fallbackColor) {
const primaryColor = visibleColors[0] || fallbackColor;
const option = this.normalizeCombineBackground(this._config?.combine_background);
if (option === DEFAULT_COMBINE_BACKGROUND) return primaryColor;
if (option === 'neutral') return DEFAULT_EVENT_NEUTRAL_BACKGROUND;
return option;
}
getEventNeutralBackgroundColor() {
const normalized = this.normalizeSingleColor(this._config?.event_neutral_background);
return normalized || DEFAULT_EVENT_NEUTRAL_BACKGROUND;
}
getEventTintBackgroundColor(primaryColor) {
const tintTransparency = this.normalizeBackgroundOpacity(this._config?.event_tint_opacity, DEFAULT_EVENT_TINT_OPACITY);
const tintOpacity = 1 - (tintTransparency / 100);
const baseRgb = this._isDarkMode
? { r: 42, g: 47, b: 54 }
: { r: 255, g: 255, b: 255 };
const primaryRgb = this.colorToRgb(primaryColor);
if (!primaryRgb) return this.colorWithAlpha(primaryColor, tintOpacity);
const composed = this.blendRgb(primaryRgb, baseRgb, tintOpacity);
return `rgb(${composed.r}, ${composed.g}, ${composed.b})`;
}
getEventColorBarWidth() {
const configuredWidth = Number(this._config?.event_color_bar_width);
if (Number.isFinite(configuredWidth) && configuredWidth > 0) return configuredWidth;
const combineWidth = Number(this._config?.combine_calendars_width);
if (Number.isFinite(combineWidth) && combineWidth > 0) return combineWidth;
return DEFAULT_EVENT_COLOR_BAR_WIDTH;
}
getEventBackgroundColor(event) {
const visibleColors = this.getVisibleCalendarColorsForEvent(event);
const primaryColor = visibleColors[0] || event?.color || '#3b82f6';
const eventColorMode = this.normalizeEventColorMode(this._config?.event_color_mode);
if (visibleColors.length <= 1) {
if (eventColorMode === 'left-neutral') {
return this.getEventNeutralBackgroundColor();
}
if (eventColorMode === 'left-tint') {
return this.getEventTintBackgroundColor(primaryColor);
}
return primaryColor;
}
return this.getCombinedBackgroundColor(visibleColors, primaryColor);
}
getContractColor(backgroundColor) {
return getContrastColor(backgroundColor, {
colorToRgb: this.colorToRgb.bind(this)
});
}
getIndicatorColors(visibleColors, combineStyle, combineBackgroundOption) {
if ((combineStyle === 'bars' || combineStyle === 'dots') && combineBackgroundOption === 'primary') {
return visibleColors.slice(1);
}
return visibleColors;
}
getEventStyle(event, { withBorderAccent = false } = {}) {
const styleOverrides = this.getEventStyleOverrides(event);
const virtualCalendar = this.getVirtualBadgeForEvent(event);
const virtualColor = virtualCalendar
? (virtualCalendar.color || event?.color || this.normalizeSingleColor(this._config.colors[virtualCalendar.entities[0]]))
: null;
const resolvedVisibleColors = this.getVisibleCalendarColorsForEvent(event);
const virtualExplicitColors = virtualCalendar && styleOverrides?.hasExplicitBackgroundColor
? Array.from(new Set((styleOverrides.backgroundColors || []).filter(Boolean)))
: null;
const visibleColors = virtualExplicitColors?.length
? virtualExplicitColors
: (virtualCalendar
? resolvedVisibleColors
: (styleOverrides?.backgroundColors?.length ? styleOverrides.backgroundColors : resolvedVisibleColors));
const primaryColor = visibleColors[0] || event.color;
const shouldShowBorderAccent = withBorderAccent && visibleColors.length <= 1;
const borderStyle = shouldShowBorderAccent
? `border-left: 4px solid ${primaryColor};`
: 'border-left: none;';
const extraStyleParts = [];
const isMutedPastEvent = this._config?.past_event_mode === 'muted' && this.isPastEvent(event);
if (isMutedPastEvent && styleOverrides?.opacity === undefined) {
extraStyleParts.push('opacity: 0.55;');
}
if (isMutedPastEvent && styleOverrides?.filter === undefined) {
extraStyleParts.push('filter: grayscale(70%) saturate(45%);');
}
if (styleOverrides?.opacity !== undefined) {
extraStyleParts.push(`opacity: ${styleOverrides.opacity};`);
}
if (styleOverrides?.filter !== undefined) {
extraStyleParts.push(`filter: ${styleOverrides.filter};`);
}
const extraStyle = extraStyleParts.join(' ');
const finalizeStyle = (style) => `${style} ${extraStyle}`.trim();
const eventColorMode = this.normalizeEventColorMode(this._config?.event_color_mode);
if (visibleColors.length <= 1) {
if (eventColorMode === 'left-neutral') {
const barWidth = this.getEventColorBarWidth();
return finalizeStyle(`--combine-left-offset: ${barWidth}px; background-color: ${this.getEventNeutralBackgroundColor()}; background-image: linear-gradient(to right, ${primaryColor} 0 ${barWidth}px, transparent ${barWidth}px); background-size: ${barWidth}px 100%; background-position: left top; background-repeat: no-repeat; background-clip: padding-box; ${borderStyle}`);
}
if (eventColorMode === 'left-tint') {
const barWidth = this.getEventColorBarWidth();
return finalizeStyle(`--combine-left-offset: ${barWidth}px; background-color: ${this.getEventTintBackgroundColor(primaryColor)}; background-image: linear-gradient(to right, ${primaryColor} 0 ${barWidth}px, transparent ${barWidth}px); background-size: ${barWidth}px 100%; background-position: left top; background-repeat: no-repeat; background-clip: padding-box; ${borderStyle}`);
}
return finalizeStyle(`background-color: ${primaryColor}; background-image: none; background-clip: padding-box; ${borderStyle}`);
}
const combineStyle = this.normalizeCombineStyle(this._config?.combine_style);
const combineBackgroundOption = this.normalizeCombineBackground(this._config?.combine_background);
const backgroundColor = this.getCombinedBackgroundColor(visibleColors, primaryColor);
const indicatorWidth = Number(this._config?.combine_calendars_width) > 0
? Number(this._config.combine_calendars_width)
: 12;
const indicatorColors = this.getIndicatorColors(visibleColors, combineStyle, combineBackgroundOption);
const shouldShowCornerBadges = !!styleOverrides?.hasDuplicateBackgroundColors;
if (combineStyle === 'bars') {
const barsGradient = indicatorColors.length > 0 ? this.createVerticalBarsGradient(indicatorColors) : 'none';
const leftOffset = indicatorColors.length > 0 ? `--combine-left-offset: ${indicatorWidth}px;` : '--combine-left-offset: 0px;';
return finalizeStyle(`${leftOffset} background-color: ${backgroundColor}; background-image: ${barsGradient}; background-size: ${indicatorWidth}px 100%; background-position: left top; background-repeat: no-repeat; background-clip: padding-box; ${shouldShowCornerBadges ? '--combined-corner-bubbles: 1;' : ''} ${borderStyle}`);
}
if (combineStyle === 'dots') {
const dots = indicatorColors.length > 0 ? this.createDotsDecoration(indicatorColors, indicatorWidth) : 'none';
const leftOffset = indicatorColors.length > 0 ? `--combine-left-offset: ${indicatorWidth}px;` : '--combine-left-offset: 0px;';
return finalizeStyle(`${leftOffset} background-color: ${backgroundColor}; background-image: ${dots}; background-repeat: no-repeat; background-clip: padding-box; ${shouldShowCornerBadges ? '--combined-corner-bubbles: 1;' : ''} ${borderStyle}`);
}
const stripeGradient = this.createZebraStripeGradient(visibleColors);
return finalizeStyle(`--combine-left-offset: 0px; background-color: ${backgroundColor}; background-image: ${stripeGradient}; background-clip: padding-box; ${shouldShowCornerBadges ? '--combined-corner-bubbles: 1;' : ''} ${borderStyle}`);
}
getEventDateTimeInfo(event) {
return getEventDateTimeInfo(event, { parseCalendarDate: this.parseCalendarDate.bind(this) });
}
getLocalDateKey(date) {
const { year, month, day } = this.getDateParts(date);
return Date.UTC(year, month - 1, day);
}
eventSpansMultipleLocalDates(eventStart, eventEnd) {
return this.getLocalDateKey(eventStart) !== this.getLocalDateKey(eventEnd);
}
shouldRenderTimedEventAsAllDayInSchedule(eventStart, eventEnd) {
const durationMs = eventEnd.getTime() - eventStart.getTime();
return durationMs >= 86400000 && this.eventSpansMultipleLocalDates(eventStart, eventEnd);
}
getScheduleVisualInfo(event) {
return getScheduleVisualInfo(event, {
getEventDateTimeInfo: (infoEvent) => this.getEventDateTimeInfo(infoEvent),
shouldRenderTimedEventAsAllDayInSchedule: (eventStart, eventEnd) => this.shouldRenderTimedEventAsAllDayInSchedule(eventStart, eventEnd),
shouldShowEventTime: (timeEvent) => this.shouldShowEventTime(timeEvent),
formatEventTime: (date, options) => this.formatEventTime(date, options),
translate: (key, params) => this.t(key, params)
});
}
getEventDaySegment(event, date, options = {}) {
const scheduleVisualInfo = options.useScheduleVisualTreatment ? this.getScheduleVisualInfo(event) : null;
const { eventStart, eventEnd, isAllDay } = scheduleVisualInfo || this.getEventDateTimeInfo(event);
const rendersAsAllDay = scheduleVisualInfo?.rendersAsAllDay || isAllDay;
const { dayStart, nextDayStart } = this.getDayBounds(date);
if (eventEnd <= dayStart || eventStart >= nextDayStart) {
return null;
}
const segmentStart = new Date(Math.max(eventStart.getTime(), dayStart.getTime()));
const segmentEnd = new Date(Math.min(eventEnd.getTime(), nextDayStart.getTime()));
const isAllDaySegment = rendersAsAllDay || (
segmentStart.getTime() === dayStart.getTime() &&
segmentEnd.getTime() === nextDayStart.getTime()
);
return {
eventStart,
eventEnd,
segmentStart,
segmentEnd,
isAllDay,
isAllDaySegment,
startsOnDay: eventStart >= dayStart && eventStart < nextDayStart,
endsOnDay: eventEnd > dayStart && eventEnd <= nextDayStart,
displayTitle: scheduleVisualInfo?.displayTitle || event.summary || this.t('untitledEvent'),
rendersAsAllDay
};
}
sortEventsForDate(events, date) {
return [...events].sort((a, b) => {
const aSegment = this.getEventDaySegment(a, date);
const bSegment = this.getEventDaySegment(b, date);
if (!aSegment && !bSegment) return 0;
if (!aSegment) return 1;
if (!bSegment) return -1;
if (aSegment.isAllDaySegment && !bSegment.isAllDaySegment) return -1;
if (!aSegment.isAllDaySegment && bSegment.isAllDaySegment) return 1;
return aSegment.segmentStart - bSegment.segmentStart;
});
}
getEventsForDay(date, { includeHiddenStyledEvents = false } = {}) {
const sourceEvents = this.combineDuplicateCalendarEvents(this._events);
return sourceEvents.filter(event => {
if (this.getVisibleCalendarColorsForEvent(event).length === 0) {
return false;
}
if (!includeHiddenStyledEvents && this.isEventHiddenByStyle(event)) {
return false;
}
if (this._config.past_event_mode === 'hide' && this.isPastEvent(event)) {
return false;
}
return this.getEventDaySegment(event, date) !== null;
});
}
isPastEvent(event) {
if (!event) return false;
const { eventEnd } = this.getEventDateTimeInfo(event);
return eventEnd < new Date();
}
isCurrentDayInViewableRange() {
const { startDate, endDate } = this.getVisibleDateRange();
const now = new Date();
return now >= startDate && now <= endDate;
}
shouldDisablePreviousNavigation() {
return this._config.past_event_mode === 'hide' && this.isCurrentDayInViewableRange();
}
canNavigateToPreviousPeriod() {
return !this.shouldDisablePreviousNavigation();
}
attachEventListeners() {
const prevButton = this.getRootElementById('prev-period');
const nextButton = this.getRootElementById('next-period');
const todayButton = this.getRootElementById('today');
const addEventButton = this.getRootElementById('add-event-btn');
const themeToggleButton = this.getRootElementById('theme-toggle');
const dashboardNavButton = this.getRootElementById('header-dashboard-btn');
const modal = this.getRootElementById('event-modal');
const agendaContainer = this.getRootElementById('agenda-container');
this.observeModalVisibility(modal);
// View mode selector
const viewModeSelect = this.getRootElementById('view-mode-select');
viewModeSelect?.addEventListener('change', () => {
this._viewMode = viewModeSelect.value;
if (this._viewMode === 'agenda') {
this.resetAgendaWindowToToday();
} else {
this.setWeekStart();
}
this.ensureEventsForCurrentRange({ renderIfCovered: true });
});
const calendarBadgesStrip = this._root.querySelector('.calendar-badges');
if (calendarBadgesStrip) {
calendarBadgesStrip.addEventListener('scroll', () => this.updateCalendarBadgesScrollState(), { passive: true });
}
// Calendar badge toggle (both regular and inline)
this._root.querySelectorAll('.calendar-badge, .calendar-badge-inline').forEach(badge => {
badge.addEventListener('click', (e) => {
const entityId = badge.getAttribute('data-entity');
const virtualBadge = entityId?.startsWith('virtual:')
? this.getVirtualBadgeById(entityId.replace('virtual:', ''))
: null;
const targetEntities = virtualBadge ? virtualBadge.entities : [entityId];
const allHidden = targetEntities.every((targetEntityId) => this._hiddenCalendars.has(targetEntityId));
targetEntities.forEach((targetEntityId) => {
if (allHidden) {
this._hiddenCalendars.delete(targetEntityId);
} else {
this._hiddenCalendars.add(targetEntityId);
}
});
this.persistPreferences();
this.renderPreservingAgendaScroll();
});
});
// Add event button
addEventButton?.addEventListener('click', () => {
this.showCreateEventModal();
});
themeToggleButton?.addEventListener('click', () => {
this.applyThemeMode(this._isDarkMode ? 'light' : 'dark');
this.persistPreferences();
this.render();
});
dashboardNavButton?.addEventListener('click', () => this.navigateToConfiguredDashboard());
prevButton?.addEventListener('click', () => this.navigateToPreviousPeriod());
nextButton?.addEventListener('click', () => this.navigateToNextPeriod());
todayButton?.addEventListener('click', () => {
if (this._viewMode === 'agenda') {
this.resetAgendaWindowToToday();
} else {
this._currentDate = new Date();
}
if (this._viewMode !== 'agenda' && this.getRollingDaysForView() === null) {
this.setWeekStart();
}
this.ensureEventsForCurrentRange({ renderIfCovered: true });
});
agendaContainer?.addEventListener('scroll', async () => {
if (this._viewMode !== 'agenda' || this._agendaScrollLoadLock || this._agendaSuppressScrollHandling) return;
this.updateAgendaVisibleDateRangeFromDom();
const threshold = 80;
const nearBottom = agendaContainer.scrollTop + agendaContainer.clientHeight >= agendaContainer.scrollHeight - threshold;
const nearTop = agendaContainer.scrollTop <= threshold;
const canLoadPastAgendaDays = this.canNavigateToPreviousPeriod();
const isRollingAgendaMode = this.getAgendaRollingDays() !== null;
if (isRollingAgendaMode) return;
if (!nearBottom && !(nearTop && canLoadPastAgendaDays)) return;
this._agendaScrollLoadLock = true;
const previousScrollHeight = agendaContainer.scrollHeight;
if (nearBottom) {
this._agendaPendingScrollTop = agendaContainer.scrollTop;
this._agendaEndDate.setDate(this._agendaEndDate.getDate() + this._agendaDaysPerScrollLoad);
} else if (nearTop && canLoadPastAgendaDays) {
this._agendaPendingScrollTop = null;
this._agendaStartDate.setDate(this._agendaStartDate.getDate() - this._agendaDaysPerScrollLoad);
}
await this.ensureEventsForCurrentRange({ renderIfCovered: true });
if (nearTop && canLoadPastAgendaDays) {
const updatedContainer = this.getRootElementById('agenda-container');
if (updatedContainer) {
this.setAgendaScrollTopWithoutTriggeringLoad(
updatedContainer,
updatedContainer.scrollHeight - previousScrollHeight + threshold
);
}
}
this._agendaScrollLoadLock = false;
}, { passive: true });
this.attachSwipeControls();
// Event click handlers for all view modes
this._root.querySelectorAll('.event, .week-compact-event, .week-standard-event, .all-day-event, .agenda-event').forEach(eventEl => {
eventEl.addEventListener('click', (e) => {
e.stopPropagation();
const eventData = JSON.parse(eventEl.getAttribute('data-event'));
this.showEventModal(eventData);
});
});
// +N more click handlers (month view)
this._root.querySelectorAll('.more-events').forEach(moreEl => {
moreEl.addEventListener('click', (e) => {
e.stopPropagation();
const dayEl = moreEl.closest('.day-cell');
if (!dayEl) return;
const date = new Date(dayEl.getAttribute('data-date'));
const events = this.getEventsForDay(date);
if (events.length > 0) {
this.showDayCompactModal(date, events);
}
});
});
// Day click handlers (month view only)
this._root.querySelectorAll('.day-cell').forEach(dayEl => {
dayEl.addEventListener('click', (e) => {
// Don't open if clicking on an event
if (e.target.classList.contains('event') || e.target.closest('.event')) {
return;
}
const date = new Date(dayEl.getAttribute('data-date'));
// If event management is enabled, show create modal
if (this._config.enable_event_management && this.getWritableCalendars().length > 0) {
this.showCreateEventModal(date);
} else {
// Otherwise show events for that day
const events = this.getEventsForDay(date);
if (events.length > 0) {
this.showDayModal(date, events);
}
}
});
});
// Day row click handlers (agenda view)
this._root.querySelectorAll('.agenda-day-row').forEach(rowEl => {
rowEl.addEventListener('click', (e) => {
// Don't open if clicking on an event
if (e.target.classList.contains('agenda-event') || e.target.closest('.agenda-event')) {
return;
}
if (!this._config.enable_event_management || this.getWritableCalendars().length === 0) {
return;
}
const date = new Date(rowEl.getAttribute('data-date'));
this.showCreateEventModal(date);
});
});
// Time slot click handlers (schedule view)
this._root.querySelectorAll('.day-time-slot').forEach(slotEl => {
slotEl.addEventListener('click', (e) => {
if (!this._config.enable_event_management || this.getWritableCalendars().length === 0) {
return;
}
// Get the date and hour from the parent column
const column = slotEl.closest('.week-standard-day-column');
const date = new Date(column.getAttribute('data-date'));
const hour = parseInt(slotEl.getAttribute('data-hour'));
// Set the time on the date
date.setHours(hour, 0, 0, 0);
this.showCreateEventModal(date, date);
});
});
// Day header click handlers (week views)
this._root.querySelectorAll('[data-click-target="day-header"]').forEach(headerEl => {
headerEl.addEventListener('click', (e) => {
if (!this._config.enable_event_management || this.getWritableCalendars().length === 0) {
return;
}
const column = headerEl.closest('[data-date]');
const date = new Date(column.getAttribute('data-date'));
this.showCreateEventModal(date);
});
});
// Modal close
modal?.addEventListener('click', (e) => {
if (e.target === modal) {
if (this._activeModalBackHandler) {
const backHandler = this._activeModalBackHandler;
this._activeModalBackHandler = null;
backHandler();
} else {
modal.classList.remove('show');
}
}
});
}
updateEventModalOpenState(modal = this.getRootElementById('event-modal')) {
const isOpen = !!modal && modal.classList.contains('show');
this.classList?.toggle('event-modal-open', isOpen);
if (!isOpen) {
this.flushPendingHostResizeRender();
}
}
observeModalVisibility(modal) {
if (this._modalVisibilityObserver) {
this._modalVisibilityObserver.disconnect();
this._modalVisibilityObserver = null;
}
this.updateEventModalOpenState(modal);
if (!modal) return;
this._modalVisibilityObserver = new MutationObserver(() => {
this.updateEventModalOpenState(modal);
if (!this.isEventManagementDialogOpen()) {
this.flushPendingHeaderTimeRender();
}
});
this._modalVisibilityObserver.observe(modal, {
attributes: true,
attributeFilter: ['class']
});
}
flushPendingHeaderTimeRender() {
if (!this._pendingHeaderSensorRender) return;
this._pendingHeaderSensorRender = false;
this.renderPreservingAgendaScroll();
}
navigateToPreviousPeriod() {
if (!this.canNavigateToPreviousPeriod()) {
return;
}
if (this._viewMode === 'agenda') {
this.ensureAgendaWindowInitialized();
const rollingDays = this.getAgendaRollingDays();
const backwardDays = rollingDays !== null
? rollingDays + 1
: this.getAgendaViewportDayCapacity();
this._agendaStartDate.setDate(this._agendaStartDate.getDate() - backwardDays);
this._agendaStartDate.setHours(0, 0, 0, 0);
this._agendaEndDate.setDate(this._agendaEndDate.getDate() - backwardDays);
this._agendaEndDate.setHours(23, 59, 59, 999);
} else if (this._viewMode === 'month') {
if (this._config.rolling_weeks !== null) {
// In rolling weeks mode, go back by the number of weeks shown
const weeksToAdvance = this._config.rolling_weeks + 1;
this._currentDate.setDate(this._currentDate.getDate() - (weeksToAdvance * 7));
} else {
// Standard month navigation
this._currentDate.setMonth(this._currentDate.getMonth() - 1);
}
} else {
// In rolling-days mode, advance by rolling days + 1, otherwise by 7
const rollingDays = this.getRollingDaysForView();
const daysToAdvance = rollingDays !== null
? rollingDays + 1
: 7;
this._currentDate.setDate(this._currentDate.getDate() - daysToAdvance);
if (rollingDays === null) {
this.setWeekStart();
}
}
this.ensureEventsForCurrentRange({ renderIfCovered: true });
}
navigateToConfiguredDashboard() {
const dashboardPath = this.getConfiguredDashboardPath();
if (!dashboardPath) return;
if (this._hass && typeof this._hass.navigate === 'function') {
this._hass.navigate(dashboardPath);
return;
}
window.history.pushState(null, '', dashboardPath);
window.dispatchEvent(new Event('location-changed'));
}
navigateToNextPeriod() {
if (this._viewMode === 'agenda') {
this.ensureAgendaWindowInitialized();
const rollingDays = this.getAgendaRollingDays();
const dayMs = 24 * 60 * 60 * 1000;
const windowSpanDays = rollingDays !== null
? rollingDays
: Math.max(0, Math.round((this._agendaEndDate.getTime() - this._agendaStartDate.getTime()) / dayMs));
const visibleRangeFromDom = this.getAgendaVisibleDateRangeFromDom();
const visibleRangeFromCache = this._agendaVisibleStartDate && this._agendaVisibleEndDate
? { startDate: this._agendaVisibleStartDate, endDate: this._agendaVisibleEndDate }
: null;
const visibleRange = visibleRangeFromDom || (
this.isAgendaRangeWithinCurrentWindow(visibleRangeFromCache) ? visibleRangeFromCache : null
);
const targetStart = rollingDays !== null
? new Date(this._agendaStartDate)
: (visibleRange ? new Date(visibleRange.endDate) : new Date(this._agendaEndDate));
targetStart.setHours(0, 0, 0, 0);
if (rollingDays !== null) {
targetStart.setDate(targetStart.getDate() + rollingDays + 1);
}
const targetEnd = new Date(targetStart);
targetEnd.setDate(targetEnd.getDate() + windowSpanDays);
targetEnd.setHours(23, 59, 59, 999);
this._agendaStartDate = targetStart;
this._agendaEndDate = targetEnd;
} else if (this._viewMode === 'month') {
if (this._config.rolling_weeks !== null) {
// In rolling weeks mode, go forward by the number of weeks shown
const weeksToAdvance = this._config.rolling_weeks + 1;
this._currentDate.setDate(this._currentDate.getDate() + (weeksToAdvance * 7));
} else {
// Standard month navigation
this._currentDate.setMonth(this._currentDate.getMonth() + 1);
}
} else {
// In rolling-days mode, advance by rolling days + 1, otherwise by 7
const rollingDays = this.getRollingDaysForView();
const daysToAdvance = rollingDays !== null
? rollingDays + 1
: 7;
this._currentDate.setDate(this._currentDate.getDate() + daysToAdvance);
if (rollingDays === null) {
this.setWeekStart();
}
}
this.ensureEventsForCurrentRange({ renderIfCovered: true });
}
shouldEnableSwipeControls() {
return !this._config.disable_swipe_controls && this._viewMode !== 'agenda';
}
canTriggerSwipePeriodNavigation(deltaX) {
if (this._viewMode !== 'week-standard') {
return true;
}
const scheduleContainer = this._root?.querySelector('.week-standard-container');
if (!scheduleContainer) {
return true;
}
const maxScrollLeft = Math.max(0, scheduleContainer.scrollWidth - scheduleContainer.clientWidth);
if (maxScrollLeft <= 1) {
return true;
}
const edgeTolerance = 2;
const isAtLeftEdge = scheduleContainer.scrollLeft <= edgeTolerance;
const isAtRightEdge = scheduleContainer.scrollLeft >= (maxScrollLeft - edgeTolerance);
// Swipe left should only paginate when the schedule is already fully scrolled right.
if (deltaX < 0) {
return isAtRightEdge;
}
// Swipe right should only paginate when the schedule is already fully scrolled left.
return isAtLeftEdge;
}
attachSwipeControls() {
if (!this._root) return;
const container = this._root.querySelector('.calendar-container');
if (!container) return;
const swipeThreshold = 48;
const maxVerticalDrift = 40;
container.addEventListener('touchstart', (event) => {
if (!this.shouldEnableSwipeControls() || event.touches.length !== 1) return;
const touch = event.touches[0];
this._swipeStartX = touch.clientX;
this._swipeStartY = touch.clientY;
this._swipeTracking = true;
const eventTarget = event.target instanceof Element ? event.target : null;
this._swipeStartedOnInteractive = !!eventTarget?.closest('button, select, input, textarea, .event, .week-compact-event, .week-standard-event, .all-day-event');
}, { passive: true });
container.addEventListener('touchend', (event) => {
if (!this._swipeTracking || !this.shouldEnableSwipeControls() || event.changedTouches.length !== 1) return;
if (this._swipeStartedOnInteractive) {
this._swipeTracking = false;
this._swipeStartedOnInteractive = false;
return;
}
const touch = event.changedTouches[0];
const deltaX = touch.clientX - this._swipeStartX;
const deltaY = touch.clientY - this._swipeStartY;
if (Math.abs(deltaX) >= swipeThreshold && Math.abs(deltaY) <= maxVerticalDrift) {
if (this.canTriggerSwipePeriodNavigation(deltaX)) {
if (deltaX < 0) {
this.navigateToNextPeriod();
} else if (this.canNavigateToPreviousPeriod()) {
this.navigateToPreviousPeriod();
}
}
}
this._swipeTracking = false;
this._swipeStartedOnInteractive = false;
}, { passive: true });
container.addEventListener('touchcancel', () => {
this._swipeTracking = false;
this._swipeStartedOnInteractive = false;
}, { passive: true });
}
getRecurrenceWeekdayOptions() {
return [
{ key: 'MO', label: 'Mon' },
{ key: 'TU', label: 'Tue' },
{ key: 'WE', label: 'Wed' },
{ key: 'TH', label: 'Thu' },
{ key: 'FR', label: 'Fri' },
{ key: 'SA', label: 'Sat' },
{ key: 'SU', label: 'Sun' }
];
}
buildRRuleFromInputs({ frequency, interval, untilDate, count, byDay }) {
return buildRRuleFromInputs({ frequency, interval, untilDate, count, byDay });
}
parseRRule(rrule = '') {
const parsed = {
frequency: 'DAILY',
interval: '1',
count: '',
untilDate: '',
byDay: []
};
if (!rrule || typeof rrule !== 'string') {
return parsed;
}
const ruleWithoutPrefix = rrule.replace(/^RRULE:/i, '');
const segments = ruleWithoutPrefix.split(';');
segments.forEach((segment) => {
const [rawKey, rawValue] = segment.split('=');
const key = (rawKey || '').toUpperCase();
const value = (rawValue || '').trim();
if (!key || !value) {
return;
}
if (key === 'FREQ') {
parsed.frequency = value.toUpperCase();
} else if (key === 'INTERVAL') {
parsed.interval = value;
} else if (key === 'COUNT') {
parsed.count = value;
} else if (key === 'BYDAY') {
parsed.byDay = value.split(',').map((day) => day.trim()).filter(Boolean);
} else if (key === 'UNTIL') {
const untilCompact = value.replace(/Z$/, '');
if (/^\d{8}/.test(untilCompact)) {
parsed.untilDate = `${untilCompact.slice(0, 4)}-${untilCompact.slice(4, 6)}-${untilCompact.slice(6, 8)}`;
}
}
});
return parsed;
}
getRecurrenceEndMode(recurrenceData = {}) {
if (recurrenceData.count) return 'after';
if (recurrenceData.untilDate) return 'on';
return 'never';
}
syncRecurrenceEndInputs() {
const selected = this._root.querySelector('input[name="event-recurrence-end-mode"]:checked')?.value || 'never';
const untilInput = this.getRootElementById('event-recurrence-until');
const countInput = this.getRootElementById('event-recurrence-count');
if (!untilInput || !countInput) return;
if (selected === 'on') {
untilInput.disabled = false;
countInput.disabled = true;
countInput.value = '';
} else if (selected === 'after') {
untilInput.disabled = true;
untilInput.value = '';
countInput.disabled = false;
} else {
untilInput.disabled = true;
untilInput.value = '';
countInput.disabled = true;
countInput.value = '';
}
}
setupStartEndDurationSync({ startInputId, endInputId, isDateOnly = false }) {
const startInput = this.getRootElementById(startInputId);
const endInput = this.getRootElementById(endInputId);
if (!startInput || !endInput) return;
const toDate = (value) => {
if (!value) return null;
return isDateOnly ? this.parseLocalDate(value) : this.parsePossiblyLocalDateTime(value);
};
const fromDate = (date) => {
if (!(date instanceof Date) || Number.isNaN(date.getTime())) return '';
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
if (isDateOnly) {
return `${year}-${month}-${day}`;
}
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
return `${year}-${month}-${day}T${hours}:${minutes}`;
};
let durationMs = 0;
const recalculateDuration = () => {
const start = toDate(startInput.value);
const end = toDate(endInput.value);
if (!start || !end) return;
durationMs = end.getTime() - start.getTime();
};
recalculateDuration();
startInput.addEventListener('change', () => {
const nextStart = toDate(startInput.value);
if (!nextStart) return;
const nextEnd = new Date(nextStart.getTime() + durationMs);
endInput.value = fromDate(nextEnd);
});
endInput.addEventListener('change', recalculateDuration);
}
resolveTimedEventRange(startValue, endValue, fallbackDurationMs = 60 * 60 * 1000) {
return resolveTimedEventRange(startValue, endValue, fallbackDurationMs);
}
showCreateEventModal(defaultDate = null, defaultTime = null, options = {}) {
const modal = this.getRootElementById('event-modal');
const content = this.getRootElementById('modal-content');
this.applyEventModalSizeClass(content);
const writableCalendars = this.getWritableCalendars();
if (writableCalendars.length === 0) {
this.showError(this.t('noWritableCalendars'));
return;
}
const prefill = options?.prefill || null;
const selectedCalendarIds = Array.isArray(options?.selectedCalendarIds)
? options.selectedCalendarIds.filter((entityId) => writableCalendars.includes(entityId))
: [];
// Set defaults
const now = new Date();
const startDate = prefill?.startDate ? new Date(prefill.startDate) : (defaultDate ? new Date(defaultDate) : now);
const hasExplicitDefaultTime = defaultTime instanceof Date || !!prefill?.startDate;
const startTime = hasExplicitDefaultTime ? new Date(prefill?.startDate || defaultTime) : new Date(startDate);
// Round to next half hour for timed events
if (!hasExplicitDefaultTime && (!defaultDate || defaultDate.getHours() !== 0)) {
const minutes = startTime.getMinutes();
if (minutes < 30) {
startTime.setMinutes(30);
} else {
startTime.setHours(startTime.getHours() + 1);
startTime.setMinutes(0);
}
}
startTime.setSeconds(0);
startTime.setMilliseconds(0);
// End time is 1 hour after start (for timed events)
const endTime = prefill?.endDate ? new Date(prefill.endDate) : new Date(startTime);
if (!prefill?.endDate) {
endTime.setHours(endTime.getHours() + 1);
}
// For all-day events, show same day to user (we'll add +1 when submitting)
const endDate = prefill?.endDate ? new Date(prefill.endDate) : new Date(startDate);
const recurrenceData = this.parseRRule(prefill?.rrule || '');
const isPrefilledRecurring = !!prefill?.rrule;
const isPrefilledAllDay = !!prefill?.isAllDay;
content.innerHTML = renderCreateEventForm({
writableCalendars,
selectedCalendarIds,
prefill,
startDate,
startTime,
endDate,
endTime,
recurrenceData,
isPrefilledRecurring,
isPrefilledAllDay,
recurrenceEndMode: this.getRecurrenceEndMode(recurrenceData),
recurrenceWeekdayOptions: this.getRecurrenceWeekdayOptions(),
helpers: {
escapeHtml: (value) => this.escapeHtml(value),
escapeHtmlAttribute: (value) => this.escapeHtmlAttribute(value),
getCalendarName: (entityId) => this.getCalendarName(entityId),
t: (key) => this.t(key)
}
});
modal.classList.add('show');
// Event listeners
const form = this.getRootElementById('create-event-form');
const allDayCheckbox = this.getRootElementById('event-all-day');
const recurringCheckbox = this.getRootElementById('event-recurring');
const recurrenceFrequency = this.getRootElementById('event-recurrence-frequency');
const timedFields = this.getRootElementById('timed-event-fields');
const allDayFields = this.getRootElementById('all-day-event-fields');
const recurringFields = this.getRootElementById('recurring-event-fields');
const recurrenceWeekdaysGroup = this.getRootElementById('event-recurrence-weekdays-group');
const recurrenceEndModeInputs = this._root.querySelectorAll('input[name="event-recurrence-end-mode"]');
const errorDiv = this.getRootElementById('form-error');
// Toggle all-day fields
allDayCheckbox.addEventListener('change', () => {
if (allDayCheckbox.checked) {
timedFields.style.display = 'none';
allDayFields.style.display = 'block';
} else {
timedFields.style.display = 'block';
allDayFields.style.display = 'none';
}
});
const updateRecurringFrequencyVisibility = () => {
recurrenceWeekdaysGroup.style.display = recurrenceFrequency.value === 'WEEKLY' ? 'block' : 'none';
};
recurringCheckbox.addEventListener('change', () => {
recurringFields.style.display = recurringCheckbox.checked ? 'block' : 'none';
});
recurrenceFrequency.addEventListener('change', updateRecurringFrequencyVisibility);
recurrenceEndModeInputs.forEach((input) => input.addEventListener('change', () => this.syncRecurrenceEndInputs()));
updateRecurringFrequencyVisibility();
this.syncRecurrenceEndInputs();
this.setupStartEndDurationSync({ startInputId: 'event-start', endInputId: 'event-end' });
this.setupStartEndDurationSync({ startInputId: 'event-start-date', endInputId: 'event-end-date', isDateOnly: true });
// Close button
this.getRootElementById('close-modal').addEventListener('click', () => {
this._combinedEditTargets = null;
this._combinedDeleteTargets = null;
modal.classList.remove('show');
});
// Cancel button
this.getRootElementById('cancel-btn').addEventListener('click', () => {
this._combinedEditTargets = null;
this._combinedDeleteTargets = null;
modal.classList.remove('show');
});
// Form submission
form.addEventListener('submit', async (e) => {
e.preventDefault();
const selectedCalendarIds = Array.from(this._root.querySelectorAll('.create-event-calendar:checked'))
.map((input) => input.value);
const title = this.getRootElementById('event-title').value.trim();
const isAllDay = this.getRootElementById('event-all-day').checked;
const location = this.getRootElementById('event-location').value.trim();
const description = this.getRootElementById('event-description').value.trim();
if (selectedCalendarIds.length === 0) {
this.showFormError(errorDiv, this.t('noWritableCalendars'));
return;
}
const formResult = normalizeEventFormData({
title,
location,
description,
isAllDay,
startDate: this.getRootElementById('event-start-date').value,
endDate: this.getRootElementById('event-end-date').value,
startDateTime: this.getRootElementById('event-start').value,
endDateTime: this.getRootElementById('event-end').value
});
if (!formResult.valid) {
this.showFormError(errorDiv, this.t(formResult.errorKey));
return;
}
let eventData = formResult.eventData;
if (recurringCheckbox.checked) {
const frequency = this.getRootElementById('event-recurrence-frequency').value;
const interval = this.getRootElementById('event-recurrence-interval').value;
const untilDateRaw = this.getRootElementById('event-recurrence-until').value;
const recurrenceCountRaw = this.getRootElementById('event-recurrence-count').value;
const recurrenceEndMode = this._root.querySelector('input[name="event-recurrence-end-mode"]:checked')?.value || 'never';
const untilDate = recurrenceEndMode === 'on' ? untilDateRaw : '';
const recurrenceCount = recurrenceEndMode === 'after' ? recurrenceCountRaw : '';
const byDay = Array.from(this._root.querySelectorAll('.event-recurrence-weekday:checked')).map((el) => el.value);
const recurrenceResult = normalizeEventFormData({
title,
location,
description,
isAllDay,
startDate: this.getRootElementById('event-start-date').value,
endDate: this.getRootElementById('event-end-date').value,
startDateTime: this.getRootElementById('event-start').value,
endDateTime: this.getRootElementById('event-end').value,
recurrence: {
enabled: true,
frequency,
interval,
untilDate,
count: recurrenceCount,
byDay
}
});
if (!recurrenceResult.valid) {
this.showFormError(errorDiv, this.t(recurrenceResult.errorKey));
return;
}
eventData = recurrenceResult.eventData;
}
// Disable submit button
const submitBtn = this.getRootElementById('submit-btn');
submitBtn.disabled = true;
submitBtn.textContent = this.t('creating');
try {
await Promise.all(selectedCalendarIds.map((calendarId) => this.createEvent(calendarId, eventData)));
this._combinedDeleteTargets = null;
this._combinedDeleteTargets = null;
modal.classList.remove('show');
// Refresh events
this._lastFetch = null;
await this.updateEvents({ preserveScroll: this._viewMode === 'agenda' });
} catch (error) {
console.error('Failed to create event:', error);
this.showFormError(errorDiv, error.message || this.t('failedCreateEvent'));
submitBtn.disabled = false;
submitBtn.textContent = this.t('createEvent');
}
});
// Focus on title input
setTimeout(() => {
this.getRootElementById('event-title')?.focus();
}, 100);
}
showEditEventModal(event, startDate, endDate, isAllDay, editScope = 'this') {
const modal = this.getRootElementById('event-modal');
const content = this.getRootElementById('modal-content');
this.applyEventModalSizeClass(content);
const writableCalendars = this.getWritableCalendars();
if (writableCalendars.length === 0) {
this.showError(this.t('noWritableCalendars'));
return;
}
const selectedEditTargets = Array.isArray(this._combinedEditTargets) && this._combinedEditTargets.length > 0
? this._combinedEditTargets
: null;
const selectedCombinedCalendarIds = selectedEditTargets
? Array.from(new Set(selectedEditTargets.map(target => target.entityId))).filter((entityId) => writableCalendars.includes(entityId))
: [];
const visibleCalendarOptions = selectedCombinedCalendarIds.length > 0 ? selectedCombinedCalendarIds : writableCalendars;
const recurrenceData = this.parseRRule(event.rrule || '');
const isRecurring = !!event.rrule;
const isSingleOccurrenceEdit = editScope === 'this' && isRecurring;
const recurringSelectedByDefault = isRecurring && !isSingleOccurrenceEdit;
content.innerHTML = renderEditEventForm({
event,
startDate,
endDate,
isAllDay,
visibleCalendarOptions,
selectedCombinedCalendarIds,
recurrenceData,
recurringSelectedByDefault,
recurrenceEndMode: this.getRecurrenceEndMode(recurrenceData),
recurrenceWeekdayOptions: this.getRecurrenceWeekdayOptions(),
helpers: {
escapeHtml: (value) => this.escapeHtml(value),
escapeHtmlAttribute: (value) => this.escapeHtmlAttribute(value),
getCalendarName: (entityId) => this.getCalendarName(entityId),
t: (key) => this.t(key)
}
});
modal.classList.add('show');
// Event listeners
const form = this.getRootElementById('edit-event-form');
const allDayCheckbox = this.getRootElementById('event-all-day');
const recurringCheckbox = this.getRootElementById('event-recurring');
const recurrenceFrequency = this.getRootElementById('event-recurrence-frequency');
const timedFields = this.getRootElementById('timed-event-fields');
const allDayFields = this.getRootElementById('all-day-event-fields');
const recurringFields = this.getRootElementById('recurring-event-fields');
const recurrenceWeekdaysGroup = this.getRootElementById('event-recurrence-weekdays-group');
const recurrenceEndModeInputs = this._root.querySelectorAll('input[name="event-recurrence-end-mode"]');
const errorDiv = this.getRootElementById('form-error');
// Toggle all-day fields
allDayCheckbox.addEventListener('change', () => {
if (allDayCheckbox.checked) {
timedFields.style.display = 'none';
allDayFields.style.display = 'block';
} else {
timedFields.style.display = 'block';
allDayFields.style.display = 'none';
}
});
const updateRecurringFrequencyVisibility = () => {
recurrenceWeekdaysGroup.style.display = recurrenceFrequency.value === 'WEEKLY' ? 'block' : 'none';
};
recurringCheckbox.addEventListener('change', () => {
recurringFields.style.display = recurringCheckbox.checked ? 'block' : 'none';
});
recurrenceFrequency.addEventListener('change', updateRecurringFrequencyVisibility);
recurrenceEndModeInputs.forEach((input) => input.addEventListener('change', () => this.syncRecurrenceEndInputs()));
updateRecurringFrequencyVisibility();
this.syncRecurrenceEndInputs();
this.setupStartEndDurationSync({ startInputId: 'event-start', endInputId: 'event-end' });
this.setupStartEndDurationSync({ startInputId: 'event-start-date', endInputId: 'event-end-date', isDateOnly: true });
// Close button
this.getRootElementById('close-modal').addEventListener('click', () => {
this._combinedEditTargets = null;
this._combinedDeleteTargets = null;
modal.classList.remove('show');
});
// Cancel button
this.getRootElementById('cancel-btn').addEventListener('click', () => {
this._combinedEditTargets = null;
this._combinedDeleteTargets = null;
modal.classList.remove('show');
});
// Form submission
form.addEventListener('submit', async (e) => {
e.preventDefault();
const calendarId = this.getRootElementById('event-calendar').value;
const title = this.getRootElementById('event-title').value.trim();
const isAllDayChecked = this.getRootElementById('event-all-day').checked;
const location = this.getRootElementById('event-location').value.trim();
const description = this.getRootElementById('event-description').value.trim();
const formResult = normalizeEventFormData({
title,
location,
description,
isAllDay: isAllDayChecked,
startDate: this.getRootElementById('event-start-date').value,
endDate: this.getRootElementById('event-end-date').value,
startDateTime: this.getRootElementById('event-start').value,
endDateTime: this.getRootElementById('event-end').value,
fallbackDurationMs: Math.max(endDate.getTime() - startDate.getTime(), 60 * 1000)
});
if (!formResult.valid) {
this.showFormError(errorDiv, this.t(formResult.errorKey));
return;
}
let eventData = formResult.eventData;
if (recurringCheckbox.checked) {
const frequency = this.getRootElementById('event-recurrence-frequency').value;
const interval = this.getRootElementById('event-recurrence-interval').value;
const untilDateRaw = this.getRootElementById('event-recurrence-until').value;
const recurrenceCountRaw = this.getRootElementById('event-recurrence-count').value;
const recurrenceEndMode = this._root.querySelector('input[name="event-recurrence-end-mode"]:checked')?.value || 'never';
const untilDate = recurrenceEndMode === 'on' ? untilDateRaw : '';
const recurrenceCount = recurrenceEndMode === 'after' ? recurrenceCountRaw : '';
const byDay = Array.from(this._root.querySelectorAll('.event-recurrence-weekday:checked')).map((el) => el.value);
const recurrenceResult = normalizeEventFormData({
title,
location,
description,
isAllDay: isAllDayChecked,
startDate: this.getRootElementById('event-start-date').value,
endDate: this.getRootElementById('event-end-date').value,
startDateTime: this.getRootElementById('event-start').value,
endDateTime: this.getRootElementById('event-end').value,
fallbackDurationMs: Math.max(endDate.getTime() - startDate.getTime(), 60 * 1000),
recurrence: {
enabled: true,
frequency,
interval,
untilDate,
count: recurrenceCount,
byDay
}
});
if (!recurrenceResult.valid) {
this.showFormError(errorDiv, this.t(recurrenceResult.errorKey));
return;
}
eventData = recurrenceResult.eventData;
}
// Disable submit button
const submitBtn = this.getRootElementById('submit-btn');
submitBtn.disabled = true;
submitBtn.textContent = this.t('saving');
try {
const editTargets = Array.isArray(this._combinedEditTargets) && this._combinedEditTargets.length > 0
? this._combinedEditTargets
: [event];
for (const targetEvent of editTargets) {
const targetCalendarId = (editTargets.length > 1) ? targetEvent.entityId : calendarId;
await this.updateEvent(targetEvent, targetCalendarId, eventData, editScope);
}
this._combinedEditTargets = null;
this._combinedDeleteTargets = null;
modal.classList.remove('show');
// Refresh events
this._lastFetch = null;
await this.updateEvents({ preserveScroll: this._viewMode === 'agenda' });
} catch (error) {
console.error('Failed to update event:', error);
// Safety net: if edit was blocked by capability detection, still try create+delete.
// Some integrations misreport update/delete support even though create+delete works.
if (error.message === this.t('calendarNoModifyError')) {
try {
await this.createEvent(calendarId, eventData);
await this.deleteEvent(event.entityId, event.uid, event.recurrence_id);
modal.classList.remove('show');
this._lastFetch = null;
await this.updateEvents({ preserveScroll: this._viewMode === 'agenda' });
return;
} catch (fallbackError) {
console.error('Safety-net create+delete fallback failed:', fallbackError);
}
}
this._combinedEditTargets = null;
this._combinedDeleteTargets = null;
this.showFormError(errorDiv, error.message || this.t('failedUpdateEvent'));
submitBtn.disabled = false;
submitBtn.textContent = this.t('saveChanges');
}
});
// Focus on title input
setTimeout(() => {
this.getRootElementById('event-title')?.focus();
}, 100);
}
async updateEvent(originalEvent, newCalendarId, eventData, editScope = 'this') {
if (!this._hass) {
throw new Error(this.t('homeAssistantUnavailable'));
}
const capabilities = this._calendarCapabilities[originalEvent.entityId] || {};
// Check if we're moving to a different calendar
const movingCalendar = newCalendarId !== originalEvent.entityId;
if (!originalEvent.uid) {
throw new Error(this.t('missingUidError'));
}
const { isRecurringUpdate, recurrenceId, recurrenceRange } = getRecurringUpdateControls(originalEvent, eventData, editScope);
if (isRecurringUpdate && !movingCalendar && this._hass.connection?.sendMessagePromise) {
const wsPayload = buildUpdateEventWebSocketPayload(originalEvent, eventData, recurrenceId, recurrenceRange);
try {
await this._hass.connection.sendMessagePromise(wsPayload);
return;
} catch (error) {
console.error('Recurring update via WebSocket failed, falling back:', error?.message || error);
}
}
// If calendar supports UPDATE, we're not moving calendars, and service exists, use update service
const hasUpdateService = !!this._hass.services?.calendar?.update_event;
if (capabilities.canUpdate && !movingCalendar && hasUpdateService) {
try {
const serviceData = buildUpdateEventServiceData(originalEvent, eventData, recurrenceId, recurrenceRange);
await this._hass.callService('calendar', 'update_event', serviceData);
return;
} catch (error) {
console.error('Update service failed, trying create+delete fallback:', error.message);
// Fall through to create+delete pattern
}
} else if (capabilities.canUpdate && !movingCalendar && !hasUpdateService) {
// Some integrations advertise update support but the service is not registered.
// Skip update call to avoid misleading "Action calendar.update_event not found" pop-ups.
console.debug('calendar.update_event service unavailable, using create+delete fallback');
}
// Fallback: Create new event and then delete old one
// This prevents data loss when create fails on calendars without UPDATE support
try {
// Create in destination calendar first (might be same or different)
await this.createEvent(newCalendarId, eventData);
// Delete from original calendar only after successful create
await this.deleteEvent(originalEvent.entityId, originalEvent.uid, recurrenceId, recurrenceRange);
} catch (error) {
console.error('Create+Delete fallback failed:', error);
throw new Error(error.message || this.t('updateEventServiceError'));
}
}
async deleteEvent(calendarId, uid, recurrenceId = null, recurrenceRange = null) {
if (!this._hass) {
throw new Error(this.t('homeAssistantUnavailable'));
}
// Try WebSocket API first (works for Google Calendar and others)
// This is the official Calendar WebSocket API that the HA Calendar UI uses
try {
if (this._hass.connection && this._hass.connection.sendMessagePromise && uid) {
const payload = buildDeleteEventWebSocketPayload(calendarId, uid, recurrenceId, recurrenceRange);
await this._hass.connection.sendMessagePromise(payload);
return; // Success via WebSocket
}
} catch (wsError) {
console.log('WebSocket delete failed, trying service call:', wsError.message);
// Fall through to service call attempt
}
// Fallback to service call (works for Local Calendar and some others)
const serviceData = buildDeleteEventPayload(calendarId, uid, recurrenceId, recurrenceRange);
try {
await this._hass.callService('calendar', 'delete_event', serviceData);
} catch (error) {
console.error('Service call delete also failed:', error);
throw new Error(error.message || this.t('deleteEventServiceError'));
}
}
async createEvent(calendarId, eventData) {
if (!this._hass) {
throw new Error(this.t('homeAssistantUnavailable'));
}
const isRecurring = !!eventData.rrule;
// Build service-style data (used by both API variants)
const baseData = buildEventServiceData(calendarId, eventData);
if (isRecurring) {
baseData.rrule = eventData.rrule;
// HA recurring event support is exposed through Calendar WebSocket API.
// WebSocket schema expects event.dtstart / event.dtend (not start/end keys).
const wsPayload = buildCreateEventWebSocketPayload(calendarId, eventData);
try {
if (this._hass.connection?.sendMessagePromise) {
await this._hass.connection.sendMessagePromise(wsPayload);
return;
}
} catch (error) {
console.error('WebSocket recurring create failed:', error);
throw new Error(error?.message || this.t('createEventServiceError'));
}
throw new Error(this.t('createEventServiceError'));
}
try {
await this._hass.callService('calendar', 'create_event', baseData);
} catch (error) {
console.error('Service call failed:', error);
throw new Error(error.message || this.t('createEventServiceError'));
}
}
showFormError(errorDiv, message) {
errorDiv.textContent = message;
errorDiv.style.display = 'block';
setTimeout(() => {
errorDiv.style.display = 'none';
}, 5000);
}
getForwardExistingCalendarIds(event) {
const existingCalendarIds = new Set();
if (event?.entityId) existingCalendarIds.add(event.entityId);
if (Array.isArray(event?.sourceEntityIds)) {
event.sourceEntityIds.forEach((entityId) => entityId && existingCalendarIds.add(entityId));
}
if (Array.isArray(event?.sourceEvents)) {
event.sourceEvents.forEach((sourceEvent) => sourceEvent?.entityId && existingCalendarIds.add(sourceEvent.entityId));
}
const eventKey = this.getEventExactMatchKey(event);
(this._events || []).forEach((candidateEvent) => {
if (candidateEvent?.entityId && this.getEventExactMatchKey(candidateEvent) === eventKey) {
existingCalendarIds.add(candidateEvent.entityId);
}
});
return existingCalendarIds;
}
showForwardEventModal(event, startDate, endDate, isAllDay) {
const modal = this.getRootElementById('event-modal');
const content = this.getRootElementById('modal-content');
this.applyEventModalSizeClass(content);
const writableCalendars = this.getWritableCalendars();
const existingCalendarIds = this.getForwardExistingCalendarIds(event);
if (writableCalendars.length === 0) {
this.showError(this.t('noWritableCalendars'));
return;
}
content.innerHTML = `
${this.t('forwardEventTitle')}
${this.t('forwardEventPrompt')}
${writableCalendars.map((entityId) => {
const alreadyExists = existingCalendarIds.has(entityId);
return `
${this.escapeHtml(this.getCalendarName(entityId))}
${alreadyExists ? this.t('forwardEventAlreadyExists') : this.escapeHtml(entityId)}
`;
}).join('')}
${this.t('cancel')}
${this.t('continue')}
`;
modal.classList.add('show');
this.getRootElementById('cancel-forward-event-btn')?.addEventListener('click', () => {
modal.classList.remove('show');
this.showEventModal(event);
});
this.getRootElementById('confirm-forward-event-btn')?.addEventListener('click', () => {
const selectedCalendarIds = Array.from(this._root.querySelectorAll('.forward-calendar-option:checked'))
.map((input) => input.value)
.filter((entityId) => writableCalendars.includes(entityId) && !existingCalendarIds.has(entityId));
const errorDiv = this.getRootElementById('form-error');
if (selectedCalendarIds.length === 0) {
this.showFormError(errorDiv, this.t('forwardEventNoNewCalendars'));
return;
}
modal.classList.remove('show');
this.showCreateEventModal(null, null, {
selectedCalendarIds,
prefill: {
summary: event.summary || '',
startDate,
endDate,
isAllDay,
location: event.location || '',
description: event.description || '',
rrule: event.rrule || ''
}
});
});
}
showEditConfirmation(event, startDate, endDate, isAllDay, selectedEvents = null) {
const modal = this.getRootElementById('event-modal');
const content = this.getRootElementById('modal-content');
this.applyEventModalSizeClass(content);
const isRecurring = event.rrule || event.recurrence_id;
if (!isRecurring) {
this._combinedEditTargets = selectedEvents;
this.showEditEventModal(event, startDate, endDate, isAllDay, 'this');
return;
}
content.innerHTML = `
${this.t('editRecurringEventTitle')}
${this.t('editRecurringPrompt', { title: this.escapeHtml(event.summary || this.t('untitledEvent')) })}
${this.t('cancel')}
${this.t('editEvent')}
`;
modal.classList.add('show');
this.getRootElementById('cancel-edit-option-btn')?.addEventListener('click', () => {
modal.classList.remove('show');
this.showEventModal(event);
});
this.getRootElementById('confirm-edit-option-btn')?.addEventListener('click', () => {
const selectedOption = this._root.querySelector('input[name="edit-option"]:checked')?.value || 'this';
modal.classList.remove('show');
this._combinedEditTargets = selectedEvents;
this.showEditEventModal(event, startDate, endDate, isAllDay, selectedOption);
});
}
showCombinedEditSelectionModal(event, startDate, endDate, isAllDay) {
const modal = this.getRootElementById('event-modal');
const content = this.getRootElementById('modal-content');
this.applyEventModalSizeClass(content);
const sourceEvents = (event.sourceEvents || []).filter(sourceEvent => !this._hiddenCalendars.has(sourceEvent.entityId));
content.innerHTML = `
${this.t('editEvent')}
Select which calendar copies to edit.
${sourceEvents.map((sourceEvent, index) => `
${this.escapeHtml(this.getCalendarName(sourceEvent.entityId))}
${this.escapeHtml(sourceEvent.summary || this.t('untitledEvent'))}
`).join('')}
${this.t('cancel')}
${this.t('editEvent')}
`;
modal.classList.add('show');
this.getRootElementById('cancel-combined-edit-btn')?.addEventListener('click', () => {
modal.classList.remove('show');
this.showEventModal(event);
});
this.getRootElementById('confirm-combined-edit-btn')?.addEventListener('click', () => {
const selectedIndexes = Array.from(this._root.querySelectorAll('.combined-edit-option:checked'))
.map(input => Number.parseInt(input.getAttribute('data-index'), 10))
.filter(index => Number.isInteger(index) && index >= 0 && index < sourceEvents.length);
if (selectedIndexes.length === 0) {
return;
}
const selectedEvents = selectedIndexes.map(index => sourceEvents[index]);
modal.classList.remove('show');
this.showEditConfirmation(selectedEvents[0], startDate, endDate, isAllDay, selectedEvents);
});
}
showCombinedDeleteSelectionModal(event) {
const modal = this.getRootElementById('event-modal');
const content = this.getRootElementById('modal-content');
this.applyEventModalSizeClass(content);
const sourceEvents = (event.sourceEvents || []).filter(sourceEvent => !this._hiddenCalendars.has(sourceEvent.entityId));
content.innerHTML = `
${this.t('deleteEventTitle')}
Select which calendar copies to delete.
${sourceEvents.map((sourceEvent, index) => `
${this.escapeHtml(this.getCalendarName(sourceEvent.entityId))}
${this.escapeHtml(sourceEvent.summary || this.t('untitledEvent'))}
`).join('')}
${this.t('cancel')}
${this.t('delete')}
`;
modal.classList.add('show');
this.getRootElementById('cancel-combined-delete-btn')?.addEventListener('click', () => {
this._combinedDeleteTargets = null;
modal.classList.remove('show');
this.showEventModal(event);
});
this.getRootElementById('confirm-combined-delete-btn')?.addEventListener('click', () => {
const selectedIndexes = Array.from(this._root.querySelectorAll('.combined-delete-option:checked'))
.map(input => Number.parseInt(input.getAttribute('data-index'), 10))
.filter(index => Number.isInteger(index) && index >= 0 && index < sourceEvents.length);
if (selectedIndexes.length === 0) {
return;
}
const selectedDeleteTargets = selectedIndexes.map(index => sourceEvents[index]);
this._combinedDeleteTargets = selectedDeleteTargets;
modal.classList.remove('show');
this.showDeleteConfirmation(selectedDeleteTargets[0], selectedDeleteTargets);
});
}
showDeleteConfirmation(event, selectedEvents = null) {
const modal = this.getRootElementById('event-modal');
const content = this.getRootElementById('modal-content');
this.applyEventModalSizeClass(content);
const deleteTargets = Array.isArray(selectedEvents) && selectedEvents.length > 0
? selectedEvents
: (Array.isArray(this._combinedDeleteTargets) && this._combinedDeleteTargets.length > 0
? this._combinedDeleteTargets
: [event]);
const representativeEvent = deleteTargets[0] || event;
// Check if any selected target is recurring
const hasRecurringTargets = deleteTargets.some(target => target.rrule || target.recurrence_id);
const hasFutureCapableTargets = deleteTargets.some(target => target.recurrence_id);
if (hasRecurringTargets) {
// Show recurring event deletion options
content.innerHTML = `
${this.t('deleteRecurringEventTitle')}
${this.t('deleteRecurringPrompt', { title: this.escapeHtml(representativeEvent.summary || this.t('untitledEvent')) })}
${this.t('cancel')}
${this.t('delete')}
`;
} else {
// Show simple confirmation for non-recurring events
content.innerHTML = `
${this.t('deleteEventTitle')}
${this.t('deleteEventConfirm', { title: this.escapeHtml(representativeEvent.summary || this.t('untitledEvent')) })}
${this.t('cancel')}
${this.t('delete')}
`;
}
modal.classList.add('show');
// Cancel button
this.getRootElementById('cancel-delete-btn').addEventListener('click', () => {
this._combinedDeleteTargets = null;
modal.classList.remove('show');
});
// Confirm delete button
this.getRootElementById('confirm-delete-btn').addEventListener('click', async () => {
const deleteBtn = this.getRootElementById('confirm-delete-btn');
deleteBtn.disabled = true;
deleteBtn.textContent = this.t('deleting');
try {
if (hasRecurringTargets) {
// Get the selected option
const selectedOption = this._root.querySelector('input[name="delete-option"]:checked')?.value;
for (const targetEvent of deleteTargets) {
const targetIsRecurring = targetEvent.rrule || targetEvent.recurrence_id;
if (!targetIsRecurring) {
await this.deleteEvent(targetEvent.entityId, targetEvent.uid);
continue;
}
if (selectedOption === 'future' && targetEvent.recurrence_id) {
// Delete this and future instances when this target has an occurrence id
await this.deleteEvent(targetEvent.entityId, targetEvent.uid, targetEvent.recurrence_id, 'THISANDFUTURE');
} else if (selectedOption === 'this' && targetEvent.recurrence_id) {
// Delete this instance only when this target has an occurrence id
await this.deleteEvent(targetEvent.entityId, targetEvent.uid, targetEvent.recurrence_id);
} else if (selectedOption === 'all') {
// Delete entire series
await this.deleteEvent(targetEvent.entityId, targetEvent.uid);
} else {
// Fallback for recurring targets without recurrence_id
await this.deleteEvent(targetEvent.entityId, targetEvent.uid);
}
}
} else {
for (const targetEvent of deleteTargets) {
// Delete single event
await this.deleteEvent(targetEvent.entityId, targetEvent.uid);
}
}
this._combinedDeleteTargets = null;
modal.classList.remove('show');
// Refresh events
this._lastFetch = null;
await this.updateEvents({ preserveScroll: this._viewMode === 'agenda' });
} catch (error) {
console.error('Failed to delete event:', error);
this._combinedDeleteTargets = null;
alert(error.message || this.t('failedDeleteEvent'));
deleteBtn.disabled = false;
deleteBtn.textContent = this.t('delete');
}
});
}
showFormError(errorDiv, message) {
errorDiv.textContent = message;
errorDiv.style.display = 'block';
setTimeout(() => {
errorDiv.style.display = 'none';
}, 5000);
}
showError(message) {
console.error(message);
// Could add a toast notification here
}
setModalBackHandler(onCloseBack = null) {
this._activeModalBackHandler = typeof onCloseBack === 'function' ? onCloseBack : null;
}
getModalCalendarBadgesForEvent(event) {
return getModalCalendarBadgesForEvent(event, {
hiddenCalendars: this._hiddenCalendars,
getVisibleCalendarBadges: (badgeEvent) => this.getVisibleCalendarBadgesForEvent(badgeEvent)
});
}
showEventModal(event, onCloseBack = null) {
const modal = this.getRootElementById('event-modal');
const content = this.getRootElementById('modal-content');
this.applyEventModalSizeClass(content);
let startDate, endDate, isAllDay;
if (event.start.dateTime) {
startDate = new Date(event.start.dateTime);
endDate = new Date(event.end.dateTime);
isAllDay = false;
} else if (event.start.date) {
// Date-only all-day events use configured-zone calendar bounds for display.
startDate = this.parseCalendarDate(event.start.date);
// End date is exclusive for all-day events, so subtract a configured-zone
// calendar day before converting to a Date for display.
endDate = this.parseCalendarDateWithOffset(event.end.date, -1);
isAllDay = true;
} else {
startDate = new Date(event.start);
endDate = new Date(event.end);
isAllDay = !event.start.includes('T');
// If it's an all-day event in string format, adjust end date
if (isAllDay && event.end) {
endDate.setDate(endDate.getDate() - 1);
}
}
// Get calendar info and capabilities
const calendarName = this.getCalendarName(event.entityId);
const capabilities = this._calendarCapabilities[event.entityId] || {};
const visibleBadges = this.getModalCalendarBadgesForEvent(event)
.map((calendar) => ({
...calendar,
name: this.getCalendarName(calendar.entityId)
}));
// For edit/delete to work, we need:
// 1. Event management enabled
// 2. Calendar not read-only
// 3. Event has a UID (required for modifications)
const hasUID = event.uid !== undefined && event.uid !== null && event.uid !== '';
const canModify = this._config.enable_event_management &&
!capabilities.isReadonly &&
hasUID;
// WebSocket delete works for Google Calendar and other integrations
const canEdit = canModify;
const canDelete = canModify; // WebSocket delete works for all calendars including Google
const canForward = !!this._config.enable_event_management && this.getWritableCalendars().length > 0;
content.innerHTML = renderEventDetailsModal({
event,
startDate,
endDate,
isAllDay,
calendarName,
visibleBadges,
capabilities,
hasUID,
canEdit,
canDelete,
canForward,
canModify,
helpers: {
escapeHtml: this.escapeHtml.bind(this),
formatDate: this.formatDate.bind(this),
formatEventTime: this.formatEventTime.bind(this),
formatDuration: this.formatDuration.bind(this),
renderEventDescription: this.renderEventDescription.bind(this),
t: this.t.bind(this)
}
});
modal.classList.add('show');
this.setModalBackHandler(onCloseBack);
// Close button
this.getRootElementById('close-modal')?.addEventListener('click', () => {
if (this._activeModalBackHandler) {
const backHandler = this._activeModalBackHandler;
this._activeModalBackHandler = null;
backHandler();
} else {
modal.classList.remove('show');
}
});
// Edit button
this.getRootElementById('edit-event-btn')?.addEventListener('click', () => {
this._activeModalBackHandler = null;
modal.classList.remove('show');
if (event.isCombinedCalendarEvent && Array.isArray(event.sourceEvents) && event.sourceEvents.length > 1) {
this.showCombinedEditSelectionModal(event, startDate, endDate, isAllDay);
return;
}
this.showEditConfirmation(event, startDate, endDate, isAllDay);
});
// Forward button
this.getRootElementById('forward-event-btn')?.addEventListener('click', () => {
this._activeModalBackHandler = null;
modal.classList.remove('show');
this.showForwardEventModal(event, startDate, endDate, isAllDay);
});
// Delete button
this.getRootElementById('delete-event-btn')?.addEventListener('click', () => {
this._activeModalBackHandler = null;
modal.classList.remove('show');
if (event.isCombinedCalendarEvent && Array.isArray(event.sourceEvents) && event.sourceEvents.length > 1) {
this.showCombinedDeleteSelectionModal(event);
return;
}
this.showDeleteConfirmation(event);
});
}
showDayCompactModal(date, events) {
const modal = this.getRootElementById('event-modal');
const content = this.getRootElementById('modal-content');
this.applyEventModalSizeClass(content);
const sortedEvents = this.sortEventsForDate(events, date);
content.innerHTML = `
${sortedEvents.length > 0 ? sortedEvents.map(event => {
const daySegment = this.getEventDaySegment(event, date);
if (!daySegment) return '';
const { segmentStart, isAllDaySegment } = daySegment;
const timeLabel = isAllDaySegment ? this.t('allDay') : this.formatEventTime(segmentStart);
const eventStyle = this.getEventStyle(event);
return `
${this.shouldShowEventTime(event) ? `${this.shouldShowEventTime(event) ? `
${timeLabel}
` : ''}` : ''}
${this.renderEventTitleWithPrefix(event, event.summary || this.t('untitledEvent'))}
${this.shouldShowEventLocation(event) ? `
📍 ${this.escapeHtml(this.getDisplayLocation(event.location, event))}
` : ''}
${this.renderEventStyleCornerIcon(event)}
${this.renderCombinedCornerBubbles(event)}
`;
}).join('') : `
${this.t('noEvents')}
`}
`;
modal.classList.add('show');
this._activeModalBackHandler = null;
this.getRootElementById('close-modal')?.addEventListener('click', () => {
this._activeModalBackHandler = null;
modal.classList.remove('show');
});
this._root.querySelectorAll('.week-compact-event').forEach(el => {
el.addEventListener('click', () => {
const eventData = JSON.parse(el.getAttribute('data-event'));
this.showEventModal(eventData, () => this.showDayCompactModal(date, events));
});
});
}
showDayModal(date, events) {
const modal = this.getRootElementById('event-modal');
const content = this.getRootElementById('modal-content');
this.applyEventModalSizeClass(content);
const sortedEvents = this.sortEventsForDate(events, date);
content.innerHTML = `
${sortedEvents.map(event => {
const daySegment = this.getEventDaySegment(event, date);
if (!daySegment) return '';
const { segmentStart, segmentEnd, isAllDaySegment } = daySegment;
const eventStyle = this.getEventStyle(event, { withBorderAccent: true });
return `
${this.renderEventTitleWithPrefix(event, event.summary || this.t('untitledEvent'))}
${this.shouldShowEventTime(event) ? `
${isAllDaySegment ? this.t('allDay') : this.formatEventTimeRange(segmentStart, segmentEnd)}
` : ''}
${this.shouldShowEventLocation(event) ? `
📍 ${this.escapeHtml(this.getDisplayLocation(event.location, event))}
` : ''}
${this.renderEventStyleCornerIcon(event)}
${this.renderCombinedCornerBubbles(event)}
`;
}).join('')}
${paragraphLines.map(line => this.renderMarkdownInline(line)).join('
`);
paragraphLines = [];
};
const flushList = () => {
if (!listType || listItems.length === 0) return;
htmlBlocks.push(`<${listType}>${listItems.map(item => `${this.renderMarkdownInline(item)} `).join('')}`);
listItems = [];
listType = null;
};
const flushQuote = () => {
if (quoteLines.length === 0) return;
htmlBlocks.push(`${quoteLines.map(line => this.renderMarkdownInline(line)).join(' `);
quoteLines = [];
};
const flushAll = () => {
flushParagraph();
flushList();
flushQuote();
};
lines.forEach((line) => {
if (!line.trim()) {
flushAll();
return;
}
const headingMatch = line.match(/^(#{1,6})\s+(.+)$/);
if (headingMatch) {
flushAll();
const level = headingMatch[1].length;
htmlBlocks.push(`${this.renderMarkdownInline(headingMatch[2])} `);
return;
}
const unorderedMatch = line.match(/^\s*[-*+]\s+(.+)$/);
if (unorderedMatch) {
flushParagraph();
flushQuote();
if (listType && listType !== 'ul') flushList();
listType = 'ul';
listItems.push(unorderedMatch[1]);
return;
}
const orderedMatch = line.match(/^\s*\d+\.\s+(.+)$/);
if (orderedMatch) {
flushParagraph();
flushQuote();
if (listType && listType !== 'ol') flushList();
listType = 'ol';
listItems.push(orderedMatch[1]);
return;
}
const quoteMatch = line.match(/^\s*>\s?(.*)$/);
if (quoteMatch) {
flushParagraph();
flushList();
quoteLines.push(quoteMatch[1]);
return;
}
flushList();
flushQuote();
paragraphLines.push(line);
});
flushAll();
return htmlBlocks.join('');
}
renderMarkdownInline(text) {
const codeSpans = [];
let html = this.escapeHtml(text).replace(/`([^`]+)`/g, (_match, code) => {
const token = `§CODESPAN${codeSpans.length}§`;
codeSpans.push(`${code}`);
return token;
});
html = html.replace(/\[([^\]]+)]\(([^)\s]+)\)/g, (_match, label, url) => {
const safeUrl = this.getSafeDescriptionUrl(this.decodeHtmlEntities(url));
if (!safeUrl) return label;
return `${label} `;
});
html = html
.replace(/\*\*([^*]+)\*\*/g, '$1 ')
.replace(/__([^_]+)__/g, '$1 ')
.replace(/~~([^~]+)~~/g, '$1 ')
.replace(/\*([^*]+)\*/g, '$1 ')
.replace(/_([^_]+)_/g, '$1 ');
html = this.restoreAllowedDescriptionTags(html);
codeSpans.forEach((codeHtml, index) => {
html = html.replace(`§CODESPAN${index}§`, codeHtml);
});
return html;
}
sanitizeBasicDescriptionHtml(text) {
const cleanText = String(text ?? '').replace(//gi, '').replace(//gi, '');
const escaped = this.escapeHtml(cleanText).replace(/\r\n?|\n/g, '${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 '