如何將datepicker鏈接到fullcalendar jquery

Question

任何人都可以告訴如何將datepicker鏈接到fullcalendar jquery。請在下面找到我正在嘗試的代碼。

鏈接意味着在datepicker中選擇日期或月份，fullcalendar應該獲取該特定月份並顯示該事件。

enter image description here

我從這個嘗試以下鏈接 -

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> 

問候

Answer 1

我創建基於一個簡單的例子在你的代碼上：

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

請注意，您必須從https://github.com/xdan/datetimepicker/blob/master/build/jquery.datetimepicker.full.min.js下載jquery.datetimepicker.full.min.js腳本，並且您使用的datetimepicker語法也不完全正確。這個例子應該把你推向正確的方向，我希望！

問候
剋日什托夫·

Answer 2

我這樣做，它的工作對我來說

$(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); 
    }); 
});