在dayClick事件上使用css或jquery更改Fullcalendar中的eventLimitText颜色

Question

我在JSFiddle中有我的完整日历，当选中时，我会将所选的日期单元格涂成橙色。因此，当选中时，单元格将变为橙色。我想知道如何在背景为橙色时将"eventLimitText"更改为白色，以创建更好的对比度？目前，事件LimitText是灰色的，当突出显示时，与橙色不太匹配

任何帮助都将不胜感激。

最大的问题是更改dayClick事件发生时的颜色，因为fullcalendar使用了某种表重叠方案，因此具有day单元格的表与包含eventLimitText的表不同。

这是代码

$(document).ready(function() {
		
		$('#calendar').fullCalendar({
			header: {
left: '',
center: '',
right: ''
},
			//defaultDate: '2014-06-12',
			defaultView: 'basicWeek',
			editable: false,
height: 144,
eventLimit: 1,
eventLimitText: function (numEvents) {
	return numEvents;
},
eventLimitClick: function (cellInfo, jsEvent) {
	$(".fc-state-highlight").removeClass("fc-state-highlight");
$("td[data-date=" + cellInfo.date.format('YYYY-MM-DD') + "]").addClass("fc-state-highlight");
},
dayClick: function (date, jsEvent, view) {
	$(".fc-state-highlight").removeClass("fc-state-highlight");
$("td[data-date=" + date.format('YYYY-MM-DD') + "]").addClass("fc-state-highlight");
},
			events: [
				{
					title: 'Event',
					start: '2017-11-18'
				},
				{
					title: 'Event',
					start: '2017-11-18'
				},
{
					title: 'Event',
					start: '2017-11-15'
				},
				{
					title: 'Event',
					start: '2017-11-15'
				}
			]
		});
		
	});

td.fc-more-cell {
text-align: center;
font-size: 2.3em;
}
.fc-row .fc-content-skeleton,
.fc-row .fc-content-skeleton td, 
.fc-row .fc-content-skeleton table,
.fc-row .fc-content-skeleton tr{
height: 100%;
vertical-align: middle;
}
.fc-row .fc-content-skeleton td div {
display: inline-block;
line-height: 100%;
}
input, textarea {
max-width: none;
}
a.fc-day-grid-event:hover {
cursor: pointer !important;
}
td {
cursor: pointer !important;
}
#weekLeft, #weekRight {
cursor: pointer !important;
font-size: 2em;
margin-top: 65px;
padding: 5px;
border: 2px solid grey;
border-radius: 50%;
color: grey;
}
#weekLeft:hover, #weekRight:hover {
color: white;
background: grey;
}
.fc-center > h2 {
font-size: 25px;
}
/*td.fc-more-cell {
text-align: center;
font-size: 2em;
}*/
td.fc-more-cell {
text-align: center;
font-size: 2.8em;
vertical-align: middle
}
.fc-content-skeleton,
table,
tr {
height: 100%;
}
a.fc-more:hover {
text-decoration: none;
}
#stepsToListBtn:hover {
cursor: default;
}
.glyphicon-remove {
color: red;
}
.glyphicon-ok {
color: green;
}
.nav-pills > li.active > a i {
background: #fff;
padding: 0.25rem;
border-radius: 0.5rem;
}
div.fc-scroller {
overflow-y: hidden !important;
}

.disabled-date {
background-color: grey;
/*opacity: 0.7;*/
color: #FFFFFF;
cursor: default !important;
}
/*.seventy-two-hour-window {
background-color: #FF5A5F !important;
cursor: default !important;
}
.seventy-two-hour-color {
color: white !important;
}*/
.fc-state-highlight {
/*background-color: transparent !important;*/
background-color: #FF5A5F !important;
/*opacity: 1;*/
}
/*.spinner.default {
padding-left: 27px;
padding-top: 40px;
}*/
/*.spinner-offset {
padding-left: 27px;
padding-top: 40px;
}*/
.fc-more {
/*color: #FF5A5F !important;*/
color: grey !important;
}
.fc-highlight {
background: none !important;
}
.nav-pills > li.active > a i {
background: none;
}
.validCheck > li > a:hover, .validCheck > li > a:focus {
background-color: transparent;
text-decoration: none;
}
div.arrow {
left: 25% !important;
}
td {
cursor: pointer;
}
.fc-unthemed td.fc-today {
background: none;
}
div.fc-header-toolbar {
margin-bottom: 0px !important;
}
#spaceMenu.nav-pills > li.active > a,
#spaceMenu.nav-pills > li.active > a:focus,
#spaceMenu.nav-pills > li.active > a:hover {
background-color: transparent !important;
color: black !important;
}
#spaceMenu.nav > li > a:focus,
#spaceMenu.nav > li > a:hover {
background-color: transparent !important;
}
#spaceMenu a {
color: grey !important;
}
#spaceMenu a:hover {
color: black !important;
}
.spinner > div {
background-color: white !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://fullcalendar.io/js/fullcalendar-2.2.5/lib/moment.min.js"></script>
<script src="https://fullcalendar.io/js/fullcalendar-2.2.5/fullcalendar.min.js"></script>
<link href="https://fullcalendar.io/js/fullcalendar-2.2.5/fullcalendar.css" rel="stylesheet"/>
<div id='calendar'></div>

Answer 1

工作JSFiddle。

正如您所说，这里的问题是在第二个覆盖表中查找eventLimit文本出现的相应单元格。与第一个表一样，覆盖表单元格没有任何方便的基于日期的选择器，因此如何连接这两组单元格并不明显。

一种方法是从第一个表中查找单击日期的索引，然后在出现eventLimit文本的覆盖表中查找相应的索引。然后，您可以将CSS应用于相应的覆盖单元格。

例如，如果单击"星期二"，则这是第一个表中星期几集合<td>s中的第二个(基于0)<td>。因此，对应的fc-content-skeleton集合中的第二个<td>(eventLimit覆盖在其中)应该是匹配的覆盖单元。

然而，这并没有那么简单，因为eventLimit覆盖表可以包含比一周中的几天更多的<td>，这取决于是否有超过eventLimit事件的日子。在那些日子里，有一个额外的<td>来容纳eventLimitText。所以我们的选择逻辑需要忽略这些单元格。

AFAICT从您的代码中，您希望dayClick和eventLimitClick做完全相同的事情——突出显示单击的日期。我们可以将代码提取到一个函数中，并从两个处理程序中调用它，而不是在每个处理程序中复制代码。

以下是对JSFiddle代码的快速描述：

首先，在选定的日期为eventLimitText添加一个新的CSS类。我选择使用并将您现有的fc-state-highlight类应用到第二个表中，但当然您可以根据需要使用不同的类：

.fc-more-cell.fc-state-highlight a.fc-more {
color: white !important;
}

现在，在您的Fullcalendar代码中，从每次回调中调用我们的函数。注意，在dayClick:中

在回调函数中，'this'被设置为单击日期的。

因此，只使用$(this).addClass()而不是使用data-date的复杂选择器来定位单击的单元格是很容易的。

类似地，对于eventLimitClick，我们可以使用cellInfo.dayEl。

eventLimitClick: function(cellInfo, jsEvent) {
dayClick(cellInfo.dayEl);
},
dayClick: function(date, jsEvent, view) {
dayClick($(this));
},

最后添加我们的回调来处理任一事件：

function dayClick($target) {
// First remove any previous highlighting
$('td').removeClass('fc-state-highlight');
// Highlight what was just clicked
$target.addClass('fc-state-highlight');
// Find which of the set of <td>s we just clicked 
var index = $('.fc-bg td.fc-day').index($target);
// Find the corresponding index in the fc-content-skeleton table,
// ignoring the extra non-day <td>s
$('div.fc-content-skeleton td')
.not('.fc-limited')
.eq(index)
.addClass('fc-state-highlight');
}

现在，我们特定的新CSS目标是点击当天的eventLimitText。