javascript - Fullcalendar - 月 View 中的列标题

Question

在月 View 中，如何在列标题中仅显示当前月份？

例如，这是七月的 View :

如您所见，前 4 列仍然显示 6 月(我猜这是因为 View 中的前 4 天是 6 月)。

我在 columnFormat 中使用 ddd, MMM YYYY 格式表示月份

Answer 1

无法添加条件日期格式，因此这是最简单的方法。您检查列标题中存储的日期，如果该日期是上个月，则从标题中删除 span 元素。该函数在fullCalendar初始化中的viewRender:中定义。

viewRender: function() {
    var daysOfWeek = [];
    var tableHeaders = [];

    //collect all table headers
    $(".fc-chrono th").each(function() {
        daysOfWeek.push(moment(this.attr("data-date")).get('date')); //store day, like 31
        tableHeaders.push(this); //store element
    });

    //check if the border between month is somewhere here
    var isBetweenTwoMonths = false;
    var locationOfMonthBorder = null;
    for (var i = 0; i < daysOfWeek.length - 1; i++) {
        if (daysOfWeek[i] > daysOfWeek[i+1]) { // e.g. 31 > 1
            isBetweenTwoMonths = true;
            locationOfMonthBorder = i;
            break;
        }
    }

    //now remove all the column header texts up to the first day of next month
    if (isBetweenTwoMonths) {
        for (var i = 0; i < locationOfMonthBorder + 1; i++) {
            tableHeaders[i].find("span.fc-cell-text").remove();
        }
    }
}