[英]In full calendar hightlight custom dates
I want to show on the calendar, that what dates are free dates in the year.我想在日历上显示,一年中哪些日期是空闲日期。 For these, i want to set a red background.
对于这些,我想设置一个红色背景。
My problem is, that with this code, it gives the red background to all the dates.我的问题是,使用此代码,它为所有日期提供红色背景。
I am using this in the dayRender event.我在 dayRender 事件中使用它。
var unnep_napok =
[
"2019-01-12",
"2019-01-15"
];
$('#calendar').fullCalendar({
events: valami,
lang: 'hu',
dayClick: function(event) {
$(cell).removeClass('ui-widget-content');
$(cell).addClass('holiday');
$(this).css('background-color', 'green');
},
defaultView: 'month',
contentHeight: 'auto',
slotEventOverlap: false,
eventRender: function(eventObj, $el) {
$el.popover({
title: ' ',
content: eventObj.description,
trigger: 'hover',
placement: 'top',
container: 'body'
});
},
dayRender: function (date, cell) {
for(i = 0; i < unnep_napok.length; i++ )
{
cell.css("background-color", "red");
}
}
});
Update with compare:更新比较:
dayRender: function (date, cell) {
for(i = 0; i < unnep_napok.length; i++ )
{
if(date == unnep_napok[i] )
{
cell.css("background-color", "red");
}
}
}
Update 2, formatting array elements:
更新 2,格式化数组元素:
dayRender: function (date, cell)
{ for(i = 0; i < unnep_napok.length; i++ ) { var datum = unnep_napok[i].moment.format('yyyy-mm-dd'); if(date.getDate() == datum ) { cell.css("background-color", "red"); } } }
Following your update, there are still some problems which could be resolved by reading the documentation (and my earlier comments) more carefully:在您更新之后,仍有一些问题可以通过更仔细地阅读文档(以及我之前的评论)来解决:
1) I didn't give you the literal values to use in the "format" command. 1)我没有给你在“格式”命令中使用的文字值。 Did you read the documentation fully?
您是否完整阅读了文档? As you can see, the correct format would be
YYYY-MM-DD
(big letters not small letters).如您所见,正确的格式是
YYYY-MM-DD
(大写字母而不是小写字母)。
2) unnep_napok[i].moment.format
...this is not how you create a momentJS object . 2)
unnep_napok[i].moment.format
...这不是创建 momentJS 对象的方式。 I would expect your browser gave an error in the console about this.我希望你的浏览器在控制台中给出一个关于这个的错误。
3) But anyway 2) is not important really, because as I mentioned in my last comment, it's the date
value which you need to format ... your unnep_napok values are already strings!! 3) 但无论如何 2) 真的不重要,因为正如我在上一条评论中提到的,这是您需要格式化的
date
值......您的 unnep_napok 值已经是字符串!!
4) date.getDate()
.. I don't know where you got this from?? 4)
date.getDate()
.. 我不知道你从哪里得到的?? MomentJS does not document any such function. MomentJS 没有记录任何此类功能。
This should work for you:这应该适合你:
dayRender: function (date, cell)
{
for(i = 0; i < unnep_napok.length; i++ )
{
if(date.format('YYYY-MM-DD') == unnep_napok[i])
{
cell.css("background-color", "red");
}
}
}
A running example based on ADyson's answer.基于 ADyson 答案的运行示例。 I have also covered popover example for a quick start.
为了快速入门,我还介绍了 popover 示例。
.popover works this way $(element).popover and doesn't work using element.popover .popover 以这种方式工作 $(element).popover 并且不能使用 element.popover
Running example: https://jsfiddle.net/alifaraze/mr53d7nz/8/运行示例: https : //jsfiddle.net/alifaraze/mr53d7nz/8/
HTML HTML
<div id="calendar"></div>
Script脚本
$(document).ready(function() {
var unnep_napok = [
"2019-01-23",
"2019-01-25"
];
$('#calendar').fullCalendar({
events: [{
id: 1,
title: 'Full Day Event',
start: '2019-01-02',
end: '2019-01-03',
description: 'A full day event description'
},
{
id: 2,
title: 'Whole Week Event',
start: '2019-01-06',
end: '2019-01-10',
description: 'Whole week event description'
}
// more events here
],
eventRender: function(event, element) {
$(element).popover({
title: function() {
return "<B>" + event.title + "</B>";
},
placement: 'auto',
html: true,
trigger: 'click',
animation: 'false',
content: function() {
return "<h4>"+ event.description+"</h4>"
},
container: 'body'
});
},
dayRender: function(date, cell) {
for (i = 0; i < unnep_napok.length; i++) {
if (date.format('YYYY-MM-DD') == unnep_napok[i]) {
cell.css("background-color", "red");
}
}
}
});
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.