在 FullCalendar / 自定义按钮单击中添加 datePicker

Question

我在 FullCalendar ( http://fullcalendar.io ) 页面正下方添加了一个 datePicker ( http://www.eyecon.ro/datepicker/ ) 。

我如何将此日期选择器附加到 fullcallendar 标题上的自定义按钮上，当按下按钮时，日期选择器会出现？

谢谢

更新：添加代码

编辑：代码更新

到目前为止我写的代码是：JS：

$(function () { 
        //...some code.....
            //fullcalendar 
            $('#calendar').fullCalendar({
                //...options
                header: {
                    left: 'title today',
                    center: '',
                    right: 'prevMonth prev myCustomButton  next nextMonth'
                },
                customButtons: {
                    myCustomButton: {
                        text: ' ',
                        click: function () {
        $('#date').DatePicker({
            flat: true,
            date: currentDate,
            current: currentDate,
            calendars: 2,
            starts: 1,
            onChange: function (formated, dates) {
                $('#calendar').fullCalendar('gotoDate', formated);
               }
        });
                 }
                    },
                    //...other buttons
                },
                 //....other options....
            });//fullcalendar
         });//$

ASP：

        <div>
            <div id='calendar'></div>
        </div>
        <div>
          <p id="date"></p>
        </div>

Answer 1

您看过全日历自定义按钮吗？

自定义按钮文档

你应该能够做这样的事情：

$(function () { 
    //... some code....
    // for the date picker 
    $('#date').DatePicker({
        flat: true,
        date: currentDate,
        current: currentDate,
        calendars: 2,
        starts: 1,
        onChange: function (formated, dates) {
            //when user clicks the date it scrols back up
            $('#calendar').fullCalendar('gotoDate', formated);
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            $('#date').DatePickerHide();
        }
    });

    $('#calendar').fullCalendar({
        header: {
            left: 'title today',
            center: '',
            right: 'prevMonth prev myCustomButton  next nextMonth'
        },
        customButtons: {
           myCustomButton: {
               text: ' ',
               click: function () {
                   //it scrolls to the position of the datepicker
                   $('body,html').animate({
                       scrollTop: $(document).height()
                   }, 1000);
                   $('#date').DatePickerShow();
               }
           },
             //...other buttons
        },
             //....other options....
    });//fullcalendar
});//$