I am currently using Foundation Datepicker and Full Calendar. My requirement is as follows:
1) When I select a date in the calendar,
For example, let's say it's July 2016. If I choose a date in November or any other month in the Foundation Datepicker, the Full Calendar should automatically switch to that selected month. You can take a look at the fiddle provided below where there is one Datepicker and one Full Calendar.
Here is the link to the fiddle for reference:
The default setting for the Full Calendar is in July month. Initially, there is one more Datepicker available. If I change the date on that Datepicker, the Full Calendar should open on the selected month right away.
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");
}
});.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;
}</br>
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>
<div class="tag hide" id="cal-info">
</div>