jQuery Datepicker: How to Mark the Holidays on Calendar
Jquery UI has a fully-featured and highly customizable date picker control that let us create and customize the control based on our requirements.
To create a basic date control, you just need to call the below single line of code
$(#date).datepicker();input field:
<input type="text" id="date" />The Date Picker will appears when textbox has the focus, and user can select the date. It disappears when loses focus or date selected. This component is fully localizable, can display multiple months at once, handles any date format, has date range restriction, and more. It has lot options and events available you to tweak.
Here, i would like to create a date control that will mark the holidays on the calendar.
See live Demo here and view the source if you’d like.
Mark Holidays in Date Picker
First, we need to create the holiday array list:
var holiDays =[[2011,01,01,'New Years Day'],[2010,01,14,'Pongal'],[2011,12,25,'Christmas Day']];If you need to populate the holidays from database, create the array at server side and inject that into client side.
$(function() {
$("#date").datepicker({
beforeShowDay: setHoliDays
});
// set holidays function which is configured in beforeShowDay
function setHoliDays(date) {
for (i = 0; i < holiDays.length; i++) {
if (date.getFullYear() == holiDays[i][0]
&& date.getMonth() == holiDays[i][1] - 1
&& date.getDate() == holiDays[i][2]) {
return [true, 'holiday', holiDays[i][3]];
}
}
return [true, ''];
}
});Above code, i have used “beforeShowDay” event, it takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable, [1] equal to a CSS class name(s) or ” for the default presentation, and [2] an optional popup tooltip for this date. It is called for each day in the datepicker before it is displayed.
Here, “setHoliDays” function returns the array with 3 values, [0] as ‘true’ (you can change this to ‘false’ if you want to disable holiday date), [1] is css class name as “holiday” (style the holiday using this css selector), and [1] is name of the holiday to be showed as a tooltip (it will show when you hover on the date)
You have to include the below style inside the head tag to display the holidays with different background color
<style type="text/css">
.ui-datepicker td.holiday a, .ui-datepicker td.holiday a:hover {
background: none #FFEBAF;
border: 1px solid #BF5A0C;
}
</style>
jQuery Form Validation Plugins
How to Refresh/Reload Page or Part of the Page Automatically
JQuery Textbox Hint
About Author
Thank you. so nice tip!!
thank you, you save my day.
Hi!
Your solution works really fine in the latest Mozilla & Chrome.
But there’s an issue with the IE 9 :
Using IE’s web console in debug mode, the following piece of code is highlighted
if (date.getFullYear() == holiDays[i][0]
&& date.getMonth() == holiDays[i][1] – 1
&& date.getDate() == holiDays[i][2])
Error Message:
For the property, “0” can not be retrieved value: The object is null or undefined
Here’s the complete code
var holiDays = [
[2012,04,01,’Service’],[2012,04,02,’Service’],[2012,04,03,’Service’],[2012,04,04,’Service’],
[2012,04,05,’Service’],[2012,04,06,’Service’],[2012,04,07,’Service’],
[2012,04,08,’Service’],[2012,04,09,’Service’],[2012,04,10,’Service’],[2012,04,11,’Service’],
[2012,04,12,’Service’],[2012,04,13,’Service’],[2012,04,14,’Service’],
[2012,04,15,’Service’],
[2012,04,16,’R’],[2012,04,17,’R’],[2012,04,18,’R’],
[2012,04,19,’R’],[2012,04,20,’R’],[2012,04,21,’R’],[2012,04,22,’R’],
[2012,04,23,’R’],[2012,04,24,’R’],[2012,04,25,’R’],
[2012,04,26,’R’],[2012,04,27,’R’],[2012,04,28,’R’],[2012,04,29,’R’],
[2012,04,30,’R’],[2012,05,01,’R’],[2012,05,02,’R’],
[2012,05,03,’R’],[2012,05,04,’R’],[2012,05,05,’R’],[2012,05,06,’R’],
[2012,05,28,’Service’],[2012,05,29,’Service’],[2012,05,30,’Service’],[2012,05,31,’Service’],
[2012,06,01,’Service’],[2012,06,02,’Service’],[2012,06,03,’Service’],
[2012,08,04,’R’],[2012,08,05,’R’],[2012,08,06,’R’],
[2012,08,07,’R’],[2012,08,08,’R’],[2012,08,09,’R’],[2012,08,10,’R’],
[2012,08,11,’R’],[2012,08,12,’R’],[2012,08,13,’R’],
[2012,08,14,’R’],[2012,08,15,’R’],[2012,08,16,’R’],[2012,08,17,’R’],
[2012,08,18,’R’],
[2012,08,19,’Service’],[2012,08,20,’Service’],[2012,08,21,’Service’],
[2012,08,22,’R’],[2012,08,23,’R’],[2012,08,24,’R’],
[2012,08,25,’R’],[2012,08,26,’R’],[2012,08,27,’R’],[2012,08,28,’R’],
[2012,08,29,’R’],[2012,08,30,’R’],[2012,08,31,’R’],
[2012,09,01,’R’],[2012,09,02,’R’],[2012,09,03,’R’],[2012,09,04,’R’],
[2012,09,05,’R’],[2012,09,06,’R’],[2012,09,07,’R’],
[2012,09,08,’R’],[2012,09,09,’R’],[2012,09,10,’R’],[2012,09,11,’R’],[2012,09,12,’R’],
];
$(function() {
$(“#date”).datepicker({
beforeShowDay: setHoliDays,
defaultDate: “+1d”,
numberOfMonths: 1
});
// set holidays function which is configured in beforeShowDay
function setHoliDays(date) {
for (i = 0; i < holiDays.length; i++) {
if (date.getFullYear() == holiDays[i][0]
&& date.getMonth() == holiDays[i][1] – 1
&& date.getDate() == holiDays[i][2]) {
return [true, 'holiday', holiDays[i][3]];
}
}
return [true, ''];
}
});
remove the comma in the end of the holiday list, beside the [2012,09,12,’R’]
i tested your code after removed the comma, works fine.
// set holidays function which is configured in beforeShowDay
function setHoliDays(date) {
for (i = 0; i < holiDays.length; i++) {
if (date.getFullYear() == holiDays[i][0]
&& date.getMonth() == holiDays[i][1] – 1
&& date.getDate() == holiDays[i][2]) {
return [true, 'holiday', holiDays[i][3]];
}
}
return [true, ''];
}
Should the return false which in the for loop ?
as i mentioned in the article, you can change that to “false” if you want to not allow the users to select those dates.
How can I disable mondays in calendar as our store is closed on mondays?
daysOfWeekDisabled: [1],
Excellent Code !Thanks a lot
How can I add different css class instead ‘holyday’? for example, I have an array of colors and how can I add one color to each day I want to mark?
And about disabling holidays AND ALL MONDAYS AND THURSDAYS ?
thanks you so much sir