WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I think The Events Calendar for Wordpress by Modern Tribe does a splendid job and does a lot for to turn a drab calendar into a streamlined and professional looking one. I like the ease of the calendar, that you can show calendars by categories, and have the option to choose between grid and list view. There is one thing that I would like to make the calendar do, have the option to see more events that are posted on days in the month/grid view.

Here's an example:


Notice that for the days where there any many events happening/listed that instead of showing all on the calendar, there's the equivalent of the "show more" "read more" "continue reading" option. I would like to have this option available in The Events Calendar. Some days may hold eight or more events and for a clean looking calendar, you don't want all of the events to show. I know there's a way to limit the number of events to show in grid view, but while those events are hidden after limiting the number, it doesn't show that there are more events happening on that day.

From the calendar listed above, there seems to be a function/html code that uses the following as a link:


When looking at the html in Firefox's Inspect Element, I see this:

<a href="?year=2012&amp;month=9&amp;day=6" class="eventsCalShowMore">&nbsp;+9 more</a>

In the .css, it looks like this:

table#eventCalendarTable td .eventsCalShowMore {
color: #fff;
background-color: #8a7b68;
padding: 2px 8px 2px 4px;

but as far as to apply something similar to The Events Calendar, I don't know. I'm surprised to see in such a sophisticated calendar, that this isn't a standard option to have for a less cluttered calendar. I've searched The Events Calendar's site and nothing that would provide for this. Does anyone have any ideas how to implement this?

This is the GIRDVIEW.php for the calendar:

 * Grid view template.  This file loads the TEC month view, specifically the 
 * month view navigation.  The actual rendering if the calendar happens in the 
 * table.php template.
 * You can customize this view by putting a replacement file of the same name (gridview.php) in the events/ directory of your theme.

// Don't load directly
if ( !defined('ABSPATH') ) { die('-1'); }
$tribe_ecp = TribeEvents::instance();
    <div id="tribe-events-content" class="grid">
      <!-- This title is here for ajax loading - do not remove if you wish to use ajax switching between month views -->
      <title><?php wp_title() ?></title>
        <div id='tribe-events-calendar-header' class="clearfix">
            <span class='tribe-events-month-nav'>
                <span class='tribe-events-prev-month'>
                    <a href='<?php echo tribe_get_previous_month_link(); ?>'>
                    &#x2190; <?php echo tribe_get_previous_month_text(); ?>

                <?php tribe_month_year_dropdowns( "tribe-events-" ); ?>

                <span class='tribe-events-next-month'>
                    <a href='<?php echo tribe_get_next_month_link(); ?>'>               
                    <?php echo tribe_get_next_month_text(); ?> &#x2192; 
               <img src="<?php echo esc_url( admin_url( 'images/wpspin_light.gif' ) ); ?>" class="ajax-loading" id="ajax-loading" alt="" style='display: none'/>

            <span class='tribe-events-calendar-buttons'> 
                <a class='tribe-events-button-off' href='<?php echo tribe_get_listview_link(); ?>'><?php _e('Event List', 'tribe-events-calendar')?></a>
                <a class='tribe-events-button-on' href='<?php echo tribe_get_gridview_link(); ?>'><?php _e('Calendar', 'tribe-events-calendar')?></a>
        </div><!-- tribe-events-calendar-header -->
        <?php tribe_calendar_grid(); // See the views/table.php template for customization ?>
      <?php if( function_exists( 'tribe_get_ical_link' ) ): ?>
         <a title="<?php esc_attr_e('iCal Import', 'tribe-events-calendar') ?>" class="ical" href="<?php echo tribe_get_ical_link(); ?>"><?php _e('iCal Import', 'tribe-events-calendar') ?></a>
      <?php endif; ?>
        <?php if (tribe_get_option('donate-link', false) == true) { ?>
            <p class="tribe-promo-banner"><?php echo apply_filters('tribe_promo_banner', sprintf( __('Calendar powered by %sThe Events Calendar%s', 'tribe-events-calendar'), '<a href="http://tri.be/wordpress-events-calendar/">', '</a>' ) ); ?></p>
        <?php } ?>

Should look like the monthly calendar/grid view in Modern Tribe's demo

share|improve this question

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.