CSS Selectors

Pie Calendar is designed to inherit as much of your theme and global styles as possible. Styling such as typography and colors should look consistent with your existing site out of the box.

You might still want to further customize the styling of your front-end calendar and this article will provide some sample CSS to do so.

Calendar Styles

Today cell background color

.piecal-wrapper .fc .fc-daygrid-day.fc-day-today {
background-color: rgba(173, 216, 230, 0.5);
}

Today Button (Disabled and Regular)

.piecal-wrapper .fc .fc-button:disabled {
background-color: #141414;
border-color: #141414;
color: white;
}
.piecal-wrapper .fc .fc-button {
background-color: #000000;
border-color: #000000;
color: white;
}

Previous & Next buttons:

.piecal-wrapper .fc .fc-prev-button {}
.piecal-wrapper .fc .fc-next-button {}

Hide the "Choose View" text and dropdown entirely:

 

  .piecal-wrapper .piecal-controls {display: none;}
 

Popover Styles

Change the styles of the close button inside the popover:

.piecal-wrapper .piecal-popover__close-button {}

Change the styles of the close "X" icon inside the popover:

.piecal-wrapper .piecal-popover__close-button::before {background: black;}
.piecal-wrapper .piecal-popover__close-button::after {background: black;}

Change the styles of the view post link inside the popover:

.piecal-popover__inner a {
padding: 1rem;
background-color: blue;
color: white;
}