選択した月に基づいてフルカレンダーを開く

Question

私は基礎の日付ピッカーと完全なカレンダーを使用しています。私は、カレンダー内の任意の日付を選択した場合は私のrequiementは、現在の月は、私が11月に日付を選択するか、基礎日付ピッカー内の他の月の場合は、完全なカレンダーが開始すべき7月2016で、例えば、）、

1でありますその月を選択した。フィドルを見てください.1つの日付ピッカーと1つのフルカレンダーがあります。

以下のフィドルを見てください。

jsfiddle

Defaultlyフルカレンダーは7月の月です。開始時に1つのmor日付ピッカーがあります。その日付ピッカーの日付を変更すると、その時にfullCalendarは選択した月にopnする必要があります。

\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

更新フィドルコードを見てください：私たちは、すぐに誰を選択した日付など、さまざま月に切り替えるには、フルカレンダーを強制的にgotoDate method of full calendarを使用することができます

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

日付ピッカーコントロール：

基礎datepickerためのコードと完全なカレンダーの月を変更してchangeDateイベントハンドラ（S）） `：

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