code:
<script>
$(document).ready(function(){
var events = [{Title:"Delhi Sight Seeing – Jama Masjid, Rajghat, President House, India Gate & Qutab Minar",Duration:"3 days, 2 nights",Date:new Date("08/29/2018"),End:new Date("08/31/2018")}];
$("#calen").datepicker({
beforeShowDay: function(date) {
var result = [true, '', null];
var matching = $.grep(events, function(event) {
return event.Date.valueOf() === date.valueOf();
});
if (matching.length) {
result = [true, 'highlight', null];
}
return result;
},
onSelect: function(dateText) {
var date,
selectedDate = new Date(dateText),
i = 0,
event = null;
while (i < events.length && !event) {
date = events[i].Date;
if (selectedDate.valueOf() === date.valueOf()) {
event = events[i];
}
i++;
}
if (event) {
alert(event.Title);
alert(event.Duration);
}
}
});
});
</script>
I have created event calendar which is work perfectly for single date now I want to show those dates and onclick
on any dates they show event title
.
For example: suppose Date is 08/29/2018
and End is 08/31/2018
. Then calendar must highlights these dates 08/29/2018
,08/30/2018
and 08/31/2018
.
So, How can I do this ?