ASP.NET 日历

Question

我的日历有问题，我想给特殊的日子涂上不同的颜色，例如

在日历上

03.06.2011 Day--->蓝色

04.06.2011 day---->红色

12.06.2011-04.07.2011 天 ----> 黄色

我想在选定的日子使用不止一种颜色

Answer 1

你可以使用javascript来做到这一点，

参考JSFiddleHere

您可以添加自定义特殊日子，

$(document).ready(function () {

    $('#calendar').fullCalendar({
        theme: true,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        defaultDate: '2014-07-04',
        editable: true,
        events: [{
            title: 'All Day Event',
            start: '2014-07-01'
        }, {
            title: 'Long Event',
            start: '2014-07-07',
            end: '2014-07-10'
        }, {
            id: 999,
            title: 'Repeating Event',
            start: '2014-07-09T16:00:00'
        }, {
            id: 999,
            title: 'Repeating Event',
            start: '2014-07-16T16:00:00'
        }, {
            title: 'Meeting',
            start: '2014-07-12T10:30:00',
            end: '2014-07-12T12:30:00'
        }, {
            title: 'Lunch',
            start: '2014-07-12T12:00:00'
        }, {
            title: 'Birthday Party',
            start: '2014-07-13T07:00:00'
        }, {
            title: 'Click for Google',
            url: 'http://google.com/',
            start: '2014-07-28'
        }],
        eventAfterAllRender: function (view) {
                //Use view.intervalStart and view.intervalEnd to find date range of holidays
                //Make ajax call to find holidays in range.
                var fourthOfJuly = moment('2014-07-04','YYYY-MM-DD');
                var holidays = [fourthOfJuly];
                var holidayMoment;
                for(var i = 0; i < holidays.length; i++) {              
                    holidayMoment = holidays[i];
                    if (view.name == 'month') {
                        $("td[data-date=" + holidayMoment.format('YYYY-MM-DD') + "]").addClass('holiday');
                    } else if (view.name =='agendaWeek') {
                        var classNames = $("th:contains(' " + holidayMoment.format('M/D') + "')").attr("class");
                        if (classNames != null) {
                            var classNamesArray = classNames.split(" ");
                            for(var i = 0; i < classNamesArray.length; i++) {
                                if(classNamesArray[i].indexOf('fc-col') > -1) {
                                    $("td." + classNamesArray[i]).addClass('holiday');
                                    break;
                                }
                            }
                        }
                    } else if (view.name == 'agendaDay') {
                        if(holidayMoment.format('YYYY-MM-DD') == $('#calendar').fullCalendar('getDate').format('YYYY-MM-DD')) {
                            $("td.fc-col0").addClass('holiday');
                        };
                    }
                }
            }
    });

});

要更改颜色，您可以在 css 文件中编辑 .holiday 的背景

body {
    margin: 0;
    padding: 50px 0 0 0;
    font-family:"Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
    font-size: 14px;
}
#calendar {
    width: 100%;
}
.holiday {
    background: lightgray;
}

希望对你有帮助