jQuery Fullcalendar - 根据事件选择突出显示一天
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7823112/
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
Fullcalendar - highlighting a day based on event selection
提问by Arthur Frankel
In fullcalendar you can select an event (which triggers) the eventClick function/callback. What I would like to do is highlight the day of the event when the event is clicked (in month view).
在 fullcalendar 中，您可以选择一个事件（触发） eventClick 函数/回调。我想做的是在单击事件时突出显示事件的日期（在月视图中）。
For example, if the event is on October 30 and I select the event I would like the background color of the day to be highlighted. This is very similar to how fullcalendar handles "today" where it highlights today in a yellowish color.
例如，如果活动是在 10 月 30 日，而我选择了要突出显示当天背景颜色的活动。这与 fullcalendar 处理“今天”的方式非常相似，它以淡黄色突出显示今天。
I can't seem to figure out how to tie the fc-event class or the event object itself to the actual day div in the calendar. My October 30th event appears within the following div (which is the October 30 box):
我似乎无法弄清楚如何将 fc-event 类或事件对象本身与日历中的实际日期 div 联系起来。我的 10 月 30 日事件出现在以下 div（即 10 月 30 日框）中：
<div class="fc-sun fc-widget-content fc-day35 fc-first">
How can I find this div (so that I can highlight it) based on the event object?
如何根据事件对象找到这个 div（以便我可以突出显示它）？
采纳答案by Matt H.
Sorry this is a rough solution, mostly from memory, as I'm not set up with any dev tools at this computer.
抱歉，这是一个粗略的解决方案，主要来自记忆，因为我没有在这台计算机上设置任何开发工具。
Hopefully this is what you're looking for!
希望这就是你要找的！
//create fullCalendar:
$("#calendar").fullCalendar({
/* options */
eventClick: function(event, jsEvent){
//use the passed-in javascript event to get a jQuery-wrapped reference
//to the DOM element we clicked on.
//i can never remember if this is .target, .currentTarget, or .originalTarget
//... jquery has spoiled me
var $clickedEvent = $(jsEvent.target);
//tell the "selectionManager" to find the day this event belongs to,
//and add the "selected" css class to it
selectionManager.select($clickedEvent);
}
});
//define an object that handles the adding-removing of the 'selectedDay' css class
var selectionManager = (function(){
//i like making private variables :-)
var $curSelectedDay = null
//define a "select" method for switching 'selected' state
return {
select: function($newEvent) {
if ($curSelectedDay){
//if we already had a day chosen, let's get rid of its CSS 'selectedDay' class
$curSelectedDay.removeClass("selectedDay");
}
//find the parent div that has a class matching the pattern 'fc-day', and add the "selectedDay" class to it
$curSelectedDay = $thisEvent.closest('div[class~="fc-day"]').addClass("selectedDay");
}
};
})();
回答by Fitz Agard
You can simply use the select methodin full calendar.
您可以简单地在完整日历中使用select 方法。
For example:
例如：
$('#calendar').fullCalendar('select', date);
Where datecomes from event.start:
date来自哪里event.start：
eventClick: function( event, jsEvent, view ) {
//pass event.start to select method
}
回答by aroth
Here's a slightly simpler solution that worked for me:
这是一个对我有用的稍微简单的解决方案：
$(".fc-state-highlight").removeClass("fc-state-highlight");
$(jsEvent.currentTarget).addClass("fc-state-highlight");
...that goes inside of your click handler, like:
...进入您的点击处理程序内部，例如：
$('#eventCalendar').fullCalendar({
dayClick: function(date, allDay, jsEvent, view) {
$(".fc-state-highlight").removeClass("fc-state-highlight");
$(jsEvent.currentTarget).addClass("fc-state-highlight");
}
});
Note that this is using the dayClickhandler instead of the eventClickhandler. I don't see why it should not work with eventClickas well, but I have not tested that yet.
请注意，这是使用dayClick处理程序而不是eventClick处理程序。我不明白为什么它也不能正常工作eventClick，但我还没有测试过。
Edit:
编辑：
Using a comparable approach for the eventClickhandler proved to be more complicated than I thought it would be. The problem is that, in terms of DOM hierarchy, there is no parent/child relationship between the containing tdelement for a 'day' and the containing divelements for the events that are shows as occurring on that day.
eventClick事实证明，对处理程序使用类似的方法比我想象的要复杂。问题在于，就 DOM 层次结构而言，td“一天”的包含div元素与显示为当天发生的事件的包含元素之间没有父/子关系。
So I had to write a function to lookup the correct tdelement for a given date. I ended up with something like:
所以我必须编写一个函数来查找td给定日期的正确元素。我最终得到了类似的东西：
function findContainerForDate(date) {
var firstDayFound = false;
var lastDayFound = false;
var calDate = $('#eventCalendar').fullCalendar('getDate');
var allDates = $('td[class*="fc-day"]')
for (var index = 0; index < allDates.length; index++) {
var container = allDates[index];
var month = calDate.getMonth();
var dayNumber = $(container).find(".fc-day-number").html();
if (dayNumber == 1 && ! firstDayFound) {
firstDayFound = true;
}
else if (dayNumber == 1) {
lastDayFound = true;
}
if (! firstDayFound) {
month--;
}
if (lastDayFound) {
month++;
}
if (month == date.getMonth() && dayNumber == date.getDate()) {
return container;
}
}
}
...and then I could implement eventClicklike this:
...然后我可以这样实现eventClick：
eventClick: function(calEvent, jsEvent, view) {
var selectedContainer = findContainerForDate(calEvent.start);
$(".fc-state-highlight").removeClass("fc-state-highlight");
$(selectedContainer).addClass("fc-state-highlight");
}
回答by kayz1
eventRender: function (event, element, view) {
// like that
var dateString = $.fullCalendar.formatDate(event.start, 'yyyy-MM-dd');
view.element.find('.fc-day[data-date="' + dateString + '"]').css('background-color', '#FAA732');
// or that
var cell = view.dateToCell(event.start);
view.element.find('tr:eq(' + (cell.row + 1) + ') td:eq(' + cell.col + ')').css('background-color', '#FAA732');
}
Is there better solution?
有更好的解决方案吗？
回答by Matt Austin
Not sure if this helps but I've found that this works quite nicely, similar to kayz1's solution...
不确定这是否有帮助，但我发现这很好用，类似于 kayz1 的解决方案......
$("[data-date='" + $.datepicker.formatDate('yy-mm-dd', new Date(calEvent.start)) + "']").addClass("fc-state-highlight");
回答by Elephant
So many answers. Little investigations give me more clear code: fullcalendar v2.1.1
这么多答案。小调查给我更清晰的代码：fullcalendar v2.1.1
onDayClick = function( date, jsEvent, view ){
var cell = view.dateToCell(date);
var el = view.dayGrid.getCellDayEl(cell);
var $clickedEvent = $(el);
$clickedEvent.addClass("SelectedDay");
};
回答by jthiesse
My take on aroth's finder function
我对 aroth 的查找功能的看法
// based on the given event date return the full calendar day jquery object (<td ...>)
// matching day and month
//
// assumptions:
// - the event date is if for the same year as the current viewable month
// - the fc-day* TD's are in chronological order
// - the fc-day* TD's not for the current month have a class of fc-other-month
//
findFullCalendarDayForClickedEvent : function( eventDate ) {
var foundDay;
var $theCalendar = $( '#myCalendar' );
var currentDate = $theCalendar.fullCalendar( 'getDate' );
var fullCalendarDayContainers = $theCalendar.find( 'td[class*="fc-day"]' );
for( var i = 0; i < fullCalendarDayContainers.length; i++ ) {
var $currentContainer = $( fullCalendarDayContainers[ i ] );
var dayNumber = $currentContainer.find( '.fc-day-number' ).html();
// first find the matching day
if ( eventDate.getDate() == dayNumber ) {
// now month check, if our current container has fc-other-month
// then the event month and the current month needs to mismatch,
// otherwise container is missing fc-other-month then the event
// month and current month need to match
if( $currentContainer.hasClass( 'fc-other-month' ) ) {
if( eventDate.getMonth() != currentDate.getMonth() ) {
foundDay = $currentContainer;
break;
}
}
else {
if ( eventDate.getMonth() == currentDate.getMonth() ) {
foundDay = $currentContainer;
break;
}
}
}
}
return foundDay;
}
回答by Jeremy F.
Thanks to Fitz Agard's answer for the existence of fullcalendar selectmethod, here's a version that works even for multiple days events.
感谢 Fitz Agard 对 fullcalendar select方法存在的回答，这里的版本甚至适用于多天事件。
Basically it tries to find the day the mouse click coordinates are within, then it passes its date to the fullcalendar selectmethod.
基本上它会尝试找到鼠标单击坐标所在的日期，然后将其日期传递给 fullcalendar选择方法。
function findClickedDay(e) {
var days = $('#calendar .fc-day');
for(var i = 0 ; i < days.length ; i++) {
var day = $(days[i]);
var mouseX = e.pageX;
var mouseY = e.pageY;
var offset = day.offset();
var width = day.width();
var height = day.height();
if ( mouseX > offset.left && mouseX < offset.left+width
&& mouseY > offset.top && mouseY < offset.top+height )
return day;
}
}
function myDayClick(date) { ... } // Optional
$('#calendar').fullCalendar({
dayClick: function(date) { myDayClick(date); }, // Optional
eventClick: function(event, jsEvent, view) {
clickedDay = findClickedDay(jsEvent);
var date = new Date(clickedDay.data('date'));
$('#calendar').fullCalendar('select', date);
myDayClick(date); // Optional
}
});
EDIT:
编辑：
I just realized fullCalendar selectmethod does not trigger the dayClickcallback. So if you have set a dayClickcallback you must wrap it in a function (called myDayClickhere) and call it in the eventClickcallback. If you don't have a dayClickcallback then you can remove the Optionalparts.
我刚刚意识到 fullCalendar选择方法不会触发dayClick回调。因此，如果您设置了dayClick回调，则必须将其包装在一个函数中（此处称为myDayClick）并在eventClick回调中调用它。如果您没有dayClick回调，那么您可以删除Optional部分。
回答by ModusPwnens
If you upgrade to fullcalendar v2 or greater it is very simple:
如果您升级到 fullcalendar v2 或更高版本，则非常简单：
$('#calendar').fullCalendar({
eventClick: function(calEvent, jsEvent, view) {
// change the border color just for fun
$(this).css('border-color', 'red');
}
});
Here is the link for eventClick.
这是eventClick的链接。
