Devlog

Styling and theming

Change events per calendar

Each event has a data-calendarid attribute that can be used to target only events from a specific calendar. The calendar ID kan be seen and copied from the settings page. For example to have a black background on hover for calendar trg7fc1oksf1ma9a0dg78hvccg@group.calendar.google.com:

.pgc-calendar-wrapper a.fc-event[data-calendarid="trg7fc1oksf1ma9a0dg78hvccg@group.calendar.google.com"]:hover {
  color: white;
  background-color: black !important;
}

Control width and height of event popup

By default the popup will be as heigh as the content. This can cause the popup to be off the screen. You can control the height and width of the popup with the following CSS:

.tippy-box {
  max-height:200px;
  overflow-y: auto;
  max-width: 500px !important;
}

Change the checkmark in the filter

By default the ✔ is used. You can change it with the following CSS:

.pgc-calendar-filter input[type=checkbox] + label span:before {
  content: "✗"
}