Question

我试图在像http://edifyzone.net/docs/cal.png这样的单一界面中同时实现datepicker和fulcallendar。

当我点击datepicker插件中的日期时，我想显示所选日期的fulcallendar视图。

当我点击日期时，我想设置 theDate 全局变量，因此我可以在 eventResources 部分下的fulcallendar代码中使用它作为我的 selectedDate 参数（我将此值发布到json-events）。

由于某种原因 theDate 全局变量未更新。即使我在datepicker插件中的 onSelect 回调中设置了 theDate 变量，它始终会显示初始值。

但是，如果我点击一个单元格，它会显示更新的（正确的）值。（参见fulcalendar 选择回调函数。我警告theDate变量）

我该如何解决这个问题？有人可以帮我吗？我的要求是将 theDate 值发布到json-events文件中。非常感谢。

   <script>
        $(function() {

            window.theDate = new Date();//Get todays date and initialize
            //I tried var theDate = new Date(); but didn't work


        //datepicker
        var datepicker = $("#datepicker").datepicker({
            dateFormat: 'yy-m-d',
            inline: true,
            numberOfMonths: [2, 1],
            showButtonPanel: true,
            onSelect: function(dateText, inst) {

                var date = $(this).datepicker('getDate'),
                        day = date.getDate(),
                        month = date.getMonth(),
                        year = date.getFullYear();

                window.theDate = dateText;// Set the theDate value onDate select
                selected.val(dateText);

                //set the calendar
                calendar.fullCalendar('gotoDate', year, month, day);

            }
        });//end datepicker

        //Fullcalendar
        var calendar = $('#calendar').fullCalendar({
            header: {left: '',center: 'title',right: ''},
            select: function(start, end, allDay, event, resourceId) {
                alert(theDate); // this alert shows the correct updated date
            },
            resources: 'calendar/json-staff',
            eventSources: [
                {
                    url: 'calendar/json-events',
                    type: 'POST',
                    data: {
                        //This theDate value is not being updated
                        selectedDate: theDate // get the global theDate value
                    },
                    success: function($data) {
                        console.log($data.responseText);
                        //alert($data);
                    },
                    error: function($data) {
                        console.log($data);
                        alert('Error: check the console!  ' + $data.responseText);
                    },
                    color: 'yellow',   // a non-ajax option
                    textColor: 'black' // a non-ajax option
                }
            ]
            //events: 'calendar/json-events'
        });




    });//end of jquery
</script>

<html>
        <table border="0" width="100%">
            <tr>
                <td width="10%" valign="top">
                    <div id="datepicker"></div>
                </td>
                <td valign="top"><div id='calendar'></div></td>
            </tr>
        </table>
</html>

Answer 1

我修复了这个问题，

我将fullCallender脚本放在DatePicker的onSelect fucntion中，

....
onSelect: function(dateText, inst) {

    //var d = new Date(dateText); // This line only worked for chrome ???
    var d = $(this).datepicker('getDate');

    //Fullcalendar
    $('#calendar').empty(); //clear the initial view
    calendar = $('#calendar').fullCalendar({

        //Full calendar suff here

    }); //Fullcalendar ends

    /*-------------------- Set the selected date ---------------------*/
    calendar.fullCalendar('gotoDate', d.getFullYear(), d.getMonth(), d.getDate());

}//on select ends
.....

Jquery Datepicker + Fullcalendar：将datepicker选择日期传递给fullcalendar

1 个答案: