How to display FullCalendar calendar based on selected month and year?

Question

I'm quite bad at javascript and jquery. I need help solving this task.

How do I display/show the calendar based on selected month and year from this form.

<form class="navbar-search" action="search.php?id=<?= $id ?>" method="post">
    <div class="row">
        <div class="col">
            <label for="year">YEAR:</label>
            <input name="year" value="<?=$year?>" class="form-control form-control-user" id="yearpicker" placeholder="Please Choose..." autocomplete="off">
        </div>
        <div class="col">
            <label for="month">MONTH :</label>
            <input name="month" value="<?=$month?>" class="form-control form-control-user" id="monthpicker" placeholder="Please Choose..." autocomplete="off">
        </div>
    </div><br>
    <button name="search" id="search" type="submit" class="btn btn-primary btn-user btn-block"><i class="fas fa-search fa-sm"></i> SEARCH</button>
    <hr>
</form>

I'm using customise datepicker in this form input btw.

And here's the calendar:

This is the js/jquery that should call the calendar. But I have no idea how and where to send the year and month value to the calendar.

$(document).ready(function() {
        $('#calendar').fullCalendar({
            editable: true,
            events: "fetch-event.php?id=<?php echo $id ?>",
            displayEventTime: false,
            eventRender: function(event, element, view) {
                if (event.allDay === 'true') {
                    event.allDay = true;
                } else {
                    event.allDay = false;
                }
            },
        });

First question: why are you using such an old version of fullCalendar? The newest versions have much better performance, more features and less bugs, and don't require jQuery. Check it out on the fullCalendar website — ADyson, Dec 09 '22 at 09:54
But if you insist on that version, you can call the https://fullcalendar.io/docs/v3/gotoDate function anytime you want to change the calendar's date. To set the date when the calendar is loaded the first time, use the https://fullcalendar.io/docs/v3/defaultDate option. (Equivalent options and functions exist in the newer version too but are named differently and may operate slightly differently - check the documentation.) — ADyson, Dec 09 '22 at 09:56
I'm sorry but can you elaborate how to use gotoDate function? i still dont get it. thanks! — Jasmirulnaim, Dec 12 '22 at 01:14
It's just a function you can call. e.g. `$("#calendar").fullCalendar( "gotoDate", "2022-01-01" );`. See also https://fullcalendar.io/docs/v3/methods for general help on using the functions in fullcalendar 3. And see https://fullcalendar.io/docs/v3#toc for general help on using fullcalendar 3. — ADyson, Dec 12 '22 at 01:17

score 1 · Accepted Answer · answered Dec 12 '22 at 02:18

I got it now thanks to ADyson ! I figure it out.

I added the date variable to store date from php. And gotoDate method in fullCalendar

$(document).ready(function() {
        $('#calendar').fullCalendar({
            // editable: true,
            events: "fetch-event.php?id=<?php echo $id ?>",
            displayEventTime: false,
            eventRender: function(event, element, view) {
                if (event.allDay === 'true') {
                    event.allDay = true;
                } else {
                    event.allDay = false;
                }
            },
        });
        date = '<?= $tahun ?>-<?= date('m', strtotime($bulan)) ?>-01';
        $('#calendar').fullCalendar('gotoDate', date);
    });

See also fullcalendar.io/docs/v3/methods for general help on using the functions in fullcalendar 3. And see fullcalendar.io/docs/v3#toc for general help on using fullcalendar 3.

How to display FullCalendar calendar based on selected month and year?

1 Answers1