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

Question

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

这就是我所拥有的：

这就是我需要的：

我看到了日期格式，但是 MMMM YYYY，它会自动 returns 两个月或一个月，似乎无法更改。

在 Calendar.defaults（非最小化代码中的大约第 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 doesn't work because it's called before the title changes. So we can use 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 中的元素添加一个 class 使其再次可见。

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

Show only one month name in FullCalendar when WeekView wraps two different months

javascript

fullcalendar

momentjs

这就是我所拥有的：

这就是我需要的：

编辑