Javascript 在 FullCalendar dayClick 事件中，我可以获取点击日期中已经存在的事件吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2516050/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
In the FullCalendar dayClick event, can I get the events that already exist in clicked date?
提问by zawmn83
In the FullCalendar dayClick event, can I get the events that already exist in clicked date?
在 FullCalendar dayClick 事件中，我可以获取点击日期中已经存在的事件吗？
http://arshaw.com/fullcalendar/docs/mouse/dayClick/
http://arshaw.com/fullcalendar/docs/mouse/dayClick/
Let me explain a little about my project I'm writing a simple php site that allow user to add/edit event on calendar.
让我解释一下我的项目我正在编写一个简单的 php 站点，允许用户在日历上添加/编辑事件。
- Only single event can add to a date.
- If user click on empty date, New event popup will show (I use dayclick event).
- If user click date with existing event, Edit event popup will show (I use eventclick event).
- 只有单个事件可以添加到日期。
- 如果用户单击空日期，将显示新事件弹出窗口（我使用 dayclick 事件）。
- 如果用户单击带有现有事件的日期，将显示编辑事件弹出窗口（我使用 eventclick 事件）。
The problem is when user click outside of event area (upper area or bottom area) of a date with existing event, it raise dayclick instead of eventclick. How can I trigger eventclick event and skip dayclick event if there is existing event in the date?
问题是当用户在具有现有事件的日期的事件区域（上部区域或底部区域）之外单击时，它会引发 dayclick 而不是 eventclick。如果日期中存在事件，如何触发 eventclick 事件并跳过 dayclick 事件？
回答by justkt
Are your events stored on the client side or on the server side? If on the client side, this should work specifically if you want the event in that clicked time:
您的事件是存储在客户端还是服务器端？如果在客户端，如果您希望在该点击时间内发生事件，这应该特别有效：
$('#calendar').fullCalendar({
dayClick: function(date, allDay, jsEvent, view) {
$('#calendar').fullCalendar('clientEvents', function(event) {
if(event.start <= date && event.end >= date) {
return true;
}
return false;
});
}
});
This will give events that overlap the clicked time and are stored on the client side. For the all-day slot, it will give all events overlapping that day.
这将提供与单击时间重叠并存储在客户端的事件。对于全天时段，它将提供当天重叠的所有事件。
If you want all events on that date itself, regardless of whether the allDay slot or a time slot was clicked.
如果您想要该日期本身的所有事件，无论是单击 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;
});
}
});
If your events are stored on the server, you'll want to take the date provided in your dayClick callback and use it to construct a call to your server to get the info in whatever format you need.
如果您的事件存储在服务器上，您将需要获取 dayClick 回调中提供的日期，并使用它来构建对服务器的调用，以获取您需要的任何格式的信息。
EDITIf doing a round trip or trying to get the information other ways
编辑如果进行往返或尝试以其他方式获取信息
$('#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
}
}
});
And if you don't want the round trip, you can also take a look at what happens in, say, refetchEvents in fullCalendar.js. If you don't mind diverging from the fullCalendar trunk, you can save off fetched events somewhere so that you aren't doing a bunch of DOM manipulation (depending on the number of events, as they get large that will get unwieldy).
如果你不想要往返，你也可以看看在 fullCalendar.js 中的 refetchEvents 中发生了什么。如果您不介意与 fullCalendar 主干不同，您可以将获取的事件保存在某处，这样您就不会进行一堆 DOM 操作（取决于事件的数量，因为它们变大会变得笨拙）。
回答by Krizzy
I've just come across this issue myself whilst finding a solution for entering public holidays on to a calendar. I found this to be a good solution for full day events. I hope this can help someone else further down the line.
我自己刚刚遇到了这个问题，同时找到了将公共假期输入日历的解决方案。我发现这是全天活动的一个很好的解决方案。我希望这可以帮助其他人更进一步。
$('#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);
}
}
}
});
回答by Gabriel Zulian
You can use the Moment library. For example:
您可以使用 Moment 库。例如：
$('#endDate').val(moment(endDate).format('YYYY-MM-DD hh:mm:ss'));
回答by Alex
Exested answers didn't work for me so there is working code:
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
}
回答by derdida
This is is you need all your events for the current day in another function:
这是您在另一个函数中需要当天的所有事件：
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
}
});
