Grey out unavailable calendar dates

[Dominic]

I would like to grey out unavailable dates on the calendar which appears on the second stage of the booking process:

Currently, the only dates that are greyed out are ones that are in the past.

If I only have an event on 26th and 27th November, for example, then I would like for all the other dates to be greyed out - or just to have a dropdown where the customer can select from the two dates (instead of using the calendar).

How would this be possible?

Thanks in advance!

[Tristan Nguyen]

there is away but you have to pre define it so jquery datetimepicker can beable to greyed out.

here is my example for greyed out National day & weekend day.

var unavailableDates = ["25-12","26-12","31-12","01-01-2015","26-01-2015","03-04-2015","04-04-2015","05-04-2015","06-04-2015","25-04-2015","06-08-2015","05-10-2015"];
var curr_date = new Date().toString('yyyy');
for(var i=0; i<unavailableDates.length;i++)
{
    if(unavailableDates[i].split('-').length < 3)
        unavailableDates[i] = unavailableDates[i] + "-" + curr_date;
}

function unavailable(date) {
    dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" +date.getFullYear();
    if ($.inArray(dmy, unavailableDates) < 0) {
        var noWeekend = $.datepicker.noWeekends(date);
        return !noWeekend[0] ? noWeekend : [true];
    } else {
        return [false,"","Block Out"];
    }  
}

then add a line beforeShowDay: unavailableDate, to your jquery datepicker function eg:

$('#select-date').datepicker({
            dateFormat: 'dd-mm-yy',
            firstDay: 1, // Monday
            minDate: 0,
            beforeShowDay: unavailableDate,
            defaultDate: Date.today(),
            .....
});


hope this will give you an idea for your answer.

[kbase...@gmail.com]

If you are trying to *completely* limit the range of dates, then you can edit the /assets/js/frontendbook.js and scroll down to line 49 you can set the minDate to the first day for which you want to accept events and also a maxDate. This must be done as 'dd-mm-yy'

So for example, if I add to/edit  $('#select-date').datepicker (ignore the firstDay as I have made a few changes for my own purposes):

dateFormat: 'dd-mm-yy',
firstDay: 7, // Sunday
minDate: '02-02-15',
maxDate: '20-02-15',

Then I will have a datepicker that limits the range to Feb. 2nd 2015 to Feb. 20th. See screenshot below:

[Dishon]

Thank you guys. You are awesome ;)

[Craig Tucker]

I used the suggestion from  kbase...@gmail.com to limit the days a person can book to a 60 day period with

   maxDate: "+60d",//limits the number of days out to schedule

Found that the following will grey out the weekends:

   beforeShowDay: $.datepicker.noWeekends,//blocks out weekends

However I wanted to use the example above by Tristan Nguyen.  I cannot get it to work.  Has anyone used it?  The code hangs when I put it in.  It hangs even when I insert a simplified code to just blank out one day (Monday) such as:

    beforeShowDay: function(date) {
        var day = date.getDay();
        return [(day != 1)];
    }

It does not hang when I use this to block out week ends:

   beforeShowDay: $.datepicker.noWeekends,//blocks out weekends

What I would like is to grey out all dates that are not available for appointments.  If the schedule is full for a day, I want it to be greyed out and it looks like that would be possible with the example given by Tristan Nguyen.  This would be very helpful because I usually am running fully booked and so I want people to quickly find openings.

[Craig Tucker]

The solution for Tristan Nguyen's code to work is:

Change:

beforeShowDay: unavailableDate,

to:

beforeShowDay: unavailable,

Now it works great.  Now to get the array of dates that produce no_available_hours to fill:

       

     var unavailableDates =[ ]

I am looking at lines 361-394 for ideas. This will take me a while to figure out. 

[Craig Tucker]

This is a modification of Tristan's code that is a little more flexible:

var unavailableDates = ["25-12","26-12","31-12","01-01-2015","26-01-2015","03-04-2015","04-04-2015","05-04-2015","06-04-2015","25-04-2015","06-08-2015","05-10-2015"]; //this blocks out specific holidays for the year in "day-month-year" format.

var curr_date = new Date().toString('yyyy');
for(var i=0; i<unavailableDates.length;i++)
{
    if(unavailableDates[i].split('-').length < 3)
        unavailableDates[i] = unavailableDates[i] + "-" + curr_date;
}

function unavailable(date) {
    dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" +date.getFullYear();
    if ($.inArray(dmy, unavailableDates) < 0) {

        var day = date.getDay();
        return [(day != 6 && day != 0 && day != 1)]; // This blocks specific days of the week e.g. 0=Sunday, 1=Monday, ... 6 =Saturday

    } else {
        return [false,"","Block Out"];
    }  
}

then add a line beforeShowDay: unavailable, to your jquery datepicker function eg:

$('#select-date').datepicker({
            dateFormat: 'dd-mm-yy',
            firstDay: 1, // Monday
            minDate: 0,

            beforeShowDay: unavailable,
            defaultDate: Date.today(),
            .....
});

I am still trying to figure out how to put an array of days with no openings for a given service into

var unavailableDates [ ]. 

I have run into lots of dead ends. So, any help would be appreciated. The interaction between appointments.php, frontend_book.js, and appointments_module.php is a little confusing for me. I am starting to get it but not quite. I think blacking out days with no availability would make the date picker much more effective and client friendly.

[Tom Le]

I seconded Craig ideas of grey out dates that provider is not working or no more available time will make the data picker more friendly.

Also, can the unavailableDates be part of the Settings, since every country or state or province has different holiday, and the dates changes every year.  Secondly, we would want the user to make this change, but not in the code

[Tom Le]

Hi Craig,

I looked further into this problem and I think it will be hard, because the available_hours is call after the date is select.  If you look into frontend_book.js

        // Make ajax post request and get the available hours.
        var ajaxurl = GlobalVariables.baseUrl + 'appointments/ajax_get_available_hours';
        jQuery.post(ajaxurl, postData, function(response) {

and then in the appointments.php

    public function ajax_get_available_hours() {
        $this->load->model('providers_model');
        $this->load->model('appointments_model');
        $this->load->model('settings_model');

        try {
            // If manage mode is TRUE then the following we should not consider the selected
            // appointment when calculating the available time periods of the provider.
            $exclude_appointments = ($_POST['manage_mode'] === 'true') ? array($_POST['appointment_id']) : array();

            $empty_periods = $this->get_provider_available_time_periods($_POST['provider_id'], $_POST['selected_date'], $exclude_appointments);


So I think we need alex to shred some light into this. 

The minimum is to get the date grey out if it is not on the provider working plan.

[Craig Tucker]

Yes, that is what I am running into.  I am trying to write my own function to get it done.  I am not much of a coder however.  The trial and error right is very high for me.

[Craig Tucker]

I was trying to do this on the PHP side and import it into the frontend_book.js but I had problems there.  I did not want to do much in frontend_book.js because I have not learned all the conventions of JSON.  Now I think just doing the code in frontend_book.js the most graceful solution.

What I think the structure of my code needs to be:

 

I need to use a portion of Alex’s code of getAvailableHours in frontend_book.js

Name it getUnavailableDays and do something like:

 

getUnavailableDays function(selDate) {

        $('#available-hours').empty();  //empties the array

 

I need to say the following in JSON (I have to learn how to do JSON, I need help here, in PHP I would say the following)

 

$TodayPlusMax=date('dd-MM-yyyy') ;

//EndDate

$MaxDate=strtotime(date('dd-MM-yyyy', strtotime($TodayPlusMax)). " +60 days");

$fullybookeddates = array();

 while (strtotime($TodayPlusMax) <= strtotime($MaxDate)) {

 

Then I need to use the rest of Alex’s code of getAvailableHours up to if (response.length > 0) { is             

 

I replace 'selected_date' with $TodayPlusMax  (or I suppose ‘TodayPlusMax’)

 

And turn the if statement around    

from

if (response.length > 0) {       

to

 if (response.length <1) {

 

Then I need to say the following in JSON (my PHP is here)

$fullybookeddates =      "'".$TodayPlusMax."'";

$TodayPlusMax=strtotime(date('dd-MM-yyyy', strtotime($TodayPlusMax)) . " +1 day");

} else {

$fullybookeddates =      ",'".$TodayPlusMax."'";

$TodayPlusMax=strtotime(date('dd-MM-yyyy', strtotime($TodayPlusMax)) . " +1 day");

}

 

THEN $fullybookeddates (or 'fullybookeddates') is my array for blacking out days

I think my logic is right.  Can someone help me with JSON

Craig

[Craig Tucker]

I thought Tristan's function was working but what I see is that the array of dates in unavailableDates  is not being processed in the function "unavailable" I am not sure why?  I have developed a function to make an array of unavailable dates based on what days are booked up now but since this part of Tristan's function is not working I am having no luck.  Are others noticing this? 

Also, I see if I just try this in http://jsfiddle.net/vfod0krm/

it works I am not sure why it will not in this code.

[Craig Tucker]

This part of the  code:

var curr_date = new Date().toString('yyyy');
for(var i=0; i<unavailableDates.length;i++)
{
    if(unavailableDates[i].split('-').length < 3)
        unavailableDates[i] = unavailableDates[i] + "-" + curr_date;
}

Is not working.  Full dates (eg. 19-4-2015) will work but not 19-4.  It looks like it should work but it does not.

Craig

[Claudine Van Winckel-Weber]

Hi,

I am new to JS and CodeIgniter and I also must grey out public holidays, fully booked days, a range of prefedined days and weekends. Although I find your post very helpfull, I am not sure where to add the code. Thanks for your help.

Kind regards

[Claudine Van Winckel-Weber]

Hi,

Ok got it based on tristans and craigs code for the public holidays and weekends althought it must be updated every year for the recurring dates like New Year, 1st May, and X-Mas as "26-12" eg does not work in frontend-book.js.

Here what I have just before  $('#select-date').datepicker (It is based on Luxembourg's public holidays):

var unavailableDates = ["1-5-2015","14-5-2015","26-5-2015","23-6-2015","15-8-2015","1-11-2015","25-12-2015","26-12-2015","1-1-2016","28-3-2016","1-5-2016","5-5-2016","16-5-2016","23-6-2016","15-8-2016","1-11-2016","25-12-2016","26-12-2016"];

        var curr_date = new Date().toString('yyyy');
        for(var i=0; i<unavailableDates.length;i++)
        {
            if(unavailableDates[i].split('-').length < 3)
            unavailableDates[i] = unavailableDates[i] + "-" + curr_date;
        }
       

        function unavailable(date) {
            dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" +date.getFullYear();
          
            if ($.inArray(dmy, unavailableDates) < 0) {
                var day = date.getDay();

                return [(day != 6 && day != 0)];
                } else {
                    return [false,"","Booked Out"];
                }
        }

In  $('#select-date').datepicker i have (the first 5 lines)

            dateFormat: 'dd-mm-yy',
            firstDay: 1, // Monday
            minDate: 0,
            beforeShowDay: unavailable,
            defaultDate: Date.today(),

Now only the part with booked out days is missing.

[Craig Tucker]

Hello Claudine,

The following works to black out specific days:

  function unavailable(date) {
  
   dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" +date.getFullYear();
   if ($.inArray(dmy, unavailableDates) < 0) {

    return [true,"","Book Now"];

   } else {
    return [false,"","Booked Out"];
   }
  }

The following will block out specific days and weekends:

function unavailable(date) {
  dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" +date.getFullYear();
    if ($.inArray(dmy, unavailableDates) < 0) {

        var noWeekend = $.datepicker.noWeekends(date);
        return !noWeekend[0] ? noWeekend : [true];

    } else {
        return [false,"","Block Out"];
    }  
}

The following works to block out days of the week:

function unavailable(date) {

 var day = date.getDay();

        return [(day != 6 && day != 0 && day != 1)]; // This blocks specific days of the week e.g. 0=Sunday, 1=Monday, ... 6 =Saturday

}

I do not know how to get this last one to work with blocking specific dates

[Craig Tucker]

What we need is a function that will loop through days from now to maxDate (I use 60 days out) into the existing function:

getAvailableHours (or a simplified version thereof)

and fill an array with dates where 'no_available_hours' pups up

That array should be what is in unavailableDates

This would allow us to just use our calendar on the back end to update this.  Simple, right?  I keep trying to get this to happen but I have limited knowledge of JS and so I am having to do a lot of trial and error.  More error than anything right now. 

[Claudine Van Winckel-Weber]

OK, thanks for your answer.

I just had the idea that we could eventually try to do it by counting appointments set for one day and then grey out the day when the max number is reached.

Lets say I can get 4 appointments a day. THen one could say (in metalanguage)

i = today;
j = today + 60days;
bookedAppointment = 0;
bookedoutdays [];
while (i < j) {
  getAppointmentsFromDBwhereDatei ();
  foreach (appointment found for day i) {
    bookedAppointment ++;
  }
  if (bookedAppointment >= 4) {
    bookedoutdays [] + [i];
  }
  bookedAppointment = 0;
}
}

Wouldn't that be a way to come to the point?
or just use it for the shown month?

[Craig Tucker]

getAppointmentsFromDBwhereDatei() and after could be handled by the existing function-- getAvailableHours, found in the frontend_book.js file.  I think it could be simplified. I know this does not work but I was thinking something like this (riffing off yours):

i = today;
j = today + 60days;
bookedAppointment = 0;
bookedoutdays [];
while (i < j) {
 

  foreach (appointment found for day i) {

    TestAvailability ();
}
}
  
TestAvailability: function(i) {
       
    
  // Find the selected service duration (it is going to
        // be send within the "postData" object).
        var selServiceDuration = 15; // Default value of duration (in minutes).
        $.each(GlobalVariables.availableServices, function(index, service) {
            if (service['id'] == $('#select-service').val()) {
                selServiceDuration = service['duration'];
            }
        });
       
        // If the manage mode is true then the appointment's start
        // date should return as available too.
        var appointmentId = (FrontendBook.manageMode)
                ? GlobalVariables.appointmentData['id'] : undefined;

        var postData = {
            'service_id': $('#select-service').val(),
            'provider_id': $('#select-provider').val(),
            'selected_date': i,
            'service_duration': selServiceDuration,
            'manage_mode': FrontendBook.manageMode,
            'appointment_id': appointmentId
        };

        // Make ajax post request and get the available hours.
        var ajaxurl = GlobalVariables.baseUrl + 'appointments/ajax_get_available_hours';
        jQuery.post(ajaxurl, postData, function(response) {

            ///////////////////////////////////////////////////////////////
            console.log('Get Available Hours JSON Response:', response);
            ///////////////////////////////////////////////////////////////
           
            if (!GeneralFunctions.handleAjaxExceptions(response)) return;

            // The response contains the available hours for the selected provider and
            // service. Fill the available hours div with response data.
            if (response.length > 0) {
               
    bookedoutdays=0
               
            } else {
                bookedoutdays=i
            }
   return bookedoutdays
        }, 'json');
    },
 

[Craig Tucker]

I am still trying to get this to work.  I think I am closer, simplified, but it still is not working.  In frontend_book.js

Just above:

        $('#select-date').datepicker({  //around line 48

I have added the following variable and function

  
  var unavailableDay;
  
  function unavailable(date) {
   var unavailableDates = [];
   var i = Date.today().toString('dd-MM-yyyy');
   var j = Date.today().addDays(60).toString('dd-MM-yyyy');
   while(i <= j){
   FrontendBook.getAvailableHours(i);
   alert(unavailableDay)
   unavailableDates.push(Date.parse(unavailableDay).toString('dd-MM-yyyy'));

   }
   
   dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" +date.getFullYear();
   if ($.inArray(dmy, unavailableDates) < 0) {
    return [true,"","Book Now"];
   } else {
    return [false,"","Booked Out"];
   }
  }

within the function getAvailableHours under the line:

    $('#available-hours').text(EALang['no_available_hours']);

    //I added this:

    unavailableDay = selDate.toString('dd-MM-yyyy');

I am trying to test each day for the next 60 days (j) by running the dates (i) through the function getAvailableHours and then pull the dates from unavailableDay within getAvailableHours and add them to the array unavailableDates. My code is still not working.  Any one have any ideas about where I am going wrong? 

[Craig Tucker]

My current, better, (and still not quite functioning solution is as follows):

  /* create an array of days which need to be disabled */
  function unavailableDays(days) {
   var i = Date.now();
   var d;
   var checkit
   var unavailableDates = [];
   var j = i + days * 24 * 60 * 60 * 1000;
   while(i < j) {
     d=new Date(i);
    
     //add an if then statement here, if true push the date else no
     checkit = testAvailability("'" + d.getDate() + '-' + (d.getMonth() + 1) + '-' + (d.getYear() + 1900) + "'");
     if(checkit ===  true){
     unavailableDates.push(d.getDate() + '-' + (d.getMonth() + 1) + '-' + (d.getYear() + 1900));
     i += 24 * 60 * 60 * 1000;
     }else{
     i += 24 * 60 * 60 * 1000;
     }
   }
   return unavailableDates;
  }

  var numOfDays = 60;
  var populated = unavailableDays(numOfDays);

  function unavailable(date) {

   
   dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" +date.getFullYear();

   if ($.inArray(dmy, populated) < 0) {
    return [true];
   } else {
    return [false];
   }
  }

  
    function testAvailability(selDate) {

       
        // Find the selected service duration (it is going to
        // be send within the "postData" object).
        var selServiceDuration = 15; // Default value of duration (in minutes).
        $.each(GlobalVariables.availableServices, function(index, service) {
            if (service['id'] == $('#select-service').val()) {
                selServiceDuration = service['duration'];
            }
        });
       
        // If the manage mode is true then the appointment's start
        // date should return as available too.
        var appointmentId = (FrontendBook.manageMode)
                ? GlobalVariables.appointmentData['id'] : undefined;

        var postData = {
            'service_id': $('#select-service').val(),
            'provider_id': $('#select-provider').val(),

            'selected_date': selDate,

            'service_duration': selServiceDuration,
            'manage_mode': FrontendBook.manageMode,
            'appointment_id': appointmentId
        };

        // Make ajax post request and get the available hours.
        var ajaxurl = GlobalVariables.baseUrl + 'appointments/ajax_get_available_hours';
        jQuery.post(ajaxurl, postData, function(response) {
            ///////////////////////////////////////////////////////////////
            console.log('Get Available Hours JSON Response:', response);
            ///////////////////////////////////////////////////////////////
           

            if (!GeneralFunctions.handleAjaxExceptions(response));

            // The response tells me if the date is booked (true) or not.
            if (response.length > 0) {
               return false;
            } else {
               return true;
            }
        }, 'json');
    }

Problems: the testAvailability function should work.  It is based upon getAvailableHours.  I have stripped out the HTML information and  tuned it in to a Boolean.  I am not sure how to feed it the correct date information for selDate.  The current solution is not doing it.  So, close.

[Craig Tucker]

The following works as it should: unavailableDays, and unavailable

The following does not seem to work as it is: testAvailability

I am not sure why testAvailability is not working.  I have verified that unavailableDays is passing the date to testAvailability but it is not processing it through to the true/false statement.

function unavailableDays(days) {
   var i = Date.now();
   var d;

   var unavailableDates = [];
   var j = i + days * 24 * 60 * 60 * 1000;
   while(i < j) {
     d=new Date(i);

     var newDate = d.getDate() + '-' + (d.getMonth() + 1) + '-' + (d.getFullYear());   

     //add an if then statement here, if true push the date else no

     if (testAvailability(newDate) === true) unavailableDates.push(newDate);

[Claudine Van Winckel-Weber]

Hi,

I have solved the problem with the date when you enter "1-1" instead of "1-1-2015"

        var publicHolidays = ["1-1","1-5","14-5-2015","26-5-2015","23-6","15-8","1-11","25-12","26-12","28-3-2016","5-5-2016","16-5-2016"]
       
        //Returns the current year as should

        var curr_date = new Date().toString('yyyy');

       //New array which will be populated in the for below
        var updatedPublicHolidays = [];
       
        for(var i=0; i< publicHolidays.length;i++)
        {
            if(publicHolidays[i].split('-').length < 3) {
                publicHolidays[i] = publicHolidays[i] + "-" + curr_date;
            }
            // Every occurence will be writen in the new array which then works.
            updatedPublicHolidays.push(publicHolidays[i]);

        }

             
        function unavailable(date) {
            dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" +date.getFullYear();

            // Here we now use the new array
            if ($.inArray(dmy, updatedPublicHolidays) < 0) {

[Claudine Van Winckel-Weber]

Even better:

Now it considers a whole year in advance (calculated from the current month)
    var publicHolidays = ["1-1","1-5","23-6","15-8","1-11","25-12","26-12","14-5-2015","26-5-2015","28-3-2016","5-5-2016","16-5-2016"];

        //Returns the current year as should

        var curr_date = new Date();
        var curr_month = curr_date.getMonth() + 1;
        var curr_year;
        var updatedUnavailableDays = [];

       
        for(var i=0; i< publicHolidays.length;i++)
        {

            curr_year = curr_date.getFullYear();
            if(publicHolidays[i].split('-').length < 3) {
                if (publicHolidays[i].split('-')[1] < curr_month)
                {  
                    curr_year += 1;
                }                
                publicHolidays[i] = publicHolidays[i] + "-" + curr_year;
            }
            updatedUnavailableDays.push(publicHolidays[i]);
        }

[Friedrich Röhrs]

Hi,

i have updated appointments.php and frontend_book.js to only mark available days as "clickable" in calendar.

you can find the files here: https://gist.github.com/anonymous/9e49e4a67871f213a084

the main change is the function ajax_get_available_days() in the appointments.php file and updateCalendar in the javascript file.

There is a variable in the JS that defines the maximum days looked ahead (standard: 30 days).

I only tested it quickly though and its a bit (a lot) hacky but it will show only available days as clickable. Other days have a tooltip that says the no timeslots available text in the right language. That way holidays can be defined in the backend.

[Craig Tucker]

Friedrich!!  Fantastic. That is right were I was going.  I was trying to write a function for appointments.php. Then looked here.  Yours works fine and I learned a lot by looking at your code.  Thank you so much.  Hacky is good.  A lot less hacky than me.

[Craig Tucker]

One issue I am seeing with Friedrich's solution is that it is not working for me in Firefox.  It is working perfectly in Chrome and IE however.  I am not sure why not in Firefox.

[Craig Tucker]

I cleared cookies and it is working now in Firefox.

[Noris Lee]

I understand that the last conversation of this thread was back in April. I have tried a few proposed solutions in this thread and was not able to make it work for me. I am not a PHP programmer so I played with the code and added a section of code in the following function. I would like some feedback if this is working, or will cause issue on overall coding structure. (note that I use the easyblue code modified by Mr. Tucker):

public function ajax_get_available_days() {

    /* This uses ajax_get_available_hours even though it is really bad form, 

    so that code changes are kept to a minimum. This is really bad form however. Sorry. */

    try {

        $interval_oneday =  new DateInterval( "P1D" );

$today = new DateTime("today");

$maxdays = (isset($_POST["timeframe"]) && is_int($_POST["timeframe"]))

? $_POST["timeframe"] 

: 60;

$available_days = array();

for ($i = 0; $i < $maxdays; $i++) {

$_POST["selected_date"] = $today->format('d-m-Y');

// ARGH!

ob_start();

$this->ajax_get_available_hours();

$available_hours_string = ob_get_contents();

ob_end_clean(); 

$available_hours = json_decode($available_hours_string);

if (array_key_exists("exceptions", $available_hours)) {

continue;

} else {

if (count($available_hours)>0) {

$available_days[] = $today->format('d-m-Y');

}

}

$today->add($interval_oneday);

}

// begin to block the holidays listed in $holidays_list variable

$holidays_list = array("26-11-2015","27-11-2015","24-12-2015","25-12-2015","31-12-2015","01-01-2016");

for ($j = 0; $j < sizeof($available_days); ++$j)

{

if (in_array($available_days[$j], $holidays_list))

{

                // if holidays is found in the array of all available days, unset (remove) it

unset($available_days[$j]);

}

}

$available_days = array_values($available_days);  // reindex array in order to preserver sequential index order

// end to block the holidays listed in $holidays_list variable

echo json_encode($available_days);

    } catch(Exception $exc) {

        echo json_encode(array('exceptions' => array(exceptionToJavaScript($exc))));

    }

}

[Craig Tucker]

Very cool. This should work out fine.

[Lars Juul]

Anyone have this working on EA 1.1.1 ?