如何有条件地检测渲染天数的'current week'？

Question

我今天发现了dayrender函数（在fullCalendar.io的v4.0.0beta4中）。

我的目标是在前几周呈灰色背景，当前一周的白色背景E带有第三个背景色。

fullcalendar.io对象中是否有可以帮助我的东西？

使用

dayRender: function(dayRenderInfo) { 
    console.log(  $(dayRenderInfo.el).data('date') );
    return dayRenderInfo.el;
}

我知道dayRenderInfo包含el，因此使用jQuery可以阅读$(el).data('date')来检索渲染日"单元"的日期。

但是，在JS中，如何检查它，例如" 2019-03-20"是当前的一周或过去或将来吗？

我使用fullcalendar标签发布了一个问题，因为我希望有一个助手的固定性或类似的标签，无论如何，都非常赞赏普通的JS解决方案。

Answer 1

我的解决方案是使用fullCalendar.io的dayRender函数（实际上 @ v4.0.1）

该功能接收已经渲染的HTML元素。但是您可以拦截并操纵它。

我决定将属性data-date附加到该元素，以便在运行时检查它。

注意：我正在使用jQuery。

dayRender: function(dayRenderInfo) { 
    // Make a Date object from current rendered element
    const day = dayRenderInfo.el;
    const date_str_of_this_day = $(day).data('date');
    const this_day = new Date(date_str_of_this_day);
    const today_string = new Date().toISOString().slice(0, 10);        
    // 0 (Sunday) ... 6 (Saturday)
    let number_of_weekday = this_day.getDay();
    if (number_of_weekday ==0) {
        // I shift to adapt to italian week
        // 1 (Monday) ... 7 (Sunday)
        number_of_weekday = 7;
    }
    // From today's date object, I can find monday
    let first = this_day.getDate() - number_of_weekday + 1;
    const monday_date = new Date(this_day.setDate(first));
    const monday_string = monday_date.toISOString().slice(0, 10);
    // From monday's date object I can find sunday
    let last = monday_date.getDate() + 6;
    const sunday_date = new Date(this_day.setDate(last));
    const sunday_string = sunday_date.toISOString().slice(0, 10);
    if (sunday_string < today ) {
         // the current day being renderer is AFTER current week
         dayRenderInfo.el.style.backgroundColor =   '#ededed';
    } else if (today < monday_string ) {
        // the current day being renderer is BEFORE current week
        dayRenderInfo.el.style.backgroundColor =   '#f9e9d7';
    } else {
        // the current day being renderer is PART OF curremt week
        dayRenderInfo.el.style.backgroundColor =   'white';
    }
    // return altered html rendered
    return dayRenderInfo.el;
},