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 splitting into, 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. I did tried to disconnect the calendar and connected back up, and nothing

[Tony]

Hi Norton! This is Tony stepping in while Max is away

I’ve checked the widget and the image for Faith Milestones is now pulled correctly. Could you please confirm everything looks good on your side?

Regarding the date, our devs checked it and confirmed that this is expected for multi-day events. When the start and end dates fall on different calendar days, the date is intentionally shown in the time section. This can also happen with Google Calendar events when the event ends at midnight.

As a workaround, you can try this CSS to make the date more compact:

.eapp-events-calendar-time-time {
  font-size: 12px !important;
}

We’ve also added your suggestion about using abbreviated month names to our wishlist for future improvements.

[Tony]

Here it is - Customizable date format in Google Calendar integration.

Feel free to vote here to support it and get future updates

[Norton]

thanks @Tony for the response, one last thing, in the month layout is there a way we can have a the appropiate rectangular thumbnail on top of the listed event

[Tony]

Hi Norton

This would be a feature request. Currently, event images are not displayed in the Monthly layout or other calendar layouts.

I’ll add this to our wishlist, as having more visual event cards would be a nice improvement!

You can follow and vote for it here to get future updates: Display event thumbnails in calendar layouts.