完整日历 IO - 如何制作月份下拉列表选择列表

Question

我正在尝试弄清楚如何自定义FullCalenaer javascript事件日历（http://fullcalendar.io/）。我想在我的日历上方添加一个选择列表（以月份格式显示），该列表将列出未来 12 个月和 12 个月后。当用户做出选择时，它将跳转到该月。我认为它需要实现 gotoDate 函数 （http://fullcalendar.io/docs/current_date/gotoDate/），但我对如何使用它有点困惑。

Answer 1

"gotoDate"方法正是您想要使用的。 它接受一个参数作为字符串或"时刻"对象 （http://momentjs.com/）。 Moment 是 Adam Shaw 在 FullCalendar 中使用的第三方库，以帮助他处理日期和时间。建议将该字符串作为ISO8601日期;但是，FullCalendar或Moment也接受"MM/dd/yyyy"。 创建 Moment 对象的方式如下：

var momObj = moment([your date string]);

如果选择框中的每个选项都有一个日期值（我建议每个月的第一个），那么您所要做的就是向 FullCalendar 传递所选值。

[your calendar].fullCalendar('gotoDate', [selected value]);

这会将您的日历发送到所选日期。

Answer 2

迟到总比没有好。我只是制作了一个下拉列表并将其放在日历的顶部。

<script type='text/javascript'>
$(function() {
    var getdate = $('#calendar').fullCalendar('getDate');
$("select.monthpicker").val(getdate.format('YYYY-MM'));
$('#monthsubmit').on('click', function () {
    var submit = $('select.monthpicker').val();
    $('#calendar').fullCalendar( 'gotoDate', submit );
});
});
function datechange()
{
   document.getElementById('monthsubmit').click();
}
</script>

下一部分构建使用 MySQL 选择查询。 您不应该为此使用查询，但目前，这对我来说更容易，因为我无论如何都有日历，如果我的 MySQL 日历中没有日期，用户也不应该能够导航到那里......无论如何：

<div id="monthpicker">
<?php
include('connection_mysqli.php');
$result_month = mysqli_query($con,"
select distinct date_format(date,'%M %Y') as date,date_format(date,'%Y-%m') as value from calendar where date between curdate() - interval 1 month and curdate() + interval 5 month and day(date)=day(curdate())
");?>
<select class="monthpicker" onchange="datechange()">
<?php
while($row = $result_month->fetch_assoc())
        {   
        echo "<option value='".$row['value']."'>".$row['date']."</option>";
        };
?>
</select> <button id="monthsubmit" hidden>GO</button>
</div>