How to link datepicker to fullcalendar jquery

Question

Can anyone tell how to link datepicker to fullcalendar jquery. Please find below the code which i am trying.

Link means on selection of date or month in datepicker, fullcalendar should get that particular month and display the event.

enter image description here

I am trying from this below link -

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

In the console log i am getting only

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>

Regards

Answer 1

I created a simple example based on your code:

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

Please note you have to download jquery.datetimepicker.full.min.js script from https://github.com/xdan/datetimepicker/blob/master/build/jquery.datetimepicker.full.min.js and also a datetimepicker syntax you use is not exactly correct.

Answer 2

I did this and it worked for me

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