Is there a way to link to a specific event?

[Dirk Kiesewetter]

Hello, really liking this plugin. I have an unusual request – is there a way to link to a specific calendar item? The reason is we needed to add an event to the calendar that is not a part of our normal workflow (it is not in any auto-generated .ics files). I made an ics file specific for this event, and I’d like to be able to point people specifically to the event, rather than pointing them to the calendar. Ideally, it would be a link to the lightbox for that event. Not sure if this is possible, but thought I would ask.

[room34]

At this point this is not something the plugin can do automatically, but it would probably be possible with a bit of custom jQuery.

The first thing you’d need to do is give the calendar an ID Attribute. (This is under the Advanced tab of the Calendar Builder, or if you put it directly in the shortcode, it’s guid.)

Once you’ve done that, if you inspect the code on the page, you’ll see that each date’s ul.events list has a aria-labelled-by attribute that consists of the ID Attribute, a hyphen, and the date in YYYYMMDD format, like this:

<ul class="events" aria-labelledby="my-id-attribute-20230313">

Then within the list, the li.event tags have a class indicating the starting time of the event, in tHHMMSS format, like this:

<li class="event t093000">

Unfortunately there’s not a distinction between multiple events that start at the same time, so if you try to do this with an event that shares its start time with another event, you’d have to add some additional logic (i.e. :nth-of-type()) to what follows.

This all gives you a way to write some jQuery with a selector targeting the event, which would look like this:

jQuery('.ics-calendar .events[aria-labelled-by="my-id-attribute-20230313"] .event.t093000')

You could add a special query string to the URL of the page, check for that on page load, and then trigger the lightbox. It may look something like this. (Note, I have not actually tested this code, it’s just the idea.):

jQuery(window).on('load', function() {
    if (location.search.indexOf('whatever-you-add-to-the-query-string') != -1) {
        jQuery('.ics-calendar .events[aria-labelled-by="my-id-attribute-20230313"] .event.t093000').trigger('click');
    }
});

[Dirk Kiesewetter]

Thanks for the reply. That works, but since the event I want to highlight is in October, is there a way to show October programmatically? I can hide the current month & show October with jQuery, but it’s not as smooth as I would like (first the page loads the current month, and then hides it and replaces it with October. The lightbox hides this to some degree, but it is still noticeable.

[room34]

You can get the page to load with a specific month by appending a query string to the URL:

?r34icsym=202310

This is useful for linking to the page from elsewhere on your site or in marketing materials like email newsletters, but of course it’s not great if you want people to just navigate to the page and have it already show that.

If your calendar does not need to be able to show events before October, you could configure the calendar so the Start Date is in October. Other than that, it’s also possible with a bit of jQuery to force the same effect as the query string above, without actually using the query string.

[Author]

Posts