{"id":1945660,"date":"2020-09-14T13:07:21","date_gmt":"2020-09-14T17:07:21","guid":{"rendered":"https:\/\/theeventscalendar.com\/knowledgebase\/?post_type=tribe-knowledgebase&p=1945660"},"modified":"2026-04-02T17:18:15","modified_gmt":"2026-04-02T21:18:15","slug":"adding-ajax-powered-see-week-links-to-month-view","status":"publish","type":"post","link":"https:\/\/theeventscalendar.com\/knowledgebase\/adding-ajax-powered-see-week-links-to-month-view\/","title":{"rendered":"Adding AJAX-Powered “See Week” Links to The Events Calendar’s Month View"},"content":{"rendered":"\n

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<\/a> 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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

\"adding
The red outlines show where we want our links to go.<\/figcaption><\/figure>\n\n\n\n

First, we need to override the calendar body template<\/a> 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<\/code>) and copy it to your theme folder in a tribe<\/code> folder ([your-theme]\/tribe\/events\/v2\/month\/calendar-body.php<\/code>). <\/p>\n\n\n\n

Now we\u2019re going to add the link. Edit the file so it looks like below:<\/p>\n\n\n

\n<div class="tribe-events-calendar-month__body" role="rowgroup">\n\n  <?php foreach ( array_chunk( $days, 7, true ) as $week ) : ?>\n\n    <div class="tribe-events-calendar-month__week" role="row" data-js="tribe-events-month-grid-row">\n      <div class="tribe-events-calendar-month__week-link-wrapper tribe-common-a11y-hidden">\n        <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">\n          <?php esc_html_e( 'See week', 'your-text-domain' ); ?>\n        <\/a>\n      <\/div>\n\n      <?php foreach ( $week as $day_date => $day ) : ?>\n        <?php $this->template( 'month\/calendar-body\/day', [ 'day_date' => $day_date, 'day' => $day ] ); ?>\n      <?php endforeach; ?>\n   \n    <\/div>\n\n  <?php endforeach; ?>\n\n<\/div>\n<\/pre><\/div>\n\n\n
 A couple of things are happening here. First, we\u2019re building the week view URL using the template tag tribe_events_get_url()<\/a><\/code>. Secondly, and more importantly, we\u2019re hooking into the AJAX manager JavaScript using the attribute data-js=\"tribe-events-view-link\"<\/code> 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<\/a> or Events Calendar Pro<\/a> plugins and will not work for other links. <\/p>\n\n\n\n
Now let\u2019s add some styles to the link. Add the following CSS to your styles.css<\/code> file or any stylesheet that will be included on the month view. You can even use a custom CSS template for The Events Calendar<\/a> if you’d like.<\/p>\n\n\n
\n.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__week {\n  position: relative;\n}\n\n.tribe-events .tribe-events-calendar-month__week-link-wrapper {\n  border-right: 1px solid #E4E4E4;\n  border-bottom: 1px solid #E4E4E4;\n  height: 100%;\n  position: absolute;\n  right: 100%;\n  text-align: center;\n  top: -1px;\n  transform: rotateZ(180deg);\n  writing-mode: vertical-rl;\n}\n\n.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__week-link-wrapper {\n  display: block !important;\n  visibility: visible;\n}\n\n.tribe-events .tribe-events-calendar-month__week:last-child .tribe-events-calendar-month__week-link-wrapper {\n  border-top: 1px solid #E4E4E4;\n  height: calc(100% + 1px);\n}\n\n.tribe-events .tribe-events-calendar-month__week-link:hover,\n.tribe-events .tribe-events-calendar-month__week-link:focus {\n  opacity: 0.7;\n}\n<\/pre><\/div>\n\n\n
Save your stylesheet and visit month view in your browser. You should see something similar to this:<\/p>\n\n\n\n
\"adding<\/figure>\n\n\n\n
Horray! While this looks good, what\u2019s even cooler is that when you click on the \u201cSee week\u201d link, you\u2019ll be directed to the week view for that week via AJAX. Congratulations! You\u2019ve just successfully hooked into the AJAX manager and created your own in-view navigation.<\/p>\n\n\n\n
\"adding<\/figure>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
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…<\/p>\n","protected":false},"author":3,"featured_media":1955565,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_swpsp_post_exclude":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"ep_exclude_from_search":false,"footnotes":""},"categories":[24,84],"tags":[20,23,25,58],"stellar-product-taxonomy":[158,161],"class_list":["post-1945660","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-customizing","category-theming-overview","tag-code","tag-css","tag-customizations","tag-php","stellar-product-taxonomy-events-calendar-pro","stellar-product-taxonomy-the-events-calendar"],"acf":[],"taxonomy_info":{"category":[{"value":24,"label":"Customizations"},{"value":84,"label":"Templating & Layout"}],"post_tag":[{"value":20,"label":"Code"},{"value":23,"label":"CSS"},{"value":25,"label":"Customizations"},{"value":58,"label":"PHP"}],"stellar-product-taxonomy":[{"value":158,"label":"Events Calendar Pro"},{"value":161,"label":"The Events Calendar"}]},"featured_image_src_large":["https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/02\/social-share-1024x538.png",1024,538,true],"author_info":{"display_name":"Jaime Marchwinski","author_link":"https:\/\/theeventscalendar.com\/knowledgebase\/author\/jaimetri-be\/"},"comment_info":0,"category_info":[{"term_id":24,"name":"Customizations","slug":"customizing","term_group":0,"term_taxonomy_id":24,"taxonomy":"category","description":"","parent":0,"count":157,"filter":"raw","term_order":"0","cat_ID":24,"category_count":157,"category_description":"","cat_name":"Customizations","category_nicename":"customizing","category_parent":0},{"term_id":84,"name":"Templating & Layout","slug":"theming-overview","term_group":0,"term_taxonomy_id":84,"taxonomy":"category","description":"","parent":24,"count":59,"filter":"raw","term_order":"0","cat_ID":84,"category_count":59,"category_description":"","cat_name":"Templating & Layout","category_nicename":"theming-overview","category_parent":24}],"tag_info":[{"term_id":20,"name":"Code","slug":"code","term_group":0,"term_taxonomy_id":20,"taxonomy":"post_tag","description":"","parent":0,"count":19,"filter":"raw","term_order":"0"},{"term_id":23,"name":"CSS","slug":"css","term_group":0,"term_taxonomy_id":23,"taxonomy":"post_tag","description":"","parent":20,"count":33,"filter":"raw","term_order":"0"},{"term_id":25,"name":"Customizations","slug":"customizations","term_group":0,"term_taxonomy_id":25,"taxonomy":"post_tag","description":"","parent":0,"count":102,"filter":"raw","term_order":"0"},{"term_id":58,"name":"PHP","slug":"php","term_group":0,"term_taxonomy_id":58,"taxonomy":"post_tag","description":"","parent":20,"count":78,"filter":"raw","term_order":"0"}],"_links":{"self":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1945660","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/comments?post=1945660"}],"version-history":[{"count":2,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1945660\/revisions"}],"predecessor-version":[{"id":1968427,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1945660\/revisions\/1968427"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media\/1955565"}],"wp:attachment":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media?parent=1945660"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1945660"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1945660"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1945660"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}