How to make a month dropdown select list

I'm trying to figure out how to customize the FullCalenaer javascript event calendar (http://fullcalendar.io/). I would like to add a select list above my calendar (which displays in the month format) which would list months 12 months in the future and 12 back. When the user makes a selection, it would jump to that month. I think it will need to implement the gotoDate function (http://fullcalendar.io/docs/current_date/gotoDate/) but I'm getting a bit confused how to use it.

---

The "gotoDate" method is exactly what you would want to use. It accepts one argument as a string or a "Moment" object (http://momentjs.com/). Moment is a third party library that Adam Shaw uses in FullCalendar to help him handle dates and times. The string is recommended to be an ISO8601 date; however, FullCalendar, or Moment, also accepts 'MM/dd/yyyy'. The way you create a Moment object is the following:

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

If each option in your select box has a value of a date, (I would suggest the first of each month), then all you would have to do is pass FullCalendar the selected value.

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

This will send your calendar to the selected date.

---

better late than never. I just made a dropdown list and placed it on top of the calendar.

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

next part builds up the select with mysql query. you shouldn't use a query for that but at the time being, this was easier for me because i have the calendar there anyway and if there are no dates in my mysql calendar, the user is not supposed to be able to navigate there either... anyway:

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

链接地址: http://www.djcxy.com/p/81280.html

上一篇: 事件在Fullcalendar中没有显示

下一篇: 如何制作月份下拉选择列表