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

时间:2019-01-11 13:05:51

标签: javascript date fullcalendar fullcalendar-3

我想在日历上显示什么日期是一年中的免费日期。对于这些,我想设置红色背景。

我的问题是,使用此代码,它为所有日期赋予红色背景。

我在dayRender事件中使用它。

SELECT
    sessionId,
    if (
        (lead(sessionId) OVER (ORDER BY sessionId, creationDate)) = sessionId,
        ((lead(creationDate) OVER (ORDER BY sessionId, creationDate)) - creationDate) / 1000,
        null
    ) as timeSpent,
    date_format(from_unixtime(creationDate/1000),  '%Y-%m-%d') date
FROM 
    pageViews

使用比较进行更新:

select 
    avg(totalSessionTime) averge, 
    date
from (
    select 
        sum(timeSpent) totalSessionTime,
        sessionId,
        date
    from (
        SELECT
            sessionId,
            if (
                (lead(sessionId) OVER (ORDER BY sessionId, creationDate)) = sessionId,
                ((lead(creationDate) OVER (ORDER BY sessionId, creationDate)) - creationDate) / 1000,
                null
            ) as timeSpent,
            date_format(from_unixtime(creationDate/1000),  '%Y-%m-%d') date
        FROM 
            pageViews
        where 
            creationDate > 1500000000000
    ) z
    where 
        timeSpent is not null
    group by 
        sessionId, date
) y
group by 
    date;
  

更新2,格式化数组元素:

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

2 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

一个基于ADyson答案的运行示例。我还介绍了快速入门的弹出窗口示例。

.popover以这种方式运行$(element).popover,而不能使用element.popover

运行示例:https://jsfiddle.net/alifaraze/mr53d7nz/8/

HTML

 <div id="calendar"></div>

脚本

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