Skip to content

[Feature]: Include HTML class to indicate "tomorrow" #248

Description

@Squazel

Requirements

  • I've checked that I'm using the latest version of Calendar Card Pro
  • I've verified this feature isn't already available in the configuration options
  • I've searched existing issues to verify this hasn't already been requested

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

  1. Adjacent sibling selector:
.day-table.today + .day-table .event { … }

But this breaks if today’s (or tomorrow's) block is hidden or rendered differently.

  1. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions