Question

我今天在v4.0.0beta4的{{1}}中发现了dayRender函数。

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

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

使用

fullCalendar.io

我知道dayRender: function(dayRenderInfo) { console.log( $(dayRenderInfo.el).data('date') ); return dayRenderInfo.el; }包含dayRenderInfo，因此使用jQuery我可以读取el来检索呈现的日期“单元格”的日期。

但是，然后在js中，如何检查它呢，例如'2019-03-20'是当前星期，过去还是将来？

我使用fullcalendar标签发布了该问题，因为我希望有一个助手属性或类似的属性，否则无论如何，非常感谢纯js解决方案。

Answer 1

我的解决方案是使用dayRender（实际上是@ {fullCalendar.io）的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;
},

如何有条件地检测渲染天的“当前周”？

1 个答案: