blog.scoreman.net

Week numbers in calendar view – revisited for SharePoint Online

A long time ago I wrote some posts on how you could add week numbers to the monthly calendar view both in SharePoint 2007 and in SharePoint 2010. The solution in SP2007 depended on overriding the calendar’s control template using server side code. Since full trust code is no option in SharePoint Online that does not work. The solution in SP2010 used client side JavaScript but since the calendar view is totally rewritten in SP2013 the SP2010 solution does not work either. So I thought that I would revisit this topic once again for a Office 365/SharePoint Online/SharePoint 2013 version.

The code basically has two main parts. First we need to intercept the client side calls that the calendar view does in SharePoint 2013. Thanks to this post for showing how to do that.

Contoso.WeekNumber.InterceptCalendarEvent = function () {
    ExecuteOrDelayUntilScriptLoaded(function () {
        var onItemsSucceed = SP.UI.ApplicationPages.CalendarStateHandler.prototype.onItemsSucceed;
        SP.UI.ApplicationPages.CalendarStateHandler.prototype.onItemsSucceed = function ($p0, $p1) {
            onItemsSucceed.call(this, $p0, $p1);
            Contoso.WeekNumber.AddWeekNumbers();
        };
    }, "SP.UI.ApplicationPages.Calendar.js");
}

Secondly using JQuery we can find all TH elements and add week numbers.

Contoso.WeekNumber.AddWeekNumbers = function () {
    $(".ms-acal-month > TBODY > TR > TH[evtid='week']").each(function () {
        var firstDay = new Date($(this).attr("date"));
        if (firstDay.toString() != "NaN" && firstDay.toString() != "Invalid Date") {
            var week = firstDay.getWeek(firstDay.getDay());
            week = (week.toString().length == 1) ? '0' + week.toString() : week.toString();
            $(this).html("<div class='ms-picker-weekbox'><acronym title='Week number " + week + "'>" + week + "</acronym></div>");
            $(this).attr("class", "ms-picker-week");
            $(this).css("vertical-align", "middle");
        }
    });
}

For calculating week numbers I used the same JavaScript function that I used in the post on how to add week numbers in SharePoint 2010. It calculates week numbers based on the Gregorian calendar but you can replace that function with whatever you want.

I’ve attached a working solution that is ready to deploy to Office 365. Run the solution from Visual Studio, trust the app and then click on the init button. If all goes well JQuery and a custom javascript file will be added to the site assets library. Also custom actions will be added to the host web so that the scripts are included during page load. This example also works with minimum download strategy (MDS) turned on. The end result looks like this:

3 Responses to “Week numbers in calendar view – revisited for SharePoint Online”

  1. erik Says:

    Hi,
    This is what i was waiting for!
    Problem is, I could not open the solution in visual studio.
    Can I use a weeknumber.js the same way You did with 2010?
    Current weeknumber.js does not work that way.
    Thanks in advance,

  2. erik Says:

    Created a weeknumber.js the same way you did with 2010.
    People can find it at http://www.csite.nl/docs en refer to it with content editor webpart.
    Further more I use a small sized jquery file.

  3. Ludvig F. Aarstad Says:

    just got this compiled and added to our sharepoint online, but sadly it wont work… Addign the app to our sharepoint online site, I get an error saying:

    Sorry, something went wrong
    An unexpected error has occurred.

    Technical Details
    Troubleshoot issues with Microsoft SharePoint Foundation.
    Correlation ID: cb5a319d-60e7-2000-213e-a373e8426e8f
    Date and Time: 25.09.2015 00:55:25

    Any ideas?

Leave a Reply