Customizing SharePoint 2013 calendar day names

Question

I am currently getting into a Sharepoint project, but have no prior Sharepoint experience. I have to change the default length of displayed day names in SharePoint 2013 Calendar.

I need Mon instead of Monday, Tue instead of Tuesday etc.

I found the following solution: http://sharepointom.blogspot.com/2017/07/change-calendar-days-name-to-short-3.html

The problem is, that it will not work when I change the month. AJAX call is being made and new date from new month comes, changing back to long days names.

Does anyone knows how to fix this?

Answer 1

You need to wait for the ajax loaded event, here is how you can:

// execute the script only when the calendar JS file loads 
LoadSodByKey("SP.UI.ApplicationPages.Calendar.js", function () {
    WaitForCalendarToLoad();
});


function WaitForCalendarToLoad() {
 // running your function for the first time IF YOU NEED TO!
    your_function();


    var _onItemsSucceed = 
     SP.UI.ApplicationPages.CalendarStateHandler.prototype.onItemsSucceed; 
     SP.UI.ApplicationPages.CalendarStateHandler.prototype.onItemsSucceed = 
       function($p0, $p1) { 
            _onItemsSucceed.call(this, $p0, $p1);

        // now let it call your function each time the calendar is loaded
       your_function();
    }
}

Replace your_function() with your current method and it should be fine.

From https://social.technet.microsoft.com/Forums/office/en-US/828440cc-e822-4af3-b500-10031e2ee0a7/change-calendar-web-part-days-name?forum=sharepointgeneral

Answer 2

Add the code below into a script editor web part in the calendar view page.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//execute the script only when the calendar JS file loads 
LoadSodByKey("SP.UI.ApplicationPages.Calendar.js", function () {
    WaitForCalendarToLoad();
});
function WaitForCalendarToLoad() {
    //running your function for the first time IF YOU NEED TO!
    ChangeDaysName();
    var _onItemsSucceed = 
     SP.UI.ApplicationPages.CalendarStateHandler.prototype.onItemsSucceed; 
     SP.UI.ApplicationPages.CalendarStateHandler.prototype.onItemsSucceed = 
       function($p0, $p1) { 
            _onItemsSucceed.call(this, $p0, $p1);
        //now let it call your function each time the calendar is loaded
       ChangeDaysName();
    }
}
function ChangeDaysName(){
    $("table.ms-acal-month > tbody > tr > th.ms-acal-month-top").each(function(){
        //get the first 3 chars from day name
        $cell = $(this).text().substring(0,3);
        $(this).text($cell);

   });
}
</script>

Answer 3

I found a simpliest solution for this problem using CSS. Other javascript answers are correct as well.

@media only screen and (max-width : 800px) {
    /* calendar */
    .ms-acal-month-top span {
        display: none;
    }
    .ms-acal-month-top:nth-of-type(2)::after  {
        content: 'MON';
    }
    .ms-acal-month-top:nth-of-type(3)::after  {
        content: 'TUE';
    }
    .ms-acal-month-top:nth-of-type(4)::after  {
        content: 'WED';
    }
    .ms-acal-month-top:nth-of-type(5)::after  {
        content: 'THU';
    }
    .ms-acal-month-top:nth-of-type(6)::after  {
        content: 'FRI';
    }
    .ms-acal-month-top:nth-of-type(7)::after  {
        content: 'SAT';
    }
    .ms-acal-month-top:nth-of-type(8)::after  {
        content: 'SUN';
    }
}