title_contains is valid syntax for day_badges and is a shortcut for title: contains:[title], but not (yet) event_styles.
But, that's dumb. I have fixed it via Add shared advanced matching rules by superdingo101 · Pull Request #366 · superdingo101/daylight-calendar-card · GitHub, and title_contains will be valid syntax for event_styles (and day_styles) starting with the next release.
Wasnt neccesarily dumb, but perhaps I was being dumb for not reading it properly 
But thats great that the syntax will match in both cases now.
Keep up the great work!
A quick announcement!
The documentation has been migrated to https://docs.daylightcalendar.com/
These docs should be easier to read (and maintain), and contain both regular search and AI-assisted search/chatbot.
I'm open to feedback! I hope they're helpful!
The wiki docs will remain available for another few days, after which time they will be retired.
Thank you for using the Daylight Calendar Card!
The new site is spot on. Lots of good start to finish articles and plenty of detailed pages.
Hadnt spotted virtual calendars until I viewed this new site!
Great work
Hi,
I don't see any setting in the Skylight Calendar Card documentation that allows changing the date number font size via date_styles or 'day_styles'.
Is there a way to enlarge the Day Numbers?
For UIX questions, I use Claude. It works well if you guide it properly. My process:
Here's what it returned for me, each style included is for the different views:
uix:
style: |
.day-number,
.week-day-date,
.week-standard-day-date,
.agenda-day-date {
font-size: 26px !important;
}
Hi everyone! Quick announcement!
Were you using this card before the rename from Skylight Calendar Card?
Are you keeping up with the latest versions, but new features don't seem to be working or present?
Please check Settings → Dashboards → Resources and remove any old Skylight resource:
/hacsfiles/skylight-calendar-card/skylight-calendar-card.js
Keep only the current Daylight resource:
/hacsfiles/daylight-calendar-card/skylight-calendar-card.js
The filename is still skylight-calendar-card.js; the folder should be daylight-calendar-card.
You can also verify you have the right version loaded by checking the About / Diagnostics section of the card editor. Don't have an About / Diagnostics section at all? This post is targeted to you!
Stale resources can make new features appear missing or broken even when HACS shows the latest version. See the troubleshooting guide:
I missed the new renamed version until now.
I did the upgrade, but it does not work anymore. On analysis I noticed that the new version still get installed under the folder skylight-calendar-card. Even after I deleted the installation and readded it.
EDIT:
deinstall - restart HA - install - restart HA solved that problem.
On Chrome STRG-F5 or Shift-STRG-R did not work. Need to delete website data fro, chrome settings
Thank you for this information. I am dismayed that so many individuals are likely, unknowingly, "stuck" on the old file. There are so many new features implemented since then!
Thanks, I will review my troubleshooting docs with your feedback and update them to reflect what you had to do.
Yeah the new version has some good features. Day Badges are handy and definitely got 2 thumbs up from the boss
What do you mean by colour rules to make mixed family schedules easier on the eyes?
Just checking because if you have separate calendars, 1 per family member, you can set the colour of their events to make it visually easier to see. Filtering is also colour coded
I am interested in helping. There are multiple options for overriding colors; either through giving each separate calendar a separate color ( Appearance & Color Configuration for Daylight Calendar Card - Daylight Calendar Card ) or through keyword-based coloring ( Event Styles: Custom Colors and Icons for Calendar Events - Daylight Calendar Card ).
Also, I am interested in seeing screenshots and your configuration for the spacing issues. Feel free to either post that here or open an issue on GitHub!
Hi, some Question, is it possible to center the header buttons?
title: ""
entities:
- calendar.arbeit
- calendar.familie
- calendar.geburtstage_2
- calendar.juna
- calendar.nur_jara
- calendar.nur_jenni
- calendar.nur_torben
- calendar.privat
- calendar.srh_abfuhren
default_view: week-compact
first_day_of_week: 1
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
month_day_tap_action: create
hide_empty_days: false
agenda_compact_events: false
shorten_event_times: false
time_zone: Germany/Berlin
display_full_weekday_names: true
compact_width: true
show_current_time_bar: false
show_event_location: false
use_short_location: false
location_links: false
event_location_font_size: 9
background_opacity: 0
header_background_opacity: 0
event_calendar_friendly_name: true
event_title_prefix: friendly_name
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: true
hide_header: false
hide_year: true
hide_controls: false
hide_navigation_buttons: false
hide_add_event_button: false
hide_view_selector: false
hide_dark_mode_toggle: true
show_dashboard_nav_button: false
header_dashboard_path: null
header_weather_sensor: ""
calendar_person_entities: {}
default_hidden_calendars: []
color_scheme: light
enable_event_management: true
event_modal_size: medium
type: custom:daylight-calendar-card
grid_options:
columns: 36
rows: auto
show_week_numbers_month: false
hide_calendar_names: false
compact_header: true
compact_height: false
header_color: "#ffff00"
background_transparent: false
header_background_transparent: false
calendar_names:
calendar.juna: Juna
calendar.nur_jara: Jara
calendar.nur_jenni: Jenni
calendar.nur_torben: Torben
calendar.srh_abfuhren: Müll
calendar.familie: Familie
calendar.geburtstage: Geburtstag
colors:
calendar.nur_torben: "#000000"
calendar.juna: "#E44B8D"
language: de
rolling_days_week_compact: null
header_text_color: "0000000"
height_scale: 0.5
day_styles:
- condition: past
style:
opacity: 0.4
Yes. Since you have an empty title and are using the compact header, you can center the controls with a UIX override:
uix:
style: |
.header-compact {
justify-content: center !important;
}
.header-compact > .compact-header-left {
display: none !important;
}
.header-compact > .compact-header-controls {
justify-content: center !important;
}
.header-compact .compact-period-controls {
margin-left: 0 !important;
}
Add this directly to your Daylight Calendar Card configuration. It only affects that specific card instance.
For more info: uix: Inject Custom CSS into Daylight Calendar Card - Daylight Calendar Card
I just installed this. I didn’t have any calendars synced to HA before this. Getting my google calendar setup was a pain! But once it was in, it was super easy to get Daylight calendar set up.
I was about to ask a question, then decided to rtfm first. Not only does it look good, and easy to use, but the documentation is very well done too!
Thank you!
Any chance of tweaking this to display multi-day events like this? The key here is illustrating same-day Airbnb checkins & checkouts.
Here is what yours looks like:
Here’s what I’m trying to accomplish. Note the visual gaps between same-day turnovers, circled in red
I also replied to your issue on GitHub, but please try:
/hacsfiles/daylight-calendar-card/skylight-calendar-card.jsLet me know if you’re still struggling and we can try more things.
I don’t usually do release announcements, but I am especially excited about this one little row in the release notes of v4.11.1:
Fixed a header layout flash that could occur when header controls were rerendered.
I’m sure you noticed the flashing header when views were changed, or options were toggled, or almost anything changed. No more!
Anyway, I hope you all continue to enjoy this card. Keep sending me your ideas for improvements!