如何根据使用 FullCalendar 从表单输入中选择的月份和年份显示日历？

Question

我有一个表单，用户可以使用自定义日期选择器选择年份和月份。提交表单后，我想使用 FullCalendar 显示所选月份和年份的日历。但是，我不确定如何将选定的年份和月份值从表单传递到 FullCalendar 以动态生成日历。

这是我的表单结构：

<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>

我在此表单输入中使用自定义日期选择器。

这是日历：

这是我在 FullCalendar 中使用的 JavaScript：

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

有人可以指导我如何将选定的年份和月份值从表单传递到 FullCalendar，以便它可以相应地显示日历吗？

谢谢你。

Answer 1

感谢ADyson，我现在得到了它！我明白了。

我添加了

date

变量来存储 php 中的日期。以及 fullCalendar 中的

gotoDate

方法

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

另请参阅 fullcalendar.io/docs/v3/methods 了解有关使用 fullcalendar 3 中的功能的一般帮助。并参阅 fullcalendar.io/docs/v3#toc 了解有关使用 fullcalendar 3 的一般帮助。