是否可以在agendaWeek视图中根据开始日期和结束日期突出显示完整日历中的单元格。任何帮助都非常感谢。我的问题是在select事件中,基于开始和结束时间我想根据结束和开始时间更改单元格的颜色,就像我添加事件时一样。 提前谢谢。
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;
}
});
答案 0 :(得分:1)
对于这种情况,你必须在fullcalendar.js中做一些棘手的攻击。</ p>
首先, 在议程视图中,所有日子都有一整行 例如。周从2016年1月3日到2016年1月9日开始。从08:00开始,您将从2016年1月3日到2016年1月9日开始单水平行()。 在这里,你必须制作单独的div块,并将日期和时间设置为该特定单行中每天的id属性。
其次, 在您的选择基础上,您可以通过按ID获取元素来应用类,而id是日期和时间的组合。
答案 1 :(得分:0)
我将这个问题理解为'我可以根据事件的开始或结束时间更改日期颜色。如果是的话 - 是的! =)
在eventRender中做一些逻辑,并使用它的data-date属性查找day cel的dom对象(在这种情况下,我突出显示在中午之前有事件的任何日子):
$(document).ready(function() {
$('#calendar').fullCalendar({
...
eventRender: function(event, element){
if (event.start.hours() < 12){
$("td [data-date='" + event.start.format("YYYY-MM-DD") + "']").addClass('highlight-red');
}
},
...
});
});
<style>
#calendar .fc-day.highlight-red{
background-color: red;
}
</style>