Question

任何人都可以告诉如何将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>

此致

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语法也不完全正确。这个例子应该把你推向正确的方向我希望！

最好的问候的Krzysztof

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

如何将datepicker链接到fullcalendar jquery

2 个答案: