Customize SharePoint Calendar Days Name using jQuery

How to Customize SharePoint Calendar Days Name using jQuery




Step1: Create a page and calendar list to it.
Step2: Now add Script Editor Web Part to it and paste the below code.

Code-

<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>

Comments

Popular posts from this blog

How to Customize exported excel's cell background color in Datatables

Customizing SharePoint list and implementing Quick search using jQuery

Populate dropdown using jquery ajax in SharePoint