SharePoint 2013日历星期名称显示自定义问题求助

Hey there! I totally get how frustrating this is as someone new to SharePoint—you get the day names looking right on load, then switch months and they bounce back to full names. Let’s fix this properly, since the root issue is that your initial fix only runs once, but SharePoint uses AJAX to load new month data without reloading the whole page.

Why Your First Fix Broke #

The solution you found updates day names on the initial page load, but when you switch months, SharePoint fetches new calendar data via AJAX and re-renders the day headers from scratch. That overwrites your abbreviation changes, which is why you see full names again.

Step-by-Step Solution #

We’ll create a reusable function to swap full day names for abbreviations, then make sure it runs both on page load and every time the calendar finishes loading new month data.

1. Write the Day Name Replacement Function

This function maps full day names to their 3-letter abbreviations and updates the calendar header cells:

function updateCalendarDayNames() {
    // Map full day names to their abbreviations
    const dayAbbrevMap = {
        "Monday": "Mon",
        "Tuesday": "Tue",
        "Wednesday": "Wed",
        "Thursday": "Thu",
        "Friday": "Fri",
        "Saturday": "Sat",
        "Sunday": "Sun"
    };

    // Target the calendar's day header cells
    $(".ms-acal-title div").each(function() {
        const fullDayText = $(this).text().trim();
        if (dayAbbrevMap[fullDayText]) {
            $(this).text(dayAbbrevMap[fullDayText]);
        }
    });
}

2. Hook Into SharePoint’s Calendar Events

SharePoint’s calendar triggers a specific event when AJAX updates finish. We’ll use this to re-run our function after every month switch:

// Run the function when the page first loads
$(document).ready(function() {
    updateCalendarDayNames();
});

// Wait for SharePoint's calendar script to load, then listen for AJAX updates
SP.SOD.executeFunc('sp.ui.applicationpages.calendar.js', 'SP.UI.ApplicationPages.CalendarNotify', function() {
    SP.UI.ApplicationPages.CalendarNotify.addHandler(function() {
        // Add a small delay to make sure SharePoint finishes rendering the new month first
        setTimeout(updateCalendarDayNames, 100);
    });
});

3. Add the Script to Your Page

To apply this fix:

• Edit the page with your calendar web part
• Add a Script Editor Web Part to the page (you can find it under "Media and Content")
• Paste the combined code into the Script Editor’s content box
• Save the page and test switching months—your abbreviations should stick now!

Quick Tips #

• If the day headers aren’t updating, right-click a day name in your calendar and inspect it to check the CSS class. If it’s not .ms-acal-title div, update the selector in the function to match.
• The 100ms delay gives SharePoint time to re-render the day headers before our function runs. You can adjust this if needed (most cases 50-150ms works).

内容的提问来源于stack exchange，提问作者Marek