如何将datepicker链接到fullcalendar jquery

谁能告诉我如何将datepicker链接到fullcalendar jquery。请在下面找到我正在尝试的代码

链接意味着在datepicker中选择日期或月份时，fullcalendar应获取该特定月份并显示事件

我正在尝试从下面的链接-

https://github.com/fullcalendar/fullcalendar/issues/554

在控制台日志中，我只得到

Date formatter not defined

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<!--  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"/> -->
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"/>
   <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.min.js"/>

   <link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.min.css" rel="stylesheet" />
   <link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.print.css" rel="stylesheet" media="print"  /> 

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.min.js"/>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.min.css" rel="stylesheet" />

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<style type="text/css">
   /* the 'fix' for the datepicker when using jquery layout */
   #ui-datepicker-div { z-index: 5; }
</style>
<script type='text/javascript'>
   $(document).ready(function() {

       InitializeCalendar();

       var custom_buttons = '<td style="padding-left:10px">' +
                                   '<div class="fc-button-next ui-state-default ui-corner-left ui-corner-right">' +
                                       '<span>' +
                                           '<input type="hidden" id="date_picker" value="" />' +
                                           '<img src="<%=AppHelper.ImageUrl("calendarIcon.JPG")%>" id="datePickerImage" />' +
                                       '</span>' +
                                   '</div>' +
                               '</td>';
       $('.fc-header-title').parent('td').after(custom_buttons);


       $("#date_picker").datepicker({
           dateFormat: 'dd-mm-yy',
           changeMonth: true,
           changeYear: true,
           onSelect: function(dateText, inst) {
               var d = $("#date_picker").datepicker("getDate");
               $('#calendar').fullCalendar('gotoDate', d);
           }
       });

       $('#datePickerImage').mouseover(function() {
           $('#date_picker').datepicker('show');
       });

       $('#datePickerImage').mouseout(function() {
           $('#date_picker').datepicker('hide');
       });



   });

   function InitializeCalendar()
   {
       var date = new Date();
       var d = date.getDate();
       var m = date.getMonth();
       var y = date.getFullYear();


       $('#calendar').fullCalendar
       ({
           theme: true,
           height: 650,
           header: {
               left: 'prev,next today',
               center: 'title',
               right: 'month,agendaWeek,agendaDay'
           },
           editable: true,
           events: "/Home/GetCalendarEvents/",
           draggable: false,
           eventClick: function(calEvent, jsEvent) {
               return false;
           },
           eventRender: function(calEvent, element) {

               $.fn.qtip.styles.themeroller = {
                   background: null,
                   color: null,
                   tip: {
                       corner: true,
                       background: null
                   },
                   border: {
                       width: 0,
                       radius: 3
                   },
                   title: {
                       'background': null,
                       'fontWeight': null
                   },
                   classes: {
                       tooltip: 'ui-widget',
                       tip: 'ui-widget',
                       title: 'ui-widget-header',
                       content: 'ui-widget-content'
                   }
               };

               var eventDate = calEvent.start;

               $(element).qtip({
                   content: {
                   url: '/Home/CalendarEventDetails?date=' +
   $.fullCalendar.formatDate(eventDate, 'MM dd yyyy'),
                       method: 'get',
                       title: { text: $.fullCalendar.formatDate(eventDate, 'dddd,MMM yyyy') }
                   },
                   position: {
                       corner: {
                           target: 'bottomLeft',
                           tooltip: 'topLeft'
                       }
                   },
                   style: {
                       background: calEvent.color,
                       border:
                       {
                           color: calEvent.color
                       },
                       name: 'light',
                       tip: true,
                       width: 500

                   }

               });
           }

       });
   }

</script>
<div id='calendar'></div>

未定义日期格式化程序
/*使用jquery布局时日期选择器的“修复”*/
#ui日期选择器div{z-index:5；}
$（文档）.ready（函数（）{
初始化calendar（）；
变量自定义按钮=“”+
'' +
'' +
'' +
““id=”datePickerImage“/>”+
'' +
'' +
'';
$（'fc header title'）.parent（'td'）.after（自定义按钮）；
$（“#日期选取器”）。日期选取器({
日期格式：“dd-mm-yy”，
变化月：对，
变化年：是的，
onSelect：函数（日期文本，inst）{
var d=$（“日期选择器”）.datepicker（“getDate”）；
$（“#日历”）.fullCalendar（'gotoDate'，d）；
}
});
$（'#datePickerImage'）。鼠标悬停（函数（）{
$（'date'u picker'）。datepicker（'show'）；
});
$（'#datePickerImage'）.mouseout（函数（）{
$（'date'u picker'）。datepicker（'hide'）；
});
});
函数InitializeCalendar（）
{
变量日期=新日期（）；
var d=date.getDate（）；
var m=date.getMonth（）；
var y=date.getFullYear（）；
$（“#日历”）.fullCalendar
({
主题：真的，
身高：650，
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“月，agendaWeek，agendaDay”
},
是的，
事件：“/Home/GetCalendarEvents/”，
可拖动：错误，
eventClick:函数（calEvent、jsEvent）{
返回false；
},
eventRender:函数（calEvent，元素）{
$.fn.qtip.styles.themeroller={
背景：空，
颜色：空，
提示：{
角落：没错，
背景：空
},
边界：{
宽度：0，
半径：3
},
标题：{
“背景”：null，
“fontWeight”：null
},
课程：{
工具提示：“ui小部件”，
提示：“ui小部件”，
标题：“ui小部件头”，
内容：“ui小部件内容”
}
};
var eventDate=calEvent.start；
$（元素）.qtip({
内容：{
url:“/Home/CalendarEventDetails？日期=”+
$.fullCalendar.formatDate（eventDate，'MM dd yyyy'），
方法：“get”，
标题：{text:$.fullCalendar.formatDate（eventDate，'dddddd，MMM-yyyy'）}
},
职位：{
角落：{
目标：“左下角”，
工具提示：“左上角”
}
},
风格：{
背景：calEvent.color，
边界：
{
颜色：calEvent.color
},
名称：'光'，
提示：没错，
宽度：500
}
});
}
});
}

---

关于

我根据您的代码创建了一个简单的示例：

<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.min.js"></script>
<script src="jquery.datetimepicker.full.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.print.css" rel="stylesheet" media="print" /> 
<style type="text/css">
   /* the 'fix' for the datepicker when using jquery layout */
   #ui-datepicker-div { z-index: 5; }
</style>
<script type='text/javascript'>
   $(document).ready(function() {

       InitializeCalendar();
       $('.fc-center').append('<input type="text" id="date_picker"></input>');

       jQuery('#date_picker').datetimepicker({
           timepicker:false,
           onChangeDateTime:function(current_time,$input){
               console.log(current_time);
               $('#calendar').fullCalendar('gotoDate', current_time);
           }
       })
   });

function InitializeCalendar()
{
    $('#calendar').fullCalendar
     ({})       
}
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>

/*使用jquery布局时日期选择器的“修复”*/
#ui日期选择器div{z-index:5；}
$（文档）.ready（函数（）{
初始化calendar（）；
$（'.fc center'）。追加（''）；
jQuery（'#date_picker'）。datetimepicker({
计时器选择器：错误，
onChangeDateTime:函数（当前时间，$input）{
console.log（当前_时间）；
$（“#日历”）.fullCalendar（'gotoDate'，当前#u时间）；
}
})
});
函数InitializeCalendar（）
{
$（“#日历”）.fullCalendar
({})       
}

---

请注意，您必须从下载jquery.datetimepicker.full.min.js脚本，并且您使用的datetimepicker语法不完全正确。

我根据您的代码创建了一个简单的示例：

<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.min.js"></script>
<script src="jquery.datetimepicker.full.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.print.css" rel="stylesheet" media="print" /> 
<style type="text/css">
   /* the 'fix' for the datepicker when using jquery layout */
   #ui-datepicker-div { z-index: 5; }
</style>
<script type='text/javascript'>
   $(document).ready(function() {

       InitializeCalendar();
       $('.fc-center').append('<input type="text" id="date_picker"></input>');

       jQuery('#date_picker').datetimepicker({
           timepicker:false,
           onChangeDateTime:function(current_time,$input){
               console.log(current_time);
               $('#calendar').fullCalendar('gotoDate', current_time);
           }
       })
   });

function InitializeCalendar()
{
    $('#calendar').fullCalendar
     ({})       
}
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>

/*使用jquery布局时日期选择器的“修复”*/
#ui日期选择器div{z-index:5；}
$（文档）.ready（函数（）{
初始化calendar（）；
$（'.fc center'）。追加（''）；
jQuery（'#date_picker'）。datetimepicker({
计时器选择器：错误，
onChangeDateTime:函数（当前时间，$input）{
console.log（当前_时间）；
$（“#日历”）.fullCalendar（'gotoDate'，当前#u时间）；
}
})
});
函数InitializeCalendar（）
{
$（“#日历”）.fullCalendar
({})       
}

---

请注意，您必须从下载jquery.datetimepicker.full.min.js脚本，并且您使用的datetimepicker语法不完全正确。

我这样做了，它对我有效

$(document).ready(function(){
    $("#datepicker1").datepicker({
        weekStart:1,
        format: "dd.mm.yyyy",
        todayBtn: "linked",
        autoclose: true,
        todayHighlight: true       
    })
    .on('changeDate', function(ev){
        $('#calendar').fullCalendar('gotoDate', ev.date);
    });
});

---

我做了这件事，它对我起了作用

$(document).ready(function(){
    $("#datepicker1").datepicker({
        weekStart:1,
        format: "dd.mm.yyyy",
        todayBtn: "linked",
        autoclose: true,
        todayHighlight: true       
    })
    .on('changeDate', function(ev){
        $('#calendar').fullCalendar('gotoDate', ev.date);
    });
});

---

链接什么？在日期中链接日期选择器？通过单击？请具体。链接什么？在日期中链接日期选择器？通过单击？请具体。