javascript - 在完整日历中突出显示自定义日期

标签 javascript date fullcalendar fullcalendar-3

我想在日历上显示,一年中哪些日期是空闲日期。对于这些,我想设置一个红色背景。

我的问题是,使用这段代码,它会为所有日期提供红色背景。

我在 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");
                    }
                }


            });

比较更新:

    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:

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");
                      }
                  }
              }

最佳答案

在你的更新之后,仍然有一些问题可以通过更仔细地阅读文档(和我之前的评论)来解决:

1) 我没有给你在“格式”命令中使用的字面值。你读过documentation吗?完全?如您所见,正确的格式是 YYYY-MM-DD(大字母而不是小字母)。

2) unnep_napok[i].moment.format ...这不是你的方式create a momentJS object .我希望您的浏览器在控制台中给出有关此的错误。

3) 但无论如何 2) 并不重要,因为正如我在上一条评论中提到的,您需要格式化的是 date 值……您的 unnep_napok 值已经是字符串了!!

4) date.getDate() .. 我不知道你从哪里得到这个?? MomentJS 没有记录任何此类功能。

这应该适合你:

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");
    }
  }
}

关于javascript - 在完整日历中突出显示自定义日期,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54147143/

相关文章:

javascript - FullCalendar 点击事件未触发

javascript - 是否可以在时间线 View 中使用全日历槽事件重叠选项?

php - 如何存储和解析 RRULE 数据

javascript - 在 ExtJS 6 中将 ext.getCmp 转换为 up() 或 down() 不返回任何内容

javascript - createPattern 不适用于 Canvas 矩形?

javascript - 如何从 typescript 中的字符串中减去日?

C#如何从sql server日期列中获取日期并显示在文本框中

ruby-on-rails - Rails Date.today 反射(reflect)了服务器部署日期

javascript - 我将如何合并和转换数组中的 JS 对象

mysql - 更新/插入具有自定义年份和月份的随机日期范围 - MYSQL