On select of date on FullCalendar, the click accuracy is miscalibrated - html

Question

I have not found another question quite like this. There are some similar with solutions like "be sure and include 'prev' and 'next' buttons" and things about timezones etc. I do not believe there is any issue with the logic or time zone or code on the backend. When I click on existing events, they work fine. I can click, drag, drop, edit, retrieve popup modal, etc. But when I click on an empty space in a date, it is inaccurate. I can see it visually selecting the wrong box. This is the case for every day of the month. The click is accurate in the top left 25% of the box. The bottom and left 75% is off by one box in that direction.
Look at May 18.
red: works perfect
yellow: selects 19th
blue: selects 26th
green: selects 25th
It is like a strange calibration issue. But if I click on an event, even if it is at the bottom of that box, like Thomas on May 5, it works just fine. Below is my js file.
function GetEventsOnPageLoad() {
$('#calendar').fullCalendar({
header: {
left: 'prev, next today',
center: 'title',
right: 'month, agendaWeek, agendaDay'
},
buttonText: {
today: 'Today',
month: 'Month',
week: 'Week',
day: 'Day'
},
selectable: true,
select: function (start) {
selectedEvent = {
eventID: 0,
start: start,
allDay: true,
};
CreateFullCalEvent(start.toISOString());
$('#calendar').fullCalendar('unselect');
},
height: 'parent',
events: function (start, end, timezone, callback) {
$.ajax({
type: "GET",
contentType: "application/json",
url: "GetEventData",
dataType: "JSON",
success: function (data) {
var events = [];
$.each(data, function (i, data) {
events.push(
{
title: data.title,
start: moment(data.start),
end: moment(data.end),
allDay: true,
backgroundColor: data.color,
id: data.id,
textColor: data.textColor
}
);
});
callback(events);
}
})
},
nextDayThreshold: '00:00:00',
editable: true,
droppable: true,
nowIndicator: true,
eventClick: function (info) {
GetFullCalEventByID(info);
},
eventDrop: function (info) {
console.log(info);
UpdateFullCalEvent(info.id, info.start.toISOString(), info.end.toISOString());
},
eventResize: function (info) {
UpdateFullCalEvent(info.id, info.start.toISOString(), info.end.toISOString());
}
})
}
function CreateFullCalEvent(start) {
window.location.href = "CreateFullCalEvent?start=" + encodeURIComponent(start);
}
function GetFullCalEventByID(eventinfo) {
$.ajax({
type: "GET",
url: "GetFullCalEventByID/" + eventinfo.id,
dataType: "JSON",
contentType: "applicaton/json; charset=utf-8",
success: function (eventdetails) {
showModal('Event Details', eventdetails, true);
}
});
}
function UpdateFullCalEvent(id, start, end) {
var object = {};
object.id = id;
object.start = start;
object.end = end;
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "UpdateFullCalEvent/",
dataType: "JSON",
data: JSON.stringify(object)
});
}
function showModal(title, body, isEventDetail) {
$("MyPopup .modal-title").html(title);
if (isEventDetail == null) {
$("#MyPopup .modal-body").html(body);
$("#MyPopup").modal("show");
}
else {
var title = 'Title: ' + body.title + '</br>';
var details = 'Details: ' + body.details + '</br>';
var date = 'Date: ' + moment(body.start).format("M/D/YYYY") + '</br>';
var empName = 'Employee: ' + body.employeeName + '</br>';
url = 'Location: ' + body.url + '</br>';
var modalPop = $("#MyPopup .modal-body");
modalPop.html(title + details + date + empName + url);
$("#MyPopup.modal").modal("show");
}
}
About line 16 to 21 is the issue. It happens even if I am not calling a function at all. If I just do a popup modal like below, I can still see it highlighting and selecting the wrong day:
selectable: true,
select: function () {
showModal('Create an Event', 'Create new Event feature coming soon. For now, use create button in list view', null);

Answer 1

The CSS was the issue. I had
body {
zoom: 110%;
}
Apparently fullCalendar does not respond well to zoom feature of CSS. It is not a problem if the user zooms in the browser though.