ICS Calendar

ICS Calendar
  • Features
    • ICS Calendar Pro
    • Feature Comparison
    • Sample Calendars
    • Preview Your Calendar
    • More WordPress Plugins
  • Help
    • User Guide
      • Getting Started
      • General WordPress Settings
      • Shortcode Overview
      • Reference: All Parameters
      • FAQs and Tips
      • CSS Guide
      • Developer
    • WordPress Support Forums
    • Pro Documentation
      • Calendar Builder
      • Block Editor
      • Manual Calendar Setup
      • Admin Utilities and Settings
      • Customizer
      • All Parameters
    • Pro Support Forums
      • Installation and Configuration
      • Licensing
      • Troubleshooting and Bugs
      • CSS and Design
      • Feature Requests
      • Translations
      • General Support
    • Pro Support Request Form
    • Translation Suggestions
  • Blog
  • Download
  • Buy Now
  • Cart
  • My Account
Search
More...

User Guide

  • Getting Started
  • General WordPress Settings
  • Shortcode Overview
  • Reference: All Parameters
  • FAQs and Tips
  • CSS Guide
    • Using the Inspector
    • ICS Calendar CSS Classes
    • CSS Tips and Tricks
  • Developer

On This Page

  • Using the Inspector
  • Full List of CSS Classes
  • CSS Tips and Tricks

More Help

  • User Guide
  • Pro Documentation
  • WordPress Support Forums
  • Pro Support Request Form
  • Translation Suggestions

CSS Tips and Tricks

This is an evolving page, where we will collect CSS “tricks” we have worked out with users of the plugin, to help them accomplish their specific goals with calendar display. If the display issue you’re encountering is not listed here, please open a ticket in the WordPress Support Forums.

Category styling

The iCalendar spec includes a CATEGORIES field. Unfortunately, most major calendar providers (e.g. Google, Microsoft) do not include any data in this field, even if you use categories/color coding in your source calendar.

However, since this is a feature of the spec, some calendars use it, and ICS Calendar provides some rudimentary support.

While there is no automatic CSS styling for categories, the data does get included in the HTML output if the feed actually contains them. This is handled via the data-categories HTML attribute on the individual .event container element. The value inserted into that attribute is the exact text of the CATEGORIES field from the feed.

So the key to using this in CSS is properly formatting the selectors. You’ll want to use wildcards in case the event has multiple categories. For instance, if your category is “Meetings” then your CSS selector would be:

.event[data-categories*="Meetings"]

If any aspects of this structure are unfamiliar, here’s a CSS Selectors reference.

Display weekdays (Monday–Friday) only

This trick is intended for month view but it should work with any of the table-based layouts (e.g. week, widget, month-with-sidebar).

Each cell in the table includes a data-dow (day-of-week) attribute, with a number representing the day of the week, from 0 (Sunday) to 6 (Saturday).

To hide Saturday and Sunday throughout your calendar views, you can use this CSS:

.ics-calendar-month-grid *[data-dow='0'], .ics-calendar-month-grid *[data-dow='6'] {
    display: none;
}

(Note that this CSS has no effect in list view.)

Room 34 Creative Services, LLC

  • Facebook
  • Instagram
  • YouTube
  • Room 34 Creative Services, LLC
  • Minneapolis, Minnesota 55406 USA
  • info@icscalendar.com
  • More WordPress Plugins
  • Privacy Policy
  • Terms & Conditions

Copyright © 2023 Room 34 Creative Services, LLC. All rights reserved.

https://icscalendar.com/css-tips-and-tricks

This website uses cookies for necessary functions and to enhance your browsing experience. Accept to continue or find out more in our Privacy Policy.

Accept & Continue