多次完整日历渲染元素

Question

我试图在完整日历的fc-center类之前添加span元素，所以我需要显示我要添加的那个跨度中的月份，在eventAfterAllRender中我写了这段代码

var titleHead = new Date( $('#calendar').fullCalendar('getDate') );
var month_int = titleHead.getMonth();
$(".fc-center").before('<label>' + month_int + '</label>')

每次按下prev按钮或下一个按钮，它再次渲染范围，所以如果我改变视图五次，它会渲染5个跨度

Answer 1

使用内置日期格式选项有一种更好的方法来获得相同的效果：

views: {
    month: { titleFormat: 'M - MMMM YYYY' },
    week: { titleFormat: 'M - MMM D YYYY'},
    day: { titleFormat: 'M - MMM D YYYY'}
},

这会将月份编号添加到每个常规视图类型中显示日期的开头。

有关工作示例，请参阅http://jsfiddle.net/sbxpv25p/75/。

您可以删除在eventAfterAllRender中编写的其他代码（如问题所示）。

有关上述语法的更多信息，另请参阅https://fullcalendar.io/docs/text/titleFormat/和https://fullcalendar.io/docs/views/View-Specific-Options/。另请参阅http://momentjs.com/docs/#/displaying/以了解格式标记的作用。

---

附：值得注意的是，您之前的尝试遇到了许多问题，超出了您在问题中提到的问题：

1）如上所述，它会呈现多次，因为您只是在不检查是否已存在标签的情况下继续附加更多标签。每当刷新事件时，eventAfterAllRender都会运行，这在视图或日期更改时自动完成

2）fullCalendar的getDate方法（请参阅https://fullcalendar.io/docs/current_date/getDate/）返回一个momentJS对象，从中可以直接获取当前月份（http://momentjs.com/docs/#/get-set/month/），因此绝对没有理由将其转换为JS Date对象，这只是浪费精力。

3）它显示错误的月份用于显示 - JS日期对象中的月份从零开始，因此例如在12月它将显示11而不是12.您需要将1添加到您检索的任何值。

4）与日期严重对齐，看起来很荒谬。您可以使用.prepend（）将其插入.fc-center元素内，然后它处于相同的高度。

如果你仍然希望实现这样的东西，如果你想将其他内容添加到不是月份的标题栏，那么你应该将你的代码移到日历配置之外，直到你声明fullCalendar之后，这样它只执行一次。这是你应该放在那里的 - 它与你上面的代码不同，因为它修复了上面的所有要点1-4：

var dt = $('#calendar').fullCalendar('getDate');
var month_int = dt.month() + 1;
$(".fc-center").prepend('<label>' + month_int + '&nbsp;</label>');

有关此演示，请参阅http://jsfiddle.net/sbxpv25p/77/。