当WeekView包含两个不同的月份时，在FullCalendar中仅显示一个月的名称

Question

我正在使用fullcalendar.js进行开发，并且在周视图中，当一周来自2个不同月份（例如7月27日 - 8月2日）时，fullcalendar周视图显示两个月的文本。我到处搜索，但没有解决方案。也许stackoverflow用户可以帮助我。

这就是我所拥有的：

这就是我所需要的：

我看到了日期格式但是 MMMM YYYY ，并且它会自动返回两个月或一个月，而且似乎无法更改此内容。

在Calendar.defaults（非最小化代码中的aprox。第8300行）对象中，我可以注意到这一点：

titleRangeSeparator: ' \u2014 ', // emphasized dash
monthYearFormat: 'MMMM YYYY', // required for en. other languages rely on datepicker computable option

正如我所解释的那样，monthYearFormat似乎只有一个月，但在特定时刻它与titleRangeSeparator合并为两个月。

你知道这是如何解决的吗？

谢谢。

修改

我找到了构成这个复杂字符串的函数，但是我想要改变的月和日视图使用它（我只需要周视图）。代码是下一个。如何修改此代码以解决它？

// Date Range Formatting
// -------------------------------------------------------------------------------------------------
// TODO: make it work with timezone offset

// Using a formatting string meant for a single date, generate a range string, like
// "Sep 2 - 9 2013", that intelligently inserts a separator where the dates differ.
// If the dates are the same as far as the format string is concerned, just return a single
// rendering of one date, without any separator.
function formatRange(date1, date2, formatStr, separator, isRTL) {
   var localeData;

date1 = fc.moment.parseZone(date1);
date2 = fc.moment.parseZone(date2);

localeData = (date1.localeData || date1.lang).call(date1); // works with moment-pre-2.8

// Expand localized format strings, like "LL" -> "MMMM D YYYY"
formatStr = localeData.longDateFormat(formatStr) || formatStr;
// BTW, this is not important for `formatDate` because it is impossible to put custom tokens
// or non-zero areas in Moment's localized format strings.

separator = separator || ' - ';

return formatRangeWithChunks(
    date1,
    date2,
    getFormatStringChunks(formatStr),
    separator,
    isRTL
);
}
fc.formatRange = formatRange; // expose
function formatRangeWithChunks(date1, date2, chunks, separator, isRTL) {
var chunkStr; // the rendering of the chunk
var leftI;
var leftStr = '';
var rightI;
var rightStr = '';
var middleI;
var middleStr1 = '';
var middleStr2 = '';
var middleStr = '';

// Start at the leftmost side of the formatting string and continue until you hit a token
// that is not the same between dates.
for (leftI=0; leftI<chunks.length; leftI++) {
    chunkStr = formatSimilarChunk(date1, date2, chunks[leftI]);
    if (chunkStr === false) {
        break;
    }
    leftStr += chunkStr;
}

// Similarly, start at the rightmost side of the formatting string and move left
for (rightI=chunks.length-1; rightI>leftI; rightI--) {
    chunkStr = formatSimilarChunk(date1, date2, chunks[rightI]);
    if (chunkStr === false) {
        break;
    }
    rightStr = chunkStr + rightStr;
}

// The area in the middle is different for both of the dates.
// Collect them distinctly so we can jam them together later.
for (middleI=leftI; middleI<=rightI; middleI++) {
    middleStr1 += formatDateWithChunk(date1, chunks[middleI]);
    middleStr2 += formatDateWithChunk(date2, chunks[middleI]);
}

if (middleStr1 || middleStr2) {
    if (isRTL) {
        middleStr = middleStr2 + separator + middleStr1;
    }
    else {
        middleStr = middleStr1 + separator + middleStr2;
    }
}

return leftStr + middleStr + rightStr;
}

Answer 1

不幸的是，这并没有直接支持，但是仍然有一种比修改FC源更好的方法（这会使补丁和内容变得混乱）。

我们可以使用几个渲染挂钩来修复事后的格式。 viewRender无效，因为在标题更改之前它被称为。所以我们可以使用eventAfterAllRender代替。

eventAfterAllRender:function(){
    if(view.name!=="agendaWeek")
        return;
    var $title = $("#calendar").find(".fc-toolbar h2"); //Make sure this is the right selector
    var text = $title.text();
    text = text.match(/.*? /)+text.match(/[0-9]+/);
    $title.text(text); //replace text
}

<强> JSFiddle - titleFormat hack

这不是世界上最优雅的东西，但它应该比修改源更好。如果有任何问题，请告诉我。

编辑：

此外，如果您遇到问题，在正确的日期格式之前闪烁错误的日期格式，请使用css使标题不可见。然后在eventAfterAllRender中的元素中添加一个类，使其再次可见。