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

Populate dropdown using jquery ajax in SharePoint

Clear DataTable on button click