Theming

You can choose one of the bundled themes or you can add your own custom themes to the uploads/pgc_themes directory. Note that the bundled themes always start with pgc- and custom themes must never start with pgc-.

See below example for a custom theme. If you want to get the CSS file, look at the classname of the '.pgc-calendar-wrapper' element that starts with 'pgc-theme-'. For example if it is 'pgc-theme-blue-square' then there should be a CSS file called 'blue-square.css' with all styling in it.

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: "✗"
}