как найти прошедшие ивенты в bootstrap year calendar

268

24 сентября 2018, 01:30

для своего проэкта я использую плагие bootstrap year calendar. Как можно найти прошедшие ивенты и применить например к ячейкам этого ивента какойто цвет

js:
$('.js-yearcalendar').calendar({
            style: 'custom',
            customDataSourceRenderer: function(element, date, event) {
                $(element).css('background-color', "#3279b7");
                $(element).css('color', "#fff");
                $(element).css('border-radius', '0');
                $(element).append("<div class='ycalen__dots'></div>");
                for (var i = 0; event.length > i; i++) {
                    $(element).find(".ycalen__dots").append("<div class='ycalen__dot'></div>");
                }
            },
            clickDay: function(e) {
                $(".popover").popover('hide');
                if(e.events.length > 0) {
                    var content = '';
                    for(var i in e.events) {
                        content += '<div class="event-tooltip-content">'
                                + '<a href="'+ e.events[i].url +'" class="ycalen__tooltip-content">'
                                + '<div class="ycalen__tooltip-img-col"><img src="'+ e.events[i].logo +'" class="ycalen__tooltip-img"></div>'
                                + '<div class="ycalen__tooltip-content-col">'
                                + '<div class="ycalen__tooltip-name">' + e.events[i].name + '</div>'
                                + '<div class="ycalen__tooltip-location">' + e.events[i].city + ' ' + e.events[i].country + '</div>'
                                +'</div>'
                                + '</a></div>';
                    }
                    $(e.element).popover({
                        trigger: 'manual',
                        container: 'body',
                        html: true,
                        content: content,
                        placement: 'top'
                    });
                    $(e.element).popover('show');
                }
            },
            dataSource: yearcalendarEventsList
        });

Answer 1

Выделение цветом особых дат можно настроить в dataSource:

$('#calendar').calendar({ 
    dataSource: [
        {
            startDate: new Date(2016, 1, 4),
            endDate: new Date(2016, 1, 15),
            color: 'yellow'
        },
        {
            startDate: new Date(2016, 2, 7),
            endDate: new Date(2016, 2, 11),
            color: 'pink'
        },
        {
            startDate: new Date(2016, 3, 5),
            endDate: new Date(2016, 5, 15),
            color: '#48A38C'
        }
    ]
});

Вот пример использования (кликните 2016 год).

Ещё более сложное поведение (например, подсветку текущей даты) можно настроить с помощью своих customDataSourceRenderer и setCustomDayRenderer:

...
   customDayRenderer: function(element, date) {
        if(date.getTime() == circleDateTime) {
            $(element).css('background-color', 'red');
            $(element).css('color', 'white');
            $(element).css('border-radius', '15px');
        }
    }