FullCalendar：更改agendaDay背景颜色

虽然我已经看到这个问题，但我还没有看到答案。 我只是希望能够在一定范围内为TD的background-color 。

假设我的日历每15分钟有一个时段分钟，从早上9点到晚上9点，我想只在上午10点到下午3点之间进行颜色调整。

此信息将来自Feed，但这不是问题。 我没有找到TD与日历内的设定时间有关。 也许我错过了什么？ :)我对jQuery和fullCalendar很新。

另外，另一个与主要问题无关的快速问题：

• 是否可以从事件处理程序获取启动它的日历的id ？ 我的页面上有多个日历来模拟甘特视图。 这将让我能够获取正确的Feed并填充正确的事件。

Answer 1

以下是针对您的第一个问题的function请求： http ： //code.google.com/p/fullcalendar/issues/detail？id = 144确保将其加注星标以接收更新。 谢谢

Answer 2

我写了一些简单的注释支持来做这种function，它可以从中找到

https://github.com/elhigu/fullcalendar

希望它在某些时候可以合并到官方分支机构

可以像这样添加注释：

  $('#calendar').fullCalendar({ .... events: [ { title: 'All Day Event', start: new Date(y, m, 1) } ], annotations: [{ start: new Date(y, m, d, 13, 0), end: new Date(y, m, d, 15, 30), title: 'My 1st annotation', // optional cls: 'open', // optional color: '#777777', // optional background: '#eeeeff' // optional }, { next annotation }, ...] }); }) 

有关如何使用注释的完整示例，请访问： https ： //github.com/elhigu/fullcalendar/blob/master/demos/annotations.html

Answer 3

我现在正在工作的项目中需要此function。 这是一个学校项目，如果当天是假日活动+周末，我必须用红色突出显示背景。 请注意，这里所有星期六都不是假期。 有些学校只在第二个星期六或某些学校有假期，随机周六将被选为工作日。

不知何故，我克服了这个问题，即使它不是一个优雅的解决方案。

在版本1.5.1的第2291行添加此行

 var refDate = typeof(window.holidays)!='undefined'?window.holidays:[]; //Quick and dirty fix 

从2300到2304用以下代码替换行

 if (+date == +today) { cell.addClass(tm + '-state-highlight fc-today'); }else if($.inArray(+date, refDate)!=-1){ //Added by me cell.addClass(tm + '-state-error'); //Added by me }else{ cell.removeClass(tm + '-state-highlight fc-today'); cell.removeClass(tm + '-state-error'); //Added by me } 

在调用完整日历之前，您需要创建一个转换为js日期对象的日期数组，然后通过在其前面添加一个+符号将其转换为长整数，就像这样

 var holidayArray = ['2011-06-26','2011-07-03','2011-07-10','2011-07-17','2011-07-24','2011-07-31']; window.holidays = []; for(var i=0; i 

最后我找到了一个js函数，它将mysql日期转换为js日期对象。

 function mysqlDateToJSDate(date) { var regex=/^([0-9]{2,4})-([0-1][0-9])-([0-3][0-9])$/; var parts=date.replace(regex,"$1 $2 $3").split(' '); return new Date(parts[0],parts[1]-1,parts[2],0,0,0); } 

调用完整日历后，不要忘记删除全局变量。

我知道创建一个全局变量并不是一件好事。 但考虑到完整日历非常活跃，频繁修复bug和新function，我不想过多介入代码。 我不知道如何将变量作为选项传递，并轻松地将其放在我想要的位置。

这仅在月视图上完成。 我们也需要在其他观点上做同样的事情......

无法发布预览但您可以在此处查看 。

Answer 4

我采用@Jegatheesh的解决方案并将其更改为不访问全局变量并使用内置格式。 这是1.5.3

 --- i/fullcalendar.js +++ w/fullcalendar.js @@ -29,6 +29,7 @@ var defaults = { right: 'today prev,next' }, weekends: true, + holidays: [], // editing //editable: false, @@ -2301,8 +2302,11 @@ function BasicView(element, calendar, viewName) { } if (+date == +today) { cell.addClass(tm + '-state-highlight fc-today'); + cell.removeClass(tm + '-holiday'); + }else if ($.inArray(formatDate(date, 'yyyy-MM-dd'), calendar.options.holidays) != -1) { + cell.addClass(tm + '-holiday'); }else{ - cell.removeClass(tm + '-state-highlight fc-today'); + cell.removeClass(tm + '-state-highlight fc-today ' + tm + '-holiday'); } cell.find('div.fc-day-number').text(date.getDate()); if (dowDirty) { 

它在td元素上引入了fc-holiday css类。

如果我们将假日数组项格式化为时间戳，然后调用$.inArray(+date, calendar.options.holidays) ，则可以改进性能。

Answer 5

这是一个快速而肮脏的概念validation，适用于周视图中最新版本的“agenda-views.html”演示文件。 它需要datejs和time.js（对于TimeSpan）并且当前不能用于滚动，但可以很容易地进行调整。 另请参阅完整页面要点： https ： //gist.github.com/3005635

 var resAvail = [ { DayOfWeek: 0, Start: new Date(y, m, d, 10, 0), End: new Date(y, m, d, 17, 30) }, { DayOfWeek: 1, Start: new Date(y, m, d, 9, 0), End: new Date(y, m, d, 19, 30) }, { DayOfWeek: 4, Start: new Date(y, m, d, 12, 0), End: new Date(y, m, d, 20, 00) } ] var view = calendar.fullCalendar('getView'); var slotHeight = view.getSlotHeight(); var slotMins = calendar.fullCalendar('option', 'slotMinutes'); var minTime = calendar.fullCalendar('option', 'minTime'); var slotTop = $('.fc-agenda-slots').offset().top - $('.fc-agenda-days').offset().top; // rip through days of week for (i = 0; i < 7; i++) { for (r = 0; r < resAvail.length; r++) { var currentRes = resAvail[r]; if (currentRes.DayOfWeek == i) { addAvailBlock(currentRes); } } } function addAvailBlock(currentRes) { var dayColumn = getDayColumn(i); var $availBlock = $('
'); dayColumn.append($availBlock); $availBlock.css('width', $availBlock.parent().css('width')); // Where we start the availability block var dayStart = Date.parse(currentRes.Start.toString('MM/dd/yyyy') + ' ' + minTime); var startOffsetSpan = new TimeSpan(currentRes.Start - dayStart); var startOffsetMins = startOffsetSpan.getMinutes() + (startOffsetSpan.getHours() * 60); var startOffsetSlots = startOffsetMins / slotMins; var startOffsetHeight = startOffsetSlots * slotHeight; var blockSpan = new TimeSpan(currentRes.End - currentRes.Start); var blockMins = blockSpan.getMinutes() + (blockSpan.getHours() * 60); var blockSlots = blockMins / slotMins; var blockHeight = blockSlots * slotHeight; $availBlock.css('top', slotTop + startOffsetHeight).css('height', blockHeight); } function getDayColumn(dayOfWeek) { switch (dayOfWeek) { case 0: return $('.fc-sun'); case 1: return $('.fc-mon'); case 2: return $('.fc-tue'); case 3: return $('.fc-wed'); case 4: return $('.fc-thu'); case 5: return $('.fc-fri'); case 6: return $('.fc-sat'); } } 

Answer 6

从版本2.2开始，您可以使用后台事件

 $('#calendar').fullCalendar({ defaultDate: '2014-11-10', defaultView: 'agendaWeek', events: [ { start: '2014-11-10T10:00:00', end: '2014-11-10T16:00:00', rendering: 'background' } ] });