FullCalendar：Change agendaDay background-color

Question

雖然我看到這個問題，但我沒有看到答案。我只希望能夠在一定範圍內爲的background-color着色。

說我有我的日曆，每15分鐘有一個插槽分鐘，從上午9點到晚上9點，我只想着顏色不同10am到下午3點。

此信息將來自一個飼料，但這不是一個問題。我還沒有找到與日曆中設定時間有關的TD。也許我錯過了什麼？ :)我對jQuery和fullCalendar比較陌生。

此外，另一個快速的問題是無關的主要原因之一：

• 是否有可能從一個事件處理程序來獲取啓動它的日曆id？我的頁面上有多個日曆來模擬甘特圖視圖。這將使我能夠獲取正確的提要並填充正確的事件。

Answer 1

這裏是你的第一個問題的功能要求： http://code.google.com/p/fullcalendar/issues/detail?id=144 確保出演其接收更新。謝謝

Answer 2

我現在正在工作的項目中需要此功能。這是一個學校項目，如果那天是假期活動+週末，我必須用紅色突出背景。請注意，這裏所有星期六都不是假期。有些學校只在第二個星期六有假期，或者在某些學校任意選擇星期六作爲工作日。

不知何故，我克服了這個問題，即使它不是一個優雅的解決方案。

論行號2291 1.5.1版本2300加入這一行

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

到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<holidayArray.length;i++){ 
     holidays.push(+(mysqlDateToJSDate(holidayArray[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和新功能，我不想在代碼中插手太多。我不知道如何將這個變量作爲選項傳遞給我，並且很容易地將它放在我想要的位置。

這僅在月視圖中完成。我們也需要在其他視圖上也這樣做...

無法發佈預覽，但您可以看到它here。

Answer 3

我接受了@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 4

這是一個快速和骯髒的概念驗證，可在周視圖中使用最新版本的「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 = $('<div class="avail-block"></div>'); 
    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 5

我寫了一些簡單的註解支持做這樣的功能，它可以從

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 6

自2.2版本，可以使用Background Events

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