更改單元格的顏色在一個完整的日曆

我需要更改arshaw完整的日曆的單元格的顏色。更改單元格的顏色在一個完整的日曆

我的要求是：應該有一個相同的顏色由一家公司提供的節假日列表中的TD手機。僱員假期列表中td單元應該有相同的顏色。

我們如何做到這一點。我能夠改變事件的顏色，但不能改變單元格。

而且如果我們可以根據節假日和離開改變一天的顏色的細胞內。

2012-04-10 user650922

在fullCalendar細胞是表細胞 - 事件被渲染爲浮動的div上對這些細胞的頂部。因此，讓我們說在月視圖中，每一天 - 單元格都有一個與之關聯的類。像星期天的「fc-sun」，星期一的「fc-mon」等等。每個單元格還具有關聯的日期類 - 例如「fc-day1」，「fc-day2」。

所以，讓我們說你要改變所有周日的背景色：

.fc-sun { 
    background-color: #FF0000; 
    color: #FFFFFF; 
}

等。希望這可以幫助。

來源

2012-04-11 21:22:55 ganeshk

eventRender: function (event, element, monthView) 
{ 
    if (event.title == "HOLIDAY") 
    { 
     var one_day = 1000 * 60 * 60 * 24; 
     var _Diff = Math.ceil((event.start.getTime() - monthView.visStart.getTime())/(one_day)); 
     var dayClass = ".fc-day" + _Diff; 
     $(dayClass).addClass('holiday-color'); 
    } 
}

此外，記住，你需要清除月的變化，這些類的名稱，否則他們將保持相同的背景顏色爲所有月份。

因此，你可能想/需要管理日曆的導航使用gotodate手動，然後使用jQuery的removeClass（）選擇以清除類名。

你需要做的是綁定你fullcalendar的未來和上個月按鈕的點擊事件，這樣做

$("#nextMonthBtn").click(function() { 
    // current year and month should be maintained, can be a`enter code here`enter code here`ccessed on loading attribute of the fullcalendar 
    //manually manage navigation`enter code here` 
    $('td').removeClass('holiday-color'); 
    calRef.fullCalendar('gotoDate', _currentYear, _currentMonth, 1) 
});

對於aditional的信息，請參閱：http://vishaljadhav.net/coloring-certain-days-when-using-full-calendar/

來源

2012-12-29 18:11:45

你的答案是有關事件！不是關於細胞！你有理解的問題嗎？ – 2016-08-06 09:30:37

如果您正在使用Jquery- Ui主題您需要移除ui-widget-content類並應用您自己的類。在下面的代碼中，我使用了紫色平面顏色的40x100圖像。

CSS

.holiday 
{ 
    border:1px solid #69196c; 
    background: #764ead url(holiday.png) 50% top repeat-x; 
    color: white; 
}

JS FULLCALENDAR

dayRender: function (date, cell) { 

    if ($.inArray(date, holidays) >= 0) { 

     // if you aren't using ui theme, just remove this line 
     $(cell).removeClass('ui-widget-content');        
     $(cell).addClass('holiday'); 

    } 
}

來源

2013-08-28 12:59:35 Perazzo

有沒有辦法給一天中的某些細胞上課，而不是給某一天的所有時間段添加課程？我有一個應用程序，我想要突出顯示某一時段的某些時段（營業時間爲上午9點至下午1點，下午3點至7點）。 – 2014-02-15 16:29:28

由於fullcalendar我張貼了新的解決方案，他們已經更新了，我知道，從問題過去了幾年，但我想是亡羊補牢:)

eventRender: function(event, element, monthView) { 
    if (event.className == "holiday") { 
      var dateString = $.fullCalendar.formatDate(event.start, 'yyyy-MM-dd'); 
       $('td[data-date="' + dateString + '"]').addClass('fully_colored_holiday'); 
      } 
    }

這裏是類：

.fully_colored_holiday, 
.fully_colored_holidaydiv, 
.fully_colored_holidayspan{ 
    background:#FF8C8C !important; 
}

來源

2014-05-02 18:09:39

更改單元格的顏色在一個完整的日曆

回答

相關問題