Öffnen Sie den gesamten Kalender basierend auf ausgewählten Monat

Question

Ich benutze Foundation Datepicker und Vollkalender. Mein requiement ist,

1) Wenn ich ein beliebiges Datum im Kalender auswählen,

zum Beispiel aktuelle Monat ist 2016. Juli Wenn ich ein Datum im November oder anderen Monat in Gründung picker wählen, sollten die vollen Kalender starten als der ausgewählte Monat. Bitte schau dir die Geige an. Ein Datepicker und ein voller Kalender ist da.

Bitte schauen Sie sich die folgende Geige an.

jsfiddle

defaultly volle Kalender sind im Monat Juli. Zu Beginn ist ein Mor-Date-Picker da. Wenn ich ein Datum auf diesem Datumswähler ändere, sollte sich zu diesem Zeitpunkt fullCalendar auf den ausgewählten Monat einstellen.

\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

haben Sie einen Blick auf aktualisiertem Geige Code:

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

Wir gotoDate method of full calendar verwenden können vollen Kalender zu zwingen, sobald jemand wählen Sie ein Datum zu anderen Monat zu wechseln in datepicker steuerung:

Nach i s ist der Code für Stiftung datepicker und seine changeDate Event-Handler, die den Monat voller Kalender ändern:

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