根据选择事件的开始和结束，在fullCalendar议程视图中更改单元格背景 [英] Change cell background in fullCalendar agenda view based on start and end of a selection event
本文介绍了根据选择事件的开始和结束，在fullCalendar议程视图中更改单元格背景的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
任何帮助真的很感激。我的问题是在选择事件中，基于开始和结束时间，我想根据结束和开始时间更改单元格的颜色，就像我添加事件时一样。
在此先感谢。
var calendar = $（'＃eventCal'）。fullCalendar（{
标题：{left：'prev，next today'，center：'title'，right：'month，agendaweek，agendaDay'}，
selectable：true，
/ * selectable：{
month：false，
议程：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 ='$ {uns avedTimezone}'
$ .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& amp; currentView ==agendaWeek）{
var availabilityDialog = $（< div>+
'< input type =radioid = availableYesname =availabilityvalue =true/>'+Add Available Time+
'< br />'+
'< input type =radio id =availabilityNoname =availabilityvalue =false/>'+移除可用性+
< / 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 />会员： + event.member）;
}
}，
viewDisplay：function（view）{
currentCalendarView = view.name;
}
}）;
解决方案
对于这种情况，您必须做一点棘手的攻击fullcalendar.js。
首先，
在议程视图中，所有日期都有一个完整的行
eg。从2016年1月3日开始到2016年1月9日星期开始。08:00你将有一个单行水平行（），从2016年1月3日开始到2016年1月9日。
在这里你必须制作单独的div块，并设置日期和时间作为特定单一行中每天的id属性。
其次，
在您的选择基础上，您可以通过获取元素由id而id是日期和时间的组合。
Is it possible to highlight cells in full calendar based on start and end date in agendaWeek view. Any help is really appreciated. My problem is in select event, based on start and end time i want to change the color of cells based on end and start time, just like when i add an event. Thanks in advance.
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;
}
});
解决方案
For this situation you have to do little tricky hack in fullcalendar.js.
First, In agenda view there is a single full row for all days eg. Week start from 3rd Jan, 2016 to 9th Jan, 2016. And for 08:00 you will have single horizontal row () which start from 3rd Jan, 2016 to 9th Jan, 2016. Here you have to make separate div blocks and set date and time as id attribute for each days within that particular single row.
Second, On your selection bases you can apply class by getting element by id whereas id is combination of date and time.
这篇关于根据选择事件的开始和结束，在fullCalendar议程视图中更改单元格背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
