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

Question

我一直在努力寻找一种方法来在自定义 UI 中插入通常的 header 日历标题。

下面是日历布局的图像 -

我已经通过使用

成功举办了 next/prev 活动

`

$('#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' );
});

`

那么现在如何在 next/prev 箭头之间添加日历标题，其中当前 "Month Title" 文本是手动编写的？

Answer 1

这里我做了一个常用的函数如下

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

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

喜欢

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

尽情享受吧！

Answer 2

为了在 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 的帮助！ :)

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

Fullcalendar.js add month title below the calendar

javascript

jquery

calendar

fullcalendar