sathish kumar sathish kumar -5 years ago 410
CSS Question

open full calendar based on selected month

I am using foundation datepicker and full calendar. My requiement is,

1) If I select any date in calendar,

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.

Please look at the following fiddle.


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.

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


$(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'}

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


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

overflow: visible;
position: fixed;
.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;
background: #fff;


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

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


Answer Source

Please have a look at updated fiddle code:

We can use gotoDate method of full calendar to force full calendar to switch to different month as soon as anybody select date in datepicker control:

Following is the code for foundation datepicker and its changeDate event handler which changes the month of full calendar:

var checkin = jQuery('#startDate').fdatepicker({
      format: "",
    var checkout = jQuery('#endDate').fdatepicker({
      format: "",
    }).on('changeDate', function(ev) {

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download