Fullcalendar：改變特定日期的顏色

我被我在工作中遇到的項目卡住了。我需要改變一些日子的背景顏色。這是用戶應該看到的日曆，哪些日子可用，哪些不可用。我發現有一個名爲「data-date」的屬性，但我沒有找到使用它的可能性。Fullcalendar：改變特定日期的顏色

有什麼辦法可以控制特定日子的背景嗎？

我想一定有辦法，導致顯示當前日期的單元格也有另一種顏色。

2013-07-12 YasoCH

對於視圖month,和basicDay您可以通過提供dayRender函數來更改日子的渲染。例如：

$("#calendar").fullCalendar({ 
    dayRender: function (date, cell) { 
     cell.css("background-color", "red"); 
    } 
});

爲dayRender的文檔可在這裏：http://arshaw.com/fullcalendar/docs/display/dayRender/

而這裏的上的jsfiddle工作示例：http://jsfiddle.net/kvakulo/CYnJY/4/

來源

2013-07-12 12:34:18

見我的回答如下對於基於CSS的解決方案，這大概會更快：http://stackoverflow.com/a/36927481/270302 –

當與外部庫工作，你應該儘量不要利用任何這是由圖書館生成的。由於在下一個版本中，如果它們改變了庫的內部工作方式，庫仍然會向後兼容，但是代碼將停止工作。所以儘量使用庫API而不是做黑客。

回答你的問題，一種方法就是在所有不可用的日子裏添加一個新事件。這可以通過創建事件對象並執行renderEvent（.fullCalendar（'renderEvent'，event [，stick]））來完成。在創建事件對象時，將背景顏色指定爲所需的顏色，並且如果您不希望它可見，請將顏色，文本顏色，邊框顏色設置爲與背景相同。

編輯： Regin Larsen的答案似乎更好。我沒有注意到在文檔中。

來源

2013-07-12 12:39:29

如果任何人想要jquery fullcalendar前一整天都是紅色（或其他）顏色，那麼這是代碼。

var $calendar = $('#calendar').fullCalendar({ 
    header: { 
     left: 'prev,next today', 
     center: 'title', 
     right: 'month,basicWeek,basicDay' 
    }, 

    defaultView: 'month', 

    dayRender: function (date, cell) { 
     var check = $.fullCalendar.formatDate(date,'yyyy-MM-dd'); 
        var today = $.fullCalendar.formatDate(new Date(),'yyyy-MM-dd'); 
        if (check < today) { 
         cell.css("background-color", "red"); 
        } 
    } 
});

Regin Larsen code幫助我實現了這一點。感謝Regin Larsen。

來源

2014-01-09 12:54:47 gmwraj

爲什麼不使用「數據日期」屬性？

$("#calendar").fullCalendar(function() { 

    viewRender: function() { 
    $("[data-date="+$.fullCalendar.formatDate(new Date(), "yyyy-MM-dd")+"]").css("background-color", "red"); 
}, 

....

來源

2014-01-11 01:12:24 sulaiman

這一個幫助我。因爲'dayRender'方法在dayThreeView中無法正常工作 –

dayRender: function(date, cell){ 
     if (moment().diff(date,'days') > 0){ 
      cell.css("background-color","silver"); 
     } 
    },

來源

2014-10-21 17:50:29 radmonius

對於那些希望簡單地改變過去日期的顏色，目標在你的CSS .fc-past並添加background-color屬性。例如，：

.fc-past { 
    background-color: silver; 
}

來源

2016-04-29 00:12:26

要比較使用日期參數特定日期：

$("#calendar").fullCalendar({ 
    dayRender: function (date, cell) { 
     if (date.isSame('2016-08-04')) { 
      cell.css("background-color","red"); 
     } 
    } 
});

isSame來自moment.js，這是使用fullcalendar： http://momentjs.com/docs/#/query/is-same/

來源

2016-08-04 14:15:26 http203

Fullcalendar：改變特定日期的顏色

回答

相關問題