CSS Snippets

The following CSS snippets can be added to your custom CSS styles on the Spiffy Calendar options page.

Calendar Image size

If you have detailed display enabled, and find that the images are larger than the squares on small screens, the following code snippet can be used. Adjust the 700px value to whatever works best for your theme. The default styles use 600px as the value.

@media screen and (max-width: 700px) {
.calnk-icon {
 max-width: 100%;

Revert to the old green/gray colouring:

.calendar-date-switcher, .calendar-heading, .current-day {
    background-color: #E4EBE3;
    border: 1px solid #D6DED5;
.weekend-heading, .normal-day-heading {
    border: 1px solid #DFE6DE;
    background-color: #EBF2EA;
.weekend-heading, .normal-day-heading, .day-with-date {
    border: 1px solid #DFE6DE;

Hide the category key

.cat-key { display: none; }

 Change the hover popup background color to another color (pink in the example)

div.spiffy-popup, .calnk a:hover div {
    background: pink !important;
div.spiffy-popup:after {
    border-bottom-color: pink !important;