Requirements
Is your feature request related to a problem?
Use case
- I’m using custom:calendar-card-pro and hiding empty days.
- I want to apply custom styles (e.g. a colored border or background) to tomorrow’s events.
- Today’s block has
<table class="day-table today">…</table>, and tomorrow’s has <table class="day-table future-day">…</table>, which also applies to every date after tomorrow, but no specific class to identify that it is "tomorrow".
Describe the solution you'd like
Add a tomorrow modifier class alongside today and future-day, for example:
<!-- today -->
<table class="day-table today">…</table>
<!-- tomorrow -->
<table class="day-table tomorrow future-day">…</table>
<!-- other future days -->
<table class="day-table future-day">…</table>
Then users could write straightforward CSS consistent with how "today" is currently styled:
/* Make tomorrow's events stand out */
.day-table.tomorrow .event-title {
font-size: 16px !important; /* Larger text */
font-weight: bold !important; /* Bold text */
color: var(--accent-color) !important; /* Use theme accent color */
}
Describe alternatives you've considered
- Adjacent sibling selector:
.day-table.today + .day-table .event { … }
But this breaks if today’s (or tomorrow's) block is hidden or rendered differently.
- Parsing date date via JS, but this is error-prone and depends on display options.
Example use case
- I’m using custom:calendar-card-pro and hiding empty days.
- I want to apply custom styles (e.g. a colored border or background) to tomorrow’s events, especially relevant for all-day events.
With the proposed solution, users could write straightforward CSS consistent with how "today" is currently styled:
/* Make tomorrow's events stand out */
.day-table.tomorrow .event-title {
font-size: 16px !important; /* Larger text */
font-weight: bold !important; /* Bold text */
color: var(--accent-color) !important; /* Use theme accent color */
}
Additional context
Benefits
- Provides a clear, semantic hook for tomorrow’s block and events.
- Works regardless of how many days are hidden or shown.
- Aligns with the existing
.day-table.today pattern.
- Simplifies user CSS and makes styling more robust.
Thanks for considering this enhancement! I’m happy to help test or review a PR.
Requirements
Is your feature request related to a problem?
Use case
<table class="day-table today">…</table>, and tomorrow’s has<table class="day-table future-day">…</table>, which also applies to every date after tomorrow, but no specific class to identify that it is "tomorrow".Describe the solution you'd like
Add a tomorrow modifier class alongside
todayandfuture-day, for example:Then users could write straightforward CSS consistent with how "today" is currently styled:
Describe alternatives you've considered
But this breaks if today’s (or tomorrow's) block is hidden or rendered differently.
Example use case
With the proposed solution, users could write straightforward CSS consistent with how "today" is currently styled:
Additional context
Benefits
.day-table.todaypattern.Thanks for considering this enhancement! I’m happy to help test or review a PR.