Make upcoming events color style and past events gradient style

[Norton]

Hello is there a way I can keep events in regular color event style like here

even if I select no background it turn the tiles into B/W cute ,but I want color

and make past events be like this style gradient keeping the full colors from the upcoming events

Thank you!

P.S. Can the date and time line either be longer so it will show entirely, without compromising readability, maybe abbreviating the months:
January: Jan.

1. February: Feb.
2. March: Mar.
3. April: Apr.
4. May: May (not abbreviated)
5. June: June (not abbreviated in formal text)
6. July: July (not abbreviated in formal text)
7. August: Aug.
8. September: Sept. (or Sep.)
9. October: Oct.
10. November: Nov.
11. December: Dec.

With dates: Major style guides like ⁠AP Stylebook recommend abbreviating Jan., Feb., Aug., Sept., Oct., Nov., and Dec. only when they appear with a specific date (e.g., Oct. 5)

Alone or with a year: Spell out the full month name if it stands alone or is paired only with a year (e.g., October 2026)

[Max]

Hello, @Norton

This CSS code will help you change the color of past events - Make past events gray (Grid)

Regarding the date and month cropping, please try to use the CSS code below:

.eapp-events-calendar-time-time {
  white-space: normal !important;   
  overflow: visible !important;     
  text-overflow: clip !important;   
  display: inline-block !important; 
}


.eapp-events-calendar-time {
  white-space: normal !important;
  overflow: visible !important;
}

Check it out and let me know if it helped

[Norton]

@Max love the grey solution for past events, no really a fan for date and month, when an event passed the 12AM and is the next day I understand has to show both dates but I rather have month abbreviated for a clean and professional1 line instead of 2 lines split

One more thing, the hero cards are all hosted in my google drive, when an event is created a link is pull to the calendar syncing with the elfsight

For each event the appropriate link is pull to that event, and then synced to elfsight, I did tested each event type, and all synced beautiful except Faith Milestones. all images are share without restriction or to Anyone with link ON, I triple check my code and the link is getting send to calendar but elfsight is no pulling the image