Как определить «текущую неделю» для дней рендеринга условно? - PullRequest
0 голосов
/ 20 марта 2019

Сегодня я обнаружил функцию dayRender (в v4.0.0beta4 из fullCalendar.io).

Моя цель - сделать предыдущие недели с серым фоном, текущую неделю с белым фоном и будущие недели с третьим цветом фона.

Есть ли в объектах 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 очень ценится.

1 Ответ

0 голосов
/ 22 марта 2019

Мое решение - использовать 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;
},
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...