This article is to serve as a guide for designers and front end developers to customize the look and feel of the Groundplan calendar. Review this article to output a specific type of calendar on your page layout.


Setting your theme up to customize the calendar

Copy one or more of the example calendar skins from the Groundplan Pro plugin ('groundplan-pro/functions/css/calendar/skins') into your theme as a starting point for modifying your calendar's look and feel.  These skins use the SASS precompiler language which can be compiled into CSS.  Do not modify these skins directly in the plugin, as your modifications will be erased when you update the plugin.


You can set a wrapper class when displaying a calendar using a shortcode or the calendar display code.  This wrapper class can be targeted to override default values.


To include the style(s) in your theme, enqueue the appropriate files in your functions.php with 'xdgp_calendar-skin' as a dependency, like so (replacing paths and {example} as appropriate):


wp_enqueue_style('calendar-main-{example}', get_stylesheet_directory_uri().'/styles/calendar-main-{example}.css', array('xdgp_calendar-skin'), $version);



Calendar Components & Variations

Calendar Agenda - xdgp-calendar-agenda


Calendar Main - xdgp-calendar-main




Calendar Single - xdgp-calendar-single




Calendar Mini - xdgp-calendar-mini


DOM Naming Conventions

The Groundplan calendar sets the following DOM elements and classes, with variations availble for different states such as past dates, and sold out events.

  1. section.xdgp-calendar

      • &--agenda  (all events, agenda variation)
      • &--main (all events, agenda variation)
      • &--single (single event variation)
      • &--mini (all OR single events, widget variation)
    2. header
      1. .xdgp-calendar__navigation
        1. ul.genre-filter (JS filter toggle functionality.  Future feature: support multiple taxonomies, currently possible through action hooks)
          • action: ‘xdgp_calendar_display_genre_nav'
          • action: ‘xdgp_calendar_echo_genre_nav_js'
        2. a.month—prev  (by default, period is always by month but should this be previous or next period, e.g weeks?)
        3. span.month__current
        4. a.month—next
    3. footer
      1. .xdgp-calendar__navigation (same navigation as header)
    4. section.weekdays (all but agenda)
      1.  span.weekdays__label
    5. main.schedule
      1. div.week
        1. div.day  (.day—past.xs-hidden denotes past days, .day—pad denotes pad days outside of current month to fill out weeks, .day—has-events denotes days with events, .day—no-events.xs-hidden denotes )
          1. span.weekday__label.visible-xs
          2. span.day__label
          3. ul.events
            1. li.event.{genre-class}#event-id
              1. a[href=“ticket url | event url”]

                  • action: ‘xdgp_calendar_display_event_link’ TODO
                2. img.img-responsive.event__image
                  1. span.event__title

                      • action: ‘xdgp_calendar_display_{calendar-type}_event_block_open'
                      • action: ‘xdgp_calendar_display_{calendar-type}_event_block_close'
              2. ul.performances
                1. li.performance
                  1. &—past.xs-hidden
                  2. &—sold-out
                  3. &—upcoming-sale (future functionality)a[href=“performance ticket url”]  (if set, and not in past, and not sold out)
                    1. action: ‘xdgp_calendar_display_performance_link’ RELABEL
                  4. span.performance__time
                  5. button.buy
                  6. action: ‘xdgp_calendar_additional_performance_link'
                  7. span.performance__note (e.g. “Preview”, “Sold Out Online"