Question

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

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

每次按下上一个按钮或下一个按钮，它再次渲染范围，所以如果我将视图改变五次，它会渲染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/以了解格式令牌的作用。

P.S。值得注意的是，您之前的尝试有很多问题，超出了您在问题中提到的问题：

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

2）fullCalendar＆＃39; S GETDATE方法（参见https://fullcalendar.io/docs/current_date/getDate/）返回一个momentJS对象，从中可以直接得到当前月（http://momentjs.com/docs/#/get-set/month/），所以有＆＃39; S绝对没有然后把它变成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/。

多次完整日历渲染元素

1 个答案: