自定义SharePoint 2013日历日名称

时间:2018-02-19 17:15:49

标签: javascript jquery css sharepoint calendar

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

enter image description here

我需要周一而不是周一,周二而不是周二等。

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

问题是,当我更改月份时,它将无效。正在进行AJAX通话,并且新月的新日期将来临,改为长日名称。

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

3 个答案:

答案 0 :(得分:2)

你需要等待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

答案 1 :(得分:1)

将以下代码添加到日历视图页面的脚本编辑器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>

enter image description here

答案 2 :(得分:1)

我使用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';
    }
}