When I select the month / year on the event calendar, I want the year popup to disappear when I tap or click outside of the picker, but it doesn’t. It just stays there until I select a year and month. How can I make it so that it hides if I click anywhere else?
Hello @Vincent_Wansink 
Yup, that’s the default behavior. If you tap or click outside of the picker the popup disappears.
See the attached gif 
Well, I would expect it to be the default behaviour but the fact that it’s not happening on mine tells me that I messed something up. Is there a setting for this behaviour that I might’ve changed? What should I be looking for here?
Hi @Vincent_Wansink,
Could you please check if this behaviour occurs on the demo page as well?
Could you also share what kind of Mobiscroll version are you using? The code of the event calendar initialization would be helpful too.
Hi Gabi.
It’s not a problem for me on the demo page, so it’s clearly something I’m doing, but I don’t even know where to begin looking for this. I’m using version 5.17.1.
Here’s my initialization code
$.get("get-bookings.json.php?staffid=0", function(data){
var startDate, endDate;
var calendar = $('#bookings-schedule').mobiscroll5().eventcalendar({
locale: mobiscroll5.locale['<?=$locale?>'],
invalid: [<?=$invalidstring?>],
display: 'inline',
clickToCreate: 'double',
dragToCreate: true,
dragToMove: true,
dragToResize: true,
themeVariant: 'light',
calendarHeight: 600,
groupBy: 'resource',
colors: [<?=$availabilitystring?>],
dragTimeStep: <?=$scheduleincrements?>,
resources: [<?=$resourcestring?>],
view: {
schedule: {type: 'day',
startDay: <?=$firstdayofweek?>,
startTime: '<?=$schedulestarttime?>',
endTime: '<?=$scheduleendtime?>',
timeCellStep: 30,
timeLabelStep: 60}
},
onEventClick: function (args, inst) {
var bookingid = args.event.Id;
viewBooking(bookingid);
},
onEventDragEnd: function (args, inst) {
var staffid = args.event.resource;
var bookingid = args.event.Id;
if(typeof args.event.start == "string"){
// 2022-07-29T09:53:00
var parts = args.event.start.split("T");
var starttime = parts[1].substring(0,8);
var date = parts[0];
}else{
var UTCstart = args.event.start;
var starttime = padLeft(UTCstart.getHours(),2) + ':'+ padLeft(UTCstart.getMinutes(),2) + ':00';
var year = UTCstart.getFullYear();
var month = UTCstart.getMonth() + 1;
var day = UTCstart.getDate();
var date = year + '-' + padLeft(month,2) + '-' + padLeft(day,2);
}
if(typeof args.event.end == "string"){
// 2022-07-29T09:53:00
var parts = args.event.end.split("T");
var endtime = parts[1].substring(0,8);
}else{
var UTCend = args.event.end;
var endtime = padLeft(UTCend.getHours(),2) + ':'+ padLeft(UTCend.getMinutes(),2) + ':00';
}
var allowcreate = $('#allowcreate').val();
var allowmodify = $('#allowmodify').val();
if(bookingid == undefined){
// Inserting new booking with drag
if(allowcreate == "Y"){
loadShade('New Booking','new.booking.php',{'staffid':staffid,'bookingdate':date,'bookingtime':starttime});
}else{
mobiscroll4.toast({message: 'Insufficient security privilege',display:'top',color:'danger'});
refreshBookings();
}
}else{
// Modifying existing booking
if(allowmodify == "Y"){
updateCalendarBooking(bookingid,staffid,date,starttime,endtime);
}else{
mobiscroll4.toast({message: 'Insufficient security privilege',display:'top',color:'danger'});
refreshBookings();
}
}
},
onEventCreate: function (args, inst) {
var staffid = args.event.resource;
var bookingid = args.event.Id;
var UTCstart = args.event.start;
var UTCend = args.event.end;
var starttime = padLeft(UTCstart.getHours(),2) + ':'+ padLeft(UTCstart.getMinutes(),2) + ':00';
var year = UTCstart.getFullYear();
var month = UTCstart.getMonth() + 1;
var day = UTCstart.getDate();
var date = year + '-' + padLeft(month,2) + '-' + padLeft(day,2);
var endtime = padLeft(UTCend.getHours(),2) + ':'+ padLeft(UTCend.getMinutes(),2) + ':00';
var allowcreate = $('#allowcreate').val();
var allowmodify = $('#allowmodify').val();
if(bookingid == undefined){
// Inserting new booking with drag
if(allowcreate == "Y"){
loadShade('New Booking','new.booking.php',{'staffid':staffid,'bookingdate':date,'bookingtime':starttime});
}else{
mobiscroll4.toast({message: 'Insufficient security privilege',display:'top',color:'danger'});
refreshBookings();
}
}else{
// Modifying existing booking
if(allowmodify == "Y"){
updateCalendarBooking(bookingid,staffid,date,starttime,endtime);
}else{
mobiscroll4.toast({message: 'Insufficient security privilege',display:'top',color:'danger'});
refreshBookings();
}
}
}
}).mobiscroll5('getInst');
// Set default view
viewChange($('#bookings-schedule'),defaultview);
$('#viewpicker').val(defaultview);
// Set calendar data
calendar.setEvents(JSON.parse(data));
});
I should point out that I’m not having this issue with the date picker anywhere else in my app. Only the event calendar date.
I’m also executing the following on page load, which is to collapse the side menu when the user clicks on the main content of the page. Could this be interfering with the mobiscroll code?
$('#maincontent').on('click',function(){
if($('#sidepanel').css('position') == "absolute"){
var menusize = $('#sidepanel').width();
if(menusize > 0){
$('#sidepanel').animate({width:"0px"});
}
}
});Hi @Vincent_Wansink,
I was not able to reproduce the issue. Could you perhaps share a live link where this problem occurs so I can take a look?