自定义 SharePoint 2013 日历日名称

Question

我目前正在参与一个 Sharepoint 项目，但之前没有 Sharepoint 经验。我必须更改 SharePoint 2013 日历中显示日期名称的默认长度。

我需要星期一而不是星期一，星期二而不是星期二等等。

我找到了以下解决方案：http://sharepointom.blogspot.com/2017/07/change-calendar-days-name-to-short-3.html

问题是，当我更改月份时它不起作用。正在进行 AJAX 调用，新月份的新日期到来，改回长日名称。

有谁知道如何解决这个问题？

Answer 1

你需要等待ajax加载事件，你可以这样做：

// 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();
    }
}

用你当前的方法替换 your_function() 应该没问题。

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

Answer 2

将以下代码添加到日历视图页面的脚本编辑器 Web 部件中。

<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

我找到了一个使用 CSS 来解决这个问题的最简单的方法。其他 javascript 答案也是正确的。

@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';
    }
}