CODEWITHSUNDEEP
javascriptjquerycalendarfullcalendar
Joystan Fernandes
Joystan Fernandes

Reputation: 213

Fullcalendar.js add month title below the calendar

I have been trying to find a way to insert the usual header title of the calendar in a custom UI.

Below is an image of how the calendar layout is - enter image description here

I have managed to have the next/prev events by using

`

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

`

Likewise I have also managed changing month view and week view by using -

`

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

`

So now how do I go about adding the calendar title in between of the next/prev arrows where currently "Month Title" text is manually written?

Upvotes: 1

Views: 1449

Answers (2)

Joystan Fernandes
Joystan Fernandes

Reputation: 213

In order to show the title in between of next/prev I did the following:

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>

Thanks for your help @Kushal and @Chintan! :)

Upvotes: 1

Chintan Mirani
Chintan Mirani

Reputation: 1465

Here I made a common function as below.

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

Just call it in your navigation and calendar view change click events.

Like 

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

Enjoy!

Upvotes: 0

Related Questions