Power Pages: Calendar Click Event – Updated!

Last year I published a post about the JavaScript we used to override the click functionality of an event displayed on a List displayed as a calendar. It was a bit trickier than I expected because of the way the List functionality wires in the calendar plugin being used. In the end, I found a solution that involved attaching a click event handler to the <div> that wraps the entire list, and applying filters to target the elements I was interested in. But, to get that to work, I needed to disable the slide functionality of the calendar (which is used to expand a particular day), since that interfered with my event.

Back then, disabling the slide functionality wasn’t a big deal, because I wasn’t working with many events. However, on a recent project, a colleague of mine was working on a calendar that could have a lot of events, so he needed the slide functionality, but still wanted clicking the event to take you to another page.

Lucky for me, my colleague is one of the smartest Power Pages developers out there – he used to work at both Adxstudio and Microsoft building Power Pages, so he knows his way around the product. He was able to find a very elegant solution.

Instead of trying to handle DOM click events, he used a built-in feature of the Bootstrap Calendar plugin to set a URL for each of the events. With a URL set, the plugin naturally takes the user to the URL when they click on it.

He used the same trick as me to override the plugin options, but instead of using it to turn off the slide functionality, he used it to add the URL property to each event object:

var oldCalendar = $.fn.calendar;
$.fn.calendar = function (params) {
    var events_source = params.events_source;
    params.events_source = function (params) {
        var events = events_source.call(this, params);
        return events.map(function(event) {
            event.url = "{{sitemarkers['Event Details'].Url}}?id=" + event.id;
            return event;
        });
    };
 
    return oldCalendar.call(this, params);
};

This code overrides the events_source parameter with a copy of the original parameter, extended with the URL property.

Works like a charm. Unfortunately, this is only a solve if your need for the click event was to go to another page. If you wanted to do something else in your click event, you’d still need another option like my previous post.