Change Anchor Link URL In SharePoint Calender

In this blog, you will learn how to change Anchor Link URL in SharePoint Calender.

I have a SharePoint list with several views. In that, I have a calendar view. Here, I  am using SharePoint calendar to display all events. The calendar list is inherited from event content type.

For every event, there are several columns like event name, event link(URL), Event Date...etc. For some events, there may be some  URL in link column and some columns may be empty.

So in browser, the calendar will display with hyperlinks, with href attribute value. In this case, we need to rewrite the href value from JavaScript code. So, rewriting the href attribute is some tricky problem, because the link already contains the href and when we are calling hyperlink clink event , that link href is already redirected to the url. Here, we need some customization code.

So, in calendar, if I click the event, suppose if that event has the LINK with URL, then I have to redirect to the new url. If the link url is empty, then I have to redirect to the event url.

Here, when I am clicking on anchor tag in calendar, I am calling a REST API function to get the link value of that event. I am checking the link value. If the value is null, then I am redirecting to event details and if the value is not null, then am redirecting to the link which am getting  from REST API call.

Here, I am using two mail functions which are.

1. e.stopPropagation();
   means it will stop the redirecting value which is assigned initially.
   
   
2. e.preventDefault();
   means it will stop the default value of the anchor tag href value.

This code will be inserted in additional page head tag, then only it will work.

Here is my code.

<script type="text/javascript">
    ExecuteOrDelayUntilScriptLoaded(
        MyCalendarHook,
        "SP.UI.ApplicationPages.Calendar.js");

    function MyCalendarHook() {
        var _patchCalendar = function() {

            $('.ms-acal-rootdiv .ms-acal-item').click(function(e) {
                var itemId = $('a', $(this)).attr('href').split('?ID=')[1];
                //alert('Item with ID ' + itemId + ' was clicked!');

                // here am calling sharepoint rest API calling for getting the link column value.

                $.ajax({
                    url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('2017 Calender')/Items?$select=Link&$filter=ID eq '" + itemId + "'",
                    type: "GET",
                    async: false, //new changed
                    headers: {
                        "accept": "application/json;odata=verbose"
                    },
                    success: function(data) {
                        $.each(data.d.results, function(index, item) {
                            //chacking the value is null or not
                            if (item.Link != null) {
                                e.stopPropagation();
                                e.preventDefault();
                                window.location.href = item.Link; //"https://kellyservices1.sharepoint.com/sites/creative/hqcsr/Lists/2017v2/Item/editifs.aspx?List=c8c4fc65-151d-4c5b-a113-11724d79db79&ID=3";
                            }
                        });

                    },
                    error: function(xhr) {
                        alert(xhr.status + ': ' + xhr.statusText);
                    }
                });

                e.preventDefault();
                return false;
            });
        };

        var _onItemsSucceed = SP.UI.ApplicationPages.CalendarStateHandler.prototype.onItemsSucceed;
        SP.UI.ApplicationPages.CalendarStateHandler.prototype.onItemsSucceed = function($p0, $p1) {
            _onItemsSucceed.call(this, $p0, $p1);
            _patchCalendar();
        };
    }
</script>