đź“… 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);
}
14 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:

5 Likes
6

@Himaladin This is really great! I’m running into a problem with showing full text on hover. When I hover over a calendar event, a calendar event on the same line will adjust it’s spacing. For example, in the screenshot attached I’m hovering over “Financial Know-How” and it’s adding the same amount of space below “Market Insights.” Any thoughts?

Screenshot 2024-09-16 at 2.38.07 PM

7

Try adding the following code:

/* Show full container on hover */
.taskCalendar .rbc-event:hover {
  position: fixed;
  z-index: 1;
  max-width: 250px;
  max-height: 250px; 
  white-space: normal;
  overflow: visible;
  overflow-y:scroll;
  background-color: crimson !important;
}
/*stacking context*/
.taskCalendar .rbc-row-content {
    z-index: auto;
}
3 Likes
8

@Himaladin Very neat solution! This works well, thank you.

1 Like