Adding AJAX-Powered “See Week” Links to Month View

Template and CSS changes are great to start customizing calendar views. However, for more control over functionality, simple overrides just won’t cut it. The good news is that with the latest calendar view designs in The Events Calendar, it’s now possible to add more customized JavaScript functionality. Let’s walk through adding an AJAX-powered link to your view by hooking into the AJAX manager.

Our goal here is to add a link to the left of each row in the calendar’s month view that takes the user to the calendar’s week view for that particular week. We want the link to be powered by AJAX so that the switch between views happens without a page refresh. We also want to make sure that these links only show up on the desktop, rather than showing them in the small-screen version of the calendar.

First, we need to override the calendar body template from the plugin folder to your theme folder. In other words, located the template source file (/wp-content/plugins/the-events-calendar/src/views/v2/month/calendar-body.php) and copy it to your theme folder in a tribe folder ([your-theme]/tribe/events/v2/month/calendar-body.php).

Now we’re going to add the link. Edit the file so it looks like below:

<div class="tribe-events-calendar-month__body" role="rowgroup">

  <?php foreach ( array_chunk( $days, 7, true ) as $week ) : ?>

    <div class="tribe-events-calendar-month__week" role="row" data-js="tribe-events-month-grid-row">
      <div class="tribe-events-calendar-month__week-link-wrapper tribe-common-a11y-hidden">
        <a class="tribe-events-calendar-month__week-link" href="<?php echo tribe_events_get_url( [ 'eventDisplay' => 'week', 'eventDate' => key( $week ) ] ); ?>" data-js="tribe-events-view-link">
          <?php esc_html_e( 'See week', 'your-text-domain' ); ?>
        </a>
      </div>

      <?php foreach ( $week as $day_date => $day ) : ?>
        <?php $this->template( 'month/calendar-body/day', [ 'day_date' => $day_date, 'day' => $day ] ); ?>
      <?php endforeach; ?>
   
    </div>

  <?php endforeach; ?>

</div>

A couple of things are happening here. First, we’re building the week view URL using the template tag tribe_events_get_url(). Secondly, and more importantly, we’re hooking into the AJAX manager JavaScript using the attribute data-js="tribe-events-view-link" on the link. This tells the AJAX manager to intercept the link click and fetch the next view via AJAX. Note that this only works for views built using The Events Calendar or Events Calendar Pro plugins and will not work for other links.

Now let’s add some styles to the link. Add the following CSS to your styles.css file or any stylesheet that will be included on the month view. You can even use a custom CSS template for The Events Calendar if you’d like.

.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__week {
  position: relative;
}

.tribe-events .tribe-events-calendar-month__week-link-wrapper {
  border-right: 1px solid #E4E4E4;
  border-bottom: 1px solid #E4E4E4;
  height: 100%;
  position: absolute;
  right: 100%;
  text-align: center;
  top: -1px;
  transform: rotateZ(180deg);
  writing-mode: vertical-rl;
}

.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__week-link-wrapper {
  display: block !important;
  visibility: visible;
}

.tribe-events .tribe-events-calendar-month__week:last-child .tribe-events-calendar-month__week-link-wrapper {
  border-top: 1px solid #E4E4E4;
  height: calc(100% + 1px);
}

.tribe-events .tribe-events-calendar-month__week-link:hover,
.tribe-events .tribe-events-calendar-month__week-link:focus {
  opacity: 0.7;
}

Save your stylesheet and visit month view in your browser. You should see something similar to this:

Horray! While this looks good, what’s even cooler is that when you click on the “See week” link, you’ll be directed to the week view for that week via AJAX. Congratulations! You’ve just successfully hooked into the AJAX manager and created your own in-view navigation.