是否可以根据议程周 View 中的开始和结束日期突出显示完整日历中的单元格。非常感谢任何帮助。我的问题是在选择事件中，根据开始和结束时间，我想根据结束和开始时间更改单元格的颜色，就像我添加事件时一样。 提前致谢。
var calendar = $('#eventCal').fullCalendar({
header:{left:'prev,next today', center:'title', right:'month,agendaWeek,agendaDay'},
selectable:true,
/*selectable: {
month: false,
agenda: true
},*/
defaultView:'${params.calView}',
ignoreTimezone:true,
allDayDefault:false,
unselectAuto:false,
editable:false,
selectHelper: true,
events:'${createLinkTo(dir: '/')}calendar/loadEvents/?requestuser=' +${params.requestuser?:currentUser} + '&courseSource=' + '${params.courseSource}',
eventClick:function (event) {
var currentView = $('#eventCal').fullCalendar('getView').name;
var unsavedTimezone = '${unsavedTimezone}'
$.fancybox({
titleShow:false,
width:400,
height:120,
autoDimensions:true,
overlayOpacity:0.6,
onComplete:function () {
attachCalendarDatePickerClasses(event.start);
},
href:event.urlCalendar+'&calView=' + currentView + '&requestUser=' + $('#view_others').val() + '&unsavedTimezone=' + unsavedTimezone
});
},
select:function (startDate, endDate, allDay) {
var currentView = $('#eventCal').fullCalendar('getView').name;
if(drag && currentView=="agendaWeek") {
var availabilityDialog = $("<div>" +
'<input type="radio" id="availabilityYes" name="availability" value="true" />' + "Add Available Time" +
'<br/>' +
'<input type="radio" id="availabilityNo" name="availability" value="false"/>' + " Remove Availability" +
"</div>");
availabilityDialog.dialog({
title: 'Select Availability',
draggable: false,
autoOpen: false,
modal: true,
});
availabilityDialog.dialog('open');
$("body").on("click", ".ui-widget-overlay", function () {
availabilityDialog.dialog("close");
});
},
eventRender: function(event, element) {
var currentView = $('#eventCal').fullCalendar('getView').name;
if(currentView=='month'){
element.qtip({
// content:$(this).children('.fc-event-time').text()
content: event.title + "<br>" + $.fullCalendar.formatDate(event.start, 'MM/dd/yyyy') + "<br>" + $.fullCalendar.formatDate(event.start, 'h:mmTT')+ "-" +$.fullCalendar.formatDate(event.end, 'h:mmTT') + " " +"${calendar.userTimeZone()}"+ "<br/>Member:"+event.member
});
}
if(currentView!='month'){
element.find('.fc-event-title').append("<br/>" + $.fullCalendar.formatDate(event.start, 'h:mmTT') + "-" + $.fullCalendar.formatDate(event.end, 'h:mmTT')+ " "+"${calendar.userTimeZone()} " +"<br/>Member:"+event.member);
}
},
viewDisplay: function (view) {
currentCalendarView = view.name;
}
});
最佳答案
对于这种情况，您必须在 fullcalendar.js 中进行一些棘手的修改。
首先， 在议程 View 中，所有日期都有一个完整行 例如。周从 2016 年 1 月 3 日开始到 2016 年 1 月 9 日。对于 08:00，您将有一个水平行 ()，从 2016 年 1 月 3 日开始到 2016 年 1 月 9 日。 在这里，您必须制作单独的 div block ，并将日期和时间设置为该特定单行中每一天的 id 属性。第二， 在您的选择基础上，您可以通过 id 获取元素来应用类，而 id 是日期和时间的组合。
关于jquery - 根据选择事件的开始和结束更改完整日历议程 View 中的单元格背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34586848/