jQuery Fullcalendar：更改特定日期的颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17613582/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fullcalendar: Change the color for specific days
提问by Dr. Gadget
I'm stuck with a project I get at work. I need to change the background color of some days. It's a calendar where the user should see, which days are available and which not. I found out that there is an attribute called "data-date", but I didn't found a possibility to use it.
我被我工作中的一个项目困住了。我需要改变一些日子的背景颜色。这是用户应该看到的日历，哪些天可用，哪些天不可用。我发现有一个名为“data-date”的属性，但我没有找到使用它的可能性。
Is there any way to manipulate the background of specific days?
有什么办法可以操纵特定日子的背景吗？
I think there must be a way, cause the cell which shows the current date has another color too.
我认为一定有办法，因为显示当前日期的单元格也有另一种颜色。
回答by Regin Larsen
For the views month, basicWeekand basicDayyou can change the rendering of the days by providing a dayRenderfunction. E.g.:
对于意见month，basicWeek并且basicDay你可以通过提供一个改变的日子渲染dayRender功能。例如：
$("#calendar").fullCalendar({
dayRender: function (date, cell) {
cell.css("background-color", "red");
}
});
The documentation for dayRenderis available here: http://arshaw.com/fullcalendar/docs/display/dayRender/
文档dayRender可在此处获得：http: //arshaw.com/fullcalendar/docs/display/dayRender/
And here's a working example on jsfiddle: http://jsfiddle.net/kvakulo/CYnJY/4/
这是一个关于 jsfiddle 的工作示例：http: //jsfiddle.net/kvakulo/CYnJY/4/
回答by Avindra Goolcharan
For those looking to simply change the color of past dates, target .fc-pastin your css and add a background-colorproperty. E.g.,:
对于那些只想更改过去日期颜色的人，请.fc-past在您的 css 中定位并添加一个background-color属性。例如，：
.fc-past {
background-color: silver;
}
回答by radmonius
dayRender: function(date, cell){
if (moment().diff(date,'days') > 0){
cell.css("background-color","silver");
}
},
回答by gmwraj
If any one want to jquery fullcalendar previous all day red(or any other) colored then this is the code.
如果有人想 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 help me achive this. Thanks Regin Larsen.
Regin Larsen 代码帮助我实现了这一目标。谢谢雷金拉森。
回答by sulaiman sudirman
Why not using the "data-date" attribute?
为什么不使用“数据日期”属性？
$("#calendar").fullCalendar(function() {
viewRender: function() {
$("[data-date="+$.fullCalendar.formatDate(new Date(), "yyyy-MM-dd")+"]").css("background-color", "red");
},
....
回答by TK Omble
When working with external libraries, you should try not to take advantage of anything that was generated by the library. Since in the next version, if they change the way the library works internally, the library will still be backward compatible but your code will stop working. So try to use the library API as much as possible instead of doing hacks.
使用外部库时，您应该尽量不要利用库生成的任何内容。因为在下一个版本中，如果他们改变了库内部的工作方式，库仍将向后兼容，但您的代码将停止工作。所以尽量使用库 API，而不是做 hack。
Answering your question, one way to do it will be, add a new event to all the days that are not available. This can be done by creating event object and doing a renderEvent(.fullCalendar( 'renderEvent', event [, stick ] )). While creating an event object assign the background color as the color you want and set the color, text color, border color to the same as background if you dont want it to be visible.
回答您的问题，一种方法是，向所有不可用的日子添加一个新事件。这可以通过创建事件对象并执行 renderEvent(.fullCalendar( 'renderEvent', event [, stick ] )) 来完成。创建事件对象时，将背景颜色指定为您想要的颜色，如果您不希望它可见，请将颜色、文本颜色、边框颜色设置为与背景相同。
Edit: Regin Larsen's answer seems better. I didn't notice that in the documentation.
编辑：Regin Larsen 的回答似乎更好。我没有在文档中注意到这一点。
回答by http203
To compare using the date parameter for a specific day:
要使用特定日期的日期参数进行比较：
$("#calendar").fullCalendar({
dayRender: function (date, cell) {
if (date.isSame('2016-08-04')) {
cell.css("background-color","red");
}
}
});
isSame comes from moment.js, which is used by fullcalendar: http://momentjs.com/docs/#/query/is-same/
isSame 来自于全日历使用的 moment.js：http://momentjs.com/docs/#/query/is-same/
回答by Reemi
getDate does not work I guess, use moment instead.
我猜 getDate 不起作用，请改用 moment。
inside var calendar = $('#calendar').fullCalendar({ ... }
里面 var calendar = $('#calendar').fullCalendar({ ... }
dayRender: function (date, cell) {
var today = moment('2018-06-22T00:00Z');
if (date.isSame(today, "day")) {
cell.css("background-color", "blue");
}
},
