# 📅 Customizing Calendar Events in Glide

**URL:** <https://community.glideapps.com/t/customizing-calendar-events-in-glide/72150>\
**Category:** Community Resources\
**Tags:** custom-code\
**Created:** [March 29, 2024, 3:42am UTC](https://community.glideapps.com/t/customizing-calendar-events-in-glide/72150 "2024-03-29T03:42:42Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [March 29, 2024, 3:42am UTC](https://community.glideapps.com/t/customizing-calendar-events-in-glide/72150/1 "2024-03-29T03:42:42Z")

</div>

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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/6/a67841e73840bcfabac47b91c600ac4941fcdc6a.jpeg)

```auto
/* 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);
}

```

---

<div class="post-metadata">

**Author:** ![bschonbrun](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/bschonbrun/32/68470_2.png) [@bschonbrun](https://community.glideapps.com/u/bschonbrun)\
**Post date:** [April 5, 2024, 10:58am UTC](https://community.glideapps.com/t/customizing-calendar-events-in-glide/72150/2 "2024-04-05T10:58:58Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [April 5, 2024, 11:06am UTC](https://community.glideapps.com/t/customizing-calendar-events-in-glide/72150/3 "2024-04-05T11:06:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nathanaelb](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathanaelb/32/43079_2.png) [@nathanaelb](https://community.glideapps.com/u/nathanaelb)\
**Post date:** [April 5, 2024, 11:21am UTC](https://community.glideapps.com/t/customizing-calendar-events-in-glide/72150/4 "2024-04-05T11:21:28Z")

</div>

How I wish we could do this natively.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [April 5, 2024, 11:31am UTC](https://community.glideapps.com/t/customizing-calendar-events-in-glide/72150/5 "2024-04-05T11:31:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![marissabrielle](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/marissabrielle/32/82299_2.png) [@marissabrielle](https://community.glideapps.com/u/marissabrielle)\
**Post date:** [September 16, 2024, 9:40pm UTC](https://community.glideapps.com/t/customizing-calendar-events-in-glide/72150/6 "2024-09-16T21:40:58Z")

</div>

> [@Himaladin](#):
>
> ```auto
> /* Show full text on hover */
> .taskCalendar .rbc-event-content:hover {
> white-space: normal;
> }
> 
> ```

@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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/3/03ddd329f2ad2119c857477cb2be028f67d0821a.png)

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [September 17, 2024, 3:01am UTC](https://community.glideapps.com/t/customizing-calendar-events-in-glide/72150/7 "2024-09-17T03:01:08Z")

</div>

Try adding the following code:

```auto
/* 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;
}

```

---

<div class="post-metadata">

**Author:** ![marissabrielle](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/marissabrielle/32/82299_2.png) [@marissabrielle](https://community.glideapps.com/u/marissabrielle)\
**Post date:** [September 17, 2024, 6:39pm UTC](https://community.glideapps.com/t/customizing-calendar-events-in-glide/72150/8 "2024-09-17T18:39:35Z")

</div>

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