在 FullCalendar 的 select 日期，点击精度校准错误

Question

我还没有找到另一个类似的问题。有一些类似的解决方案，例如“确保并包括 'prev' 和 'next' 按钮”以及关于时区等的事情。我不认为后端的逻辑或时区或代码有任何问题.当我点击现有事件时，它们工作正常。我可以单击、拖放、编辑、检索弹出模式等。但是当我单击日期中的空 space 时，它是不准确的。我可以看到它在视觉上选择了错误的框。每个月的每一天都是如此。点击框左上角 25% 的位置是准确的。底部和左侧的 75% 在那个方向上相差一个框。

看看 5 月 18 日。红色：工作完美黄色：选择第 19 个蓝色：选择第26位绿色：选择第 25

这就像一个奇怪的校准问题。但是如果我点击一个事件，即使它在那个框的底部，就像 5 月 5 日的 Thomas，它也能正常工作。下面是我的js文件。

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

关于第 16 到 21 行的问题。即使我根本不调用函数，它也会发生。如果我只是像下面那样做一个弹出模式，我仍然可以看到它突出显示并选择了错误的日期：

 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

CSS 是问题所在。我有

 body  {
     zoom:  110%;
 }

显然 fullCalendar 对 CSS 的缩放功能反应不佳。如果用户在浏览器中放大，这不是问题。

在 FullCalendar 的 select 日期，点击精度校准错误

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

html

css

jquery

fullcalendar

fullcalendar-3