Fullcalendar.js在日历下面添加月份标题

Question

我一直在尝试找到一种在自定义UI中插入日历的常用标题标题的方法。

下面是日历布局的图像 -

我已经设法通过

获得了下一个/上一个事件

`

$('#calendar-prev').click(function() {
    $('#calendar').fullCalendar('prev');
});
$('#calendar-next').click(function() {
    $('#calendar').fullCalendar('next');
});

`

同样，我还使用 -

管理更改月视图和周视图

`

$('#calendar-month-view').click(function() {
    $('#calendar').fullCalendar( 'changeView', 'month' );
});
$('#calendar-week-view').click(function() {
    $('#calendar').fullCalendar( 'changeView', 'basicWeek' );
});

`

那么现在如何在下一个/上一个箭头之间添加日历标题，其中当前“月份标题”文本是手动编写的？

Answer 1

为了显示next / prev之间的标题，我做了以下内容：

JS -

    function showMonth () {
    var calendarDate = $('#calendar').fullCalendar('getView');
    $('.calendar-title').text(calendarDate.title);
}

$('#calendar-prev').click(function() {
    $('#calendar').fullCalendar('prev');
    showMonth ();
});

$('#calendar-next').click(function() {
    $('#calendar').fullCalendar('next');
    showMonth ();
});

HTML -

<ul class="schedule-filter-by-date">
    <li><a id="calendar-prev"><i class="ti-arrow-circle-left"></i></a></li>
    <li><span class="calendar-title"></span></li>
    <li><a id="calendar-next"><i class="ti-arrow-circle-right"></i></a></li>
</ul>

感谢您的帮助@Kushal和@Chintan！ ：）

Answer 2

这里我做了一个共同的功能如下。

function showMonth () {
    var calendarDate = $('#calendar').fullCalendar('getDate');
    $('.calendar-title').html(calendarDate.format('MMMM'));
}

只需在导航和日历视图中调用它，即可更改点击事件。

喜欢

$('#calendar-prev').click(function() {
    $('#calendar').fullCalendar('prev');
    showMonth ();
});

享受！