Question

在FullCalendar dayClick事件中，我可以获取点击日期中已存在的事件吗？

http://arshaw.com/fullcalendar/docs/mouse/dayClick/

让我解释一下我的项目我正在写一个简单的php网站，允许用户在日历上添加/编辑活动。

只有单个事件可以添加到日期。
如果用户点击空白日期，将显示新事件弹出窗口（我使用dayclick事件）。
如果用户点击日期与现有事件，将显示编辑事件弹出窗口（我使用事件点击事件）。

问题是当用户点击具有现有事件的日期的事件区域（上部区域或底部区域）之外时，它会提高日期点击而不是事件点击。如果日期中存在事件，如何触发eventclick事件并跳过dayclick事件？

Answer 1

您的活动是存储在客户端还是服务器端？如果在客户端，如果您希望在单击时间内执行该事件，则应该特别有用：

$('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {
            $('#calendar').fullCalendar('clientEvents', function(event) {
                if(event.start <= date && event.end >= date) {
                    return true;
                }
                return false;
            });
    }
});

这将提供与点击时间重叠并存储在客户端的事件。对于全天的广告位，它会在当天重叠所有事件。

如果您希望该日期的所有活动本身，无论是否点击了allDay广告位或时段。

$('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {
            if(!allDay) {
                // strip time information
                date = new Date(date.getFullYear(), date.getMonth(), date.getDay());
            }
            $('#calendar').fullCalendar('clientEvents', function(event) {
                if(event.start <= date && event.end >= date) {
                    return true;
                }
                return false;
            });
    }
});

如果您的事件存储在服务器上，您将需要获取dayClick回调中提供的日期，并使用它来构建对服务器的调用，以便以您需要的任何格式获取信息。

编辑如果进行往返或尝试以其他方式获取信息

$('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {
            var startDate = new Date(date.getFullYear(), date.getMonth(), date.getDay(), 0, 0, 0).getTime();
            var endDate = new Date(date.getFullYear(), date.getMonth(), date.getDay(), 23, 59, 59).getTime();
            var cache = new Date().getTime();
            $.getJSON("/json-events.php?start="+startDate+"&end="+endDate+"&_="+cache,
                function(data) {
                    // do stuff with the JSOn data
                }
    }
});

如果您不想要往返，您还可以查看fullCalendar.js中的refetchEvents中发生的情况。如果你不介意偏离fullCalendar主干，你可以在某个地方保存已获取的事件，这样你就不会进行大量的DOM操作（取决于事件的数量，因为它们变得很大，会变得难以处理）。 / p>

Answer 2

我自己也遇到过这个问题，同时找到了一个将公众假期带入日历的解决方案。我发现这是一整天活动的好方法。我希望这可以帮助其他人进一步发展。

$('#calendar').fullCalendar({                
    eventClick: function (event) {
        ShowEditScreen(event.id);
    },
    dayClick: function (date) {
        var events = $('#calendar').fullCalendar('clientEvents');
        for (var i = 0; i < events.length; i++) {
            if (moment(date).isSame(moment(events[i].start))) {
                ShowEditScreen(events[i].id);
                break;
            }
            else if (i == events.length - 1) {
                ShowCreateNew(date);
            }
        }
    }
});

Answer 3

您可以使用Moment库。例如：

$('#endDate').val(moment(endDate).format('YYYY-MM-DD hh:mm:ss'));

http://momentjs.com/docs/#/displaying/format/

Answer 4

出现的答案对我没有用，所以有工作代码：

dayClick: function (date, jsEvent, view) {
    var count = 0;

    date = date.toDate();
    var startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
    var endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59);

    $('#calendar').fullCalendar('clientEvents', function (event) {
            if (event.start.toDate() >= startDate && event.start.toDate() <= endDate
                || event.end.toDate() >= startDate && event.end.toDate() <= endDate) {
                        count++;
                    }
                });
    //count - number of events on this day
}

Answer 5

这是你需要当天在另一个函数中的所有事件：

            var date = $('.js-calendar').fullCalendar('getDate');
            date = date.toDate();
            var startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
            var endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59);
            var todaysEvents = $('.js-calendar').fullCalendar('clientEvents', function(event) {
                if (event.start.toDate() >= startDate && event.start.toDate() <= endDate
                    || event.end.toDate() >= startDate && event.end.toDate() <= endDate) {
                    return true
                }
            });

在FullCalendar dayClick事件中，我可以获取点击日期中已存在的事件吗？

5 个答案: