Disable event clicks in week view

[Andrew Bruske]

Hi

I am looking to have just a calendar showing in week view and would like to disable the ability to click on events which takes them away from the week view page. Is it possible to disable the ability for a user to click on an event and basically just allow them to view the calendar in week mode?

Regards
Andrew

[Jeremy]

Hi Andrew,

Thanks for reaching out to us!

In order to disable the ability for a user to click on an event in the Week view of your calendar, you can use some CSS.

First, head over to Appearance > Customize > Additional CSS.

Then, you can add the following snippet:

.tribe-events-week-grid .type-tribe_events a {
  pointer-events: none;
}

Please let me know if that solves your problem.

Cheers,
Jeremy

 

[Andrew Bruske]

Hi Jeremy

This is working fine in week view. Is it possible to also do this in list view? When the calendar is viewed in mobile list view I can still click on the event title.

Regards
Andrew

[Jeremy]

Hi Andrew,

Yes, you could disable the click for the list view as well. In order to do so, you could add, in Additional CSS, below the previous snippet:

.tribe-events-list .tribe-events-list-event-title a {
  pointer-events: none;
}

In case you want to get rid of the “Find out more” button, you could add the following code:

.tribe-events-list .tribe-events-read-more {
  pointer-events: none;
}

I hope this helps,

Cheers,
Jeremy

[Andrew Bruske]

Hi Jeremy

I think I got a little confused. I don’t think its list view that I’m trying to modify its the “mobile friendly” view of week view. I’m not quite sure if thats the list view or not? its when the calendar is showing in week view, if that same calendar is viewed on a mobile device the calendar shows in a list format.

What I’m trying to do is disable the ability for the use to click on any part of the event in either full week view on a normal screen as well as when the calendar changes to mobile view when viewing on a mobile device. At the moment the code below seems to only disable the ability to click an event in the normal week view, not the mobile friendly view.

.tribe-events-week-grid .type-tribe_events a {
pointer-events: none;
}

Does that make sense?

[Jeremy]

Hi Andrew,

Thanks for your clarification, I understand better now.

I visited your website on a mobile device (this page to be more accurate: http://www.xtremeice.com.au/events/) and the click was properly disabled. If the click works on your side, it might be a cache problem (you may clear your browser cache).

If your issue happens on a specific page and not the one I mentioned, please share the URL so I could have a look at it. Thanks in advance 🙂

Cheers,
Jeremy

[Andrew Bruske]

Thanks Jeremy

I think the issue might actually be internet explorer. When I view this on internet explorer and change the browser to a mobile size the links are clickable still. If I do the same thing on the same computer in Chrome it doesn’t allow clicks and this was done on a completely separate computer to the one I was working on initially

[Jeremy]

Hi Andrew,

Indeed, the pointer-events property is not supported by IE, I forgot about that.

A workaround here would be to add a polyfill in your theme.

Could you download the JS file in this page and add it to your theme (in a JS folder)?

To call this file from your theme, you can add this in the head tag: <script src="<?php echo get_template_directory_uri(); ?>/JS/pointer_events_polyfill.js></script>

Finally, in your main.js file, you can add the jQuery script:

$(document).ready(function(){
  PointerEventsPolyfill.initialize({});
});

I hope this will work.

Cheers,
Jeremy

[Andrew Bruske]

Thanks Jeremy

I have added that file under the JS folder but I’m not quite sure what you mean by:

“To call this file from your theme, you can add this in the head tag”?

I also cannot locate a “main.js” file?

[Jeremy]

Hi Andrew,

Well, if you don’t have a main.js file, you can create one, that you will save under your-theme/JS. In that file, you can just add that script:

$(document).ready(function(){
  PointerEventsPolyfill.initialize({});
});

Actually it would be a better practice to enqueue the scripts from your functions.php file, so no need to add the link to pointer_events_polyfill.js directly in the head tag.

Instead, open your functions.php file and add the following code:

function tec_extremeice_enqueue_scripts() {
    wp_enqueue_script( 'mainjs', get_stylesheet_directory_uri() . '/JS/main.js' );
    wp_enqueue_script( 'pointer_events_polyfill', get_template_directory_uri() . '/JS/pointer_events_polyfill.js' );
}

add_action('wp_enqueue_scripts', 'tec_extremeice_enqueue_scripts');

Please do let me know if that works, of if you need more help on this.

Cheers,
Jeremy

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts