Spiffy Calendar

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

Hide the Export Events button

When the Bonus Add-ons are active, an Export Events button appears below the main calendar display. If you want to disable this you can hide it with the following CSS rule.

.spiffy-ics {
    display: none;
}

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

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

 Change the hover popup text color to another color (black in the example)

.spiffy-popup span, .spiffy-popup span a {
color: #000 !important;
}

Switch the order of the display of time and title

Normally the title is displayed first, followed by the time in the calendar and listings. To display time first, add the following snippet.

span.calnk-box {
    display: flex !important;
    flex-direction: column;
}

span.spiffy-title {
   order:2;
}

span.calnk-time {
    order:1;
}

span.spiffy-popup {
    margin-top: 4em !important;
}

Mini calendar popup goes left instead of right

This can be configured in the settings.