📅 Customizing Calendar Events in Glide

Community Resources
1

If you want to mark important moments in your calendar with colored displays, you can achieve this through CSS. Although Glide does not provide a feature to mark each event difference with a different color, based on keywords we can still take advantage of custom CSS, which is now available in all paid plans. Happy trying!

Note: Here I added the class name "taskCalendar".

Screenshot 2024-03-29 at 10.38.09
Screenshot 2024-03-29 at 10.38.092064×1460 121 KB

/* Change background color of Today */
.taskCalendar .rbc-time-content .rbc-today, .taskCalendar .rbc-month-view .rbc-day-bg +.rbc-today {
  background-color: rgba(255, 0, 0, 0.2) !important;
  position: relative;
}

/* Show full text on hover */
.taskCalendar .rbc-event-content:hover {
  white-space: normal;
}

/* Change default color of calendar bars */
.taskCalendar .rbc-event.rbc-event{
  background-color: rgba(75, 93, 103, 0.6) !important;
}

/* Color events based on keywords, e.g., "Holiday" */
.taskCalendar .rbc-event.rbc-event:has(div[title*="Holiday"]){
  background-color: rgba(216, 27, 96, 0.8) !important;
}
.taskCalendar .rbc-event.rbc-event:has(div[title*="Reminder"]){
  background-color: rgba(255, 165, 0, 0.6) !important;
  color: var(--gv-text-pale) !important;
}

/* Color Header */
.taskCalendar .rbc-header{
  color:white;
  background-color: rgba(70, 70, 70, 0.9);
}
12 Likes
2

Very cool and extremely helpful.

I’ve been thinking about how to differentiate things in a calendar view - in my case either location or status, both fields in Glide.

Visually - it makes such a difference to be able to recognize the difference at a glance.

Thanks for sharing.

1 Like
3

You’re welcome! I’m glad I could help.

4

How I wish we could do this natively.

1 Like
5

Ideally, that’s how it should be. I tend to lean towards not relying on what Glide provides. Life must go on. :smile:

3 Likes