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

Question

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

我的目标是用灰色背景渲染前几周，用白色背景渲染当前周，然后用第三种背景颜色渲染未来几周。

fullcalendar.io 对象中有什么可以帮助我的吗？

使用

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

我知道 dayRenderInfo 包含 el，所以使用 jQuery 我可以读取 $(el).data('date') 来检索呈现日期 'cell' 的日期。

但是，在 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;
},

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

How to detect 'current week' for render days conditionally?

javascript

fullcalendar