14

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

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

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

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

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

4

5 回答 5

19

您的事件是存储在客户端还是服务器端？如果在客户端，如果您希望在该点击时间发生事件，这应该特别有效：

$('#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 操作（取决于事件的数量，因为它们变得很大会变得笨拙）。

于 2010-03-25T14:13:25.623 回答
7

我自己在寻找将公共假期输入日历的解决方案时自己遇到了这个问题。我发现这是全天活动的一个很好的解决方案。我希望这可以帮助其他人。

$('#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);
            }
        }
    }
});
于 2015-10-29T10:22:29.957 回答
0

您可以使用 Moment 库。例如：

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

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

于 2015-01-23T04:06:56.503 回答
0

Exested 答案对我不起作用，因此有工作代码：

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
}
于 2015-04-14T13:00:36.983 回答
0

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

            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
                }
            });
于 2015-09-25T08:43:30.953 回答