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.
This is a developer level document. We only provide limited support for developer-level features.
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;
}