Javascript 在FullCalendar dayClick事件中,我可以获取已存在于clicked date中的事件吗?

Javascript 在FullCalendar dayClick事件中,我可以获取已存在于clicked date中的事件吗?,javascript,fullcalendar,Javascript,Fullcalendar,在FullCalendar dayClick事件中,我可以获取已存在于clicked date中的事件吗 让我解释一下我的项目 我正在编写一个简单的php站点,允许用户在日历上添加/编辑事件 只有单个事件可以添加到日期 若用户点击空日期,将显示新事件弹出窗口(我使用dayclick事件) 如果用户使用现有事件单击日期,将显示编辑事件弹出窗口(我使用事件单击事件) 问题是,当用户在具有现有事件的日期的事件区域(上部区域或底部区域)之外单击时,会引发dayclick而不是eventclick。

在FullCalendar dayClick事件中,我可以获取已存在于clicked date中的事件吗

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

  • 只有单个事件可以添加到日期
  • 若用户点击空日期,将显示新事件弹出窗口(我使用dayclick事件)
  • 如果用户使用现有事件单击日期,将显示编辑事件弹出窗口(我使用事件单击事件)
问题是,当用户在具有现有事件的日期的事件区域(上部区域或底部区域)之外单击时,会引发dayclick而不是eventclick。
如果日期中存在事件,如何触发eventclick事件和跳过dayclick事件?

您的事件存储在客户端还是服务器端?如果在客户端,如果您希望在单击的时间内发生事件,则此操作应特别有效:

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

如果您不想往返,还可以看看fullCalendar.js中的refetchEvents中发生了什么。如果您不介意脱离fullCalendar主干,您可以将提取的事件保存到某个位置,这样您就不会进行大量DOM操作(取决于事件的数量,因为它们变得越来越大,这将变得很麻烦)。

您可以使用矩库。例如:

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

已验证的答案不适用于我,因此有可用代码:

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
}
dayClick:function(日期、事件、视图){
var计数=0;
date=date.toDate();
var startDate=新日期(Date.getFullYear(),Date.getMonth(),Date.getDate(),0,0,0);
var endDate=新日期(Date.getFullYear(),Date.getMonth(),Date.getDate(),23,59,59);
$(“#calendar”).fullCalendar('clientEvents',函数(事件){

如果(event.start.toDate()>=startDate&&event.start.toDate()=startDate&&event.end.toDate()这是您需要在另一个函数中包含当天的所有事件:

            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
                }
            });
var date=$('.js calendar').fullCalendar('getDate');
date=date.toDate();
var startDate=新日期(Date.getFullYear(),Date.getMonth(),Date.getDate(),0,0,0);
var endDate=新日期(Date.getFullYear(),Date.getMonth(),Date.getDate(),23,59,59);
var todaysEvents=$('.js calendar').fullCalendar('clientEvents',函数(事件){

如果(event.start.toDate()>=startDate&&event.start.toDate()=startDate&&event.end.toDate()我自己在寻找将公共假日输入日历的解决方案时遇到了这个问题。我发现这是一个很好的全天活动解决方案。我希望这能帮助其他人进一步了解这个问题

$('#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);
            }
        }
    }
});
$(“#日历”).fullCalendar({
事件单击:函数(事件){
ShowEditScreen(事件id);
},
dayClick:函数(日期){
var events=$('日历').fullCalendar('客户事件');
对于(var i=0;i
感谢您的回复我的事件来自服务器端,使用事件:“json events.php”那么我是否需要ajax调用来检索事件?是否可以编写一个javascript函数来接受日期作为参数并返回给定日期的事件列表而不返回服务器端?因为我可以在客户端浏览器上看到日期的事件。是否可以从日历dom查询事件?如果您试图通过dom进行工作,请查看查看fullcalendar.js文件中的代码将对您有很大帮助。您会注意到,创建者Adam Shaw计算tds,以了解放置各种事件的日期。因此,是的,这样做是绝对可能的。这将是非常痛苦的,并且需要大量的DOM操作-可能足够往返到服务er也一样快。而且,DOM操作不会得到事件的JSON,而是放在里面描述事件的div,只显示显示显示的信息。可能足够,也可能不够。我可以在日历DOM中看到表示每个日期的td。但是事件在日历表后存储为单独的div。我没有看到这个事件divs和td的关系。那么我从哪里可以得到event div和date td之间的关系?感谢什么视图?Month?AgendaDay?AgendaWeek?BasicWeek?BasicDay?对于week和day,标题都有每个日期,这是真的。但是在同一列中(对于week和day)是tds中的事件。对于月视图,它们是关联的。至少在1.4.3和1.4.4中是这样。我使用的是月视图。您能告诉我日期和事件是如何关联的更详细信息吗?将日期与<代码>时刻进行比较对我来说是有效的。
            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
                }
            });
$('#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);
            }
        }
    }
});