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;}

Hide the detected timezone message in the footer when using Pro:

.piecal-wrapper .piecal-footer {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, a.piecal-popover__view-link {
padding: 1rem;
background-color: blue;
color: white;
}

Widget Mode Styles

When the widget attribute in your shortcode, these styles will help you adjust the various buttons and elements found in widget mode.

When the calendar is in widget mode, there is a new wrapper class you can use to style the calendar only when it is in widget mode:

.piecal-wrapper--widget {}
.piecal-wrapper—-responsive-widget {}

Back to month button:

.piecal-wrapper:not([data-view='listDay']) .piecal-controls__back-to-month {}

[piecal-info] Shortcode

Hide time zone information:

.piecal-info p:last-of-type {
    display: none;
}