根據所選月份打開完整日曆

Question

我正在使用基礎日期選擇器和完整日曆。我requiement是，

1）如果我選擇在日曆中的任何日期，

例如，當前月份是2016年七月如果我選擇在十一月日期或任何其他月份的基礎上日期選擇器，完整的日曆應該開始作爲選定的月份。請看小提琴。一個日期選擇器和一個完整的日曆在那裏。

請看下面的小提琴。

jsfiddle

Defaultly完整的日曆在七月一個月。在開始時，一個日期選擇器在那裏。如果我更改日期選擇器上的任何日期，那麼本身fullCalendar應該在選定的月份上執行。

\t var nowTemp = new Date(); 
 
     var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0); 
 
     var checkin = jQuery('#startDate').fdatepicker({ 
 
      format: "dd.mm.yyyy", 
 
     }).data('datepicker'); 
 
     var checkout = jQuery('#endDate').fdatepicker({ 
 
      format: "dd.mm.yyyy", 
 
     }).on('changeDate', function (ev) { 
 
      
 
      }).data('datepicker'); 
 

 
      
 
    
 
    
 
    $(document).ready(function() { 
 

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

 
    var events_array = [ 
 
     { 
 
     title: 'Test1', 
 
     start: new Date(2012, 8, 20), 
 
     tip: 'Personal tip 1'}, 
 
    { 
 
     title: 'Test2', 
 
     start: new Date(2012, 8, 21), 
 
     tip: 'Personal tip 2'} 
 
    ]; 
 

 
    $('#calendar').fullCalendar({ 
 
     header: { 
 
      left: 'prev,next today', 
 
      center: 'title', 
 
      right: 'month,agendaWeek,agendaDay' 
 
     }, 
 
     selectable: true, 
 
     events: events_array, 
 
     eventRender: function(event, element) { 
 
      element.attr('title', event.tip); 
 
     } 
 
    }); 
 
}); 
 

 
$(".fc-header-left").hide(); 
 
$(".fc-header-right").hide(); 
 

 
    $(window).scroll(function() { 
 
    if ($(this).scrollTop() > 1){ 
 
     $('.fc-border-separate thead').addClass("sticky"); 
 
    } 
 
    else{ 
 
     $('.fc-border-separate thead').removeClass("sticky"); 
 
    } 
 
    });

\t .tag{ 
 
    background-color:#000; 
 
    color:#fff; 
 
    padding:3px; 
 
    max-height:60px; 
 
    overflow: visible; 
 
    position: fixed; 
 
    z-index:999; 
 
} 
 
.tag:after { 
 
    content: ""; 
 
    border-top: 16px solid red; 
 
    border-left: 8px solid transparent; 
 
    border-right: 8px solid transparent; 
 
    position: absolute; 
 
    bottom: -16px; 
 
    left: calc(50% - 8px); 
 
} 
 
.fc-border-separate thead.sticky{ 
 
\t width: 100%; 
 
\t position: fixed; 
 
\t top:0px; 
 
\t left:0px; 
 
\t display:table; 
 
\t background: #fff; 
 
}

</br> 
 
    
 
Datepicker :<input type="text" id="endDate" name="end_datum" class="input_text" value=""></br></br></br></br> 
 

 
<div style="border:solid 2px red;"> 
 
\t <div id='calendar'></div> 
 
</div> 
 
<div class="tag hide" id="cal-info"> 
 

 
</div>

Answer 1

請看看更新的小提琴代碼：

http://jsfiddle.net/v98sb2a0/12/

我們可以使用gotoDate method of full calendar強制完整的日曆儘快切換到不同月份的人選擇日期在日期選擇器控制中：

正在關注i S代表基礎datepicker及其changeDate事件處理程序的代碼，改變全歷月：

var checkin = jQuery('#startDate').fdatepicker({ 
     format: "dd.mm.yyyy", 
    }).data('datepicker'); 
    var checkout = jQuery('#endDate').fdatepicker({ 
     format: "dd.mm.yyyy", 
    }).on('changeDate', function(ev) { 

     var startDate = new Date(ev.date); 
     $('#calendar').fullCalendar('gotoDate', startDate);//modify the date of full calendar 

    }).data('datepicker');