在 FullCalendar 上选择日期时，点击准确度校准错误

编程问答 2022-05-01

问题描述

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

Look at 18th of May

看看 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),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.end.toISOString());
        }
    })
}


function CreateFullCalEvent(start) {
    window.location.href = "CreateFullCalEvent?start=" + encodeURIComponent(start);

}

function GetFullCalEventByID(eventinfo) {

    $.ajax({
        type: "GET",url: "GetFullCalEventByID/" + eventinfo.id,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/",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);

解决方法

CSS 是问题所在。我有

model.trainable_variables

显然 fullCalendar 不能很好地响应 CSS 的缩放功能。不过，如果用户放大浏览器，这不是问题。

fullcalendarfullcalendar-3htmljquery