Question

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

Answer 1

“gotoDate”方法正是您想要使用的方法。它接受一个参数作为字符串或“Moment”对象（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查询构建select。你不应该使用查询，但目前，这对我来说比较容易，因为无论如何我都有日历，如果我的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>

FullCalendar IO - 如何制作月份下拉列表选择列表

2 个答案: