ASP.NET Calendar - asp.net

Question

I have a problem with calendar,I want to paint special days different color For example
On calendar
03.06.2011 Day--->blue
04.06.2011 day---->red
12.06.2011-04.07.2011 Days ----> yellow
More than one color I want to use selected day

Answer 1

You can use javascript to do that,
Refer to JSFiddle Here
You can add custom special day,
$(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');
};
}
}
}
});
});
For changing the colour, you can edit background on .holiday in css file
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;
}
Hope it can help you