title: open full calendar based on selected month
body: <p>I am using foundation datepicker and full calendar. My requiement is,</p>
  
  <p>1) If I select any date in calendar,  </p>
  
  <p>for example, current month is july 2016. If I select a date in November or any other month in foundation datepicker, full calendar should start as that selected month. Please look at the fiddle.One datepicker and one full calendar is there.</p>
  
  <p>Please look at the following fiddle.</p>
  
  <p><a href="http://jsfiddle.net/v98sb2a0/10/" rel="nofollow">jsfiddle</a> </p>
  
  <p>Defaultly full calendar is in july month. At starting one mor datepicker is there. If I change any date on that datepicker, at that time itself fullCalendar should opn on the selected month.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> 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() &gt; 1){  
          $('.fc-border-separate thead').addClass("sticky");
      }
      else{
          $('.fc-border-separate thead').removeClass("sticky");
      }
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> .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{
   width: 100%;
   position: fixed;
   top:0px;
   left:0px;
   display:table;
   background: #fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;/br&gt;
      
  Datepicker :&lt;input type="text" id="endDate" name="end_datum" class="input_text" value=""&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;
  
  &lt;div style="border:solid 2px red;"&gt;
   &lt;div id='calendar'&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="tag hide" id="cal-info"&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>