the above screenshot is a part of our project where the objective is to book an appointment for a concerned doctor according to the day's he/she is available as mentioned. we want to reflect the same days in the calendar to be active/ highlighted.. and the rest of the days will be disabled.. so that no action can be performed on those days. we want to do this with the help of html , css , php or javascript. please help.
/* create an array of days which need to be disabled */
var disabledDays = ["2-21-2010","2-24-2010","2-27-2010","2-28-2010","3-3-2010","3-17-2010","4-2-2010","4-3-2010","4-4-2010","4-5-2010"]; /* utility functions */
function nationalDays(date) { var m = date.getMonth(), d = date.getDate(), y = date.getFullYear(); //console.log('Checking (raw): ' + m + '-' + d + '-' + y); for (i = 0; i < disabledDays.length; i++) { if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1 || new Date() > date) { //console.log('bad: ' + (m+1) + '-' + d + '-' + y + ' / ' + disabledDays[i]); return [false]; } } //console.log('good: ' + (m+1) + '-' + d + '-' + y); return [true]; } function noWeekendsOrHolidays(date) { var noWeekend = jQuery.datepicker.noWeekends(date); return noWeekend[0] ? nationalDays(date) : noWeekend; } /* create datepicker */
jQuery(document).ready(function() { jQuery('#date').datepicker({ minDate: new Date(2010, 0, 1), maxDate: new Date(2010, 5, 31), dateFormat: 'DD, MM, d, yy', constrainInput: true, beforeShowDay: noWeekendsOrHolidays }); }); 