带有边框的FullCalendar日期会影响其他没有边框的日期

时间:2017-10-23 02:49:38

标签: javascript html css google-chrome fullcalendar

我有一个使用FullCalendar呈现的日历。我为某些日期添加了边框 - 例如,假期。但是在谷歌浏览器中,似乎有些日期 - 本来没有边框似乎已经破坏了边框。有人遇到同样的问题吗?

enter image description here

 var holidays = [{"title":"Special Holiday","start":"2017-10-31","holiday":"1"},{"title":"All Saints Day","start":"2017-11-01","holiday":"1"},{"title":"All Souls Day","start":"2017-11-02","holiday":"1"},{"title":"Christmas Day","start":"2017-12-25","holiday":"1"}]

$('#booking_calendar_1').fullCalendar({
    // put your options and callbacks here
    locale: 'ja',
    theme: true,
    themeSystem: 'bootstrap3',
    header: {
        left: '',
        center: 'prev title next',
        right: ''
    },
    firstDay: 1,
    eventRender: function (event,element,view){
        element.attr('href', 'javascript:void(0);');

        if (event.holiday == '1') {
            var dateString = event.start.format("YYYY-MM-DD");

            $(view.el[0]).find('.fc-day[data-date=' + dateString + ']')
                            .addClass('holiday');
            $(view.el[0]).find('thead .fc-day-top[data-date=' + dateString + ']')
                             .addClass('red-label');
            element.removeAttr('href');
        }
    }
});

$('#booking_calendar_1').fullCalendar( 'addEventSource', holidays );

具有红色标签类

的日期的CSS
.calendar thead .fc-day-top.red-label .fc-day-number{
    border: 2px solid #f61320;
    color:  #f61320;
    border-radius: 50%;
    padding-left: 3px;
    padding-right: 5px;
    width: 17px;
    text-align: center;
}

0 个答案:

没有答案