What do the functions 'beforeShowDay' and 'onSelect' actually do in following Datepicker widget implementation?

Question

I've just started working on a website on which some developer was working previously. He has implemented Datepicker widget in one of the web pages.

When I go through the code of this implementation I'm not understanding what does the code actually do? I'm not able to figure out the way logic has been written.

I also gone through the jQuery UI API documentation of Datepicker widget regarding functions 'beforeShowDay' and 'onSelect' but couldn't find the clue there as well, so asking for help in make me understand the following code in easier and descriptive manner.

Can someone please make me understand the usage of functions 'beforeShowDay' and 'onSelect' in following implementation in simple and lucid language?

HTML Code :

<div class="col-md-2 voffset2 rightpad">
  <div class="col-sm-3">
    <div id="datepicker"></div>
  </div>
</div>

Javascript Code :

    <script type="application/javascript">
    $(document).ready(function() {

      /******* Display Calender and events highlighted *******/

      /*Not understood what does below array variable has role to play */
      var myDates = $.parseJSON('["1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31"]');
      $( "#datepicker" ).datepicker({
        beforeShowDay: function(date) {
          var dateObj = new Date(date);
          var month = dateObj.getMonth() + 1;
          if(month < 10) {
            month = "0"+month;
          }

          var day = dateObj.getDate();          
          if(day < 10) {
            day = "0"+day;
          }

          var year = dateObj.getFullYear();

          thisdate = year + "-" + month + "-" + day;

          if($.inArray(thisdate, myDates) != -1) {
            return [true, 'eventDateCls', ''];
          } else {
            return [true, '', ''];
          }
        },
        onSelect: function(dateText, inst) {
          var dateAsString = dateText; 

          console.log(dateAsString);

          url = "http://localhost/CKWEB_28-12-2015/ajax_event.php";

          $.ajax({
            url: url,
            type: "POST",
            data:  {event_date:dateAsString},
            beforeSend: function() {
              $('#loader-icon').show();
            },
            complete: function() {
              $('#loader-icon').hide();
            },
            success: function(data) {
              $("#eventListing").html(data);

              $('#loader-icon').hide();
            },
            error: function(){}           
          });
        }
      });
        /******* Display Calender and events highlighted *******/
    });        
    </script>

Synonymize

Answer 1

beforeShowDay

The function called beforeShowDay is used for adding a specific CSS class to each datepicker cell when a certain condition is met. In your case, this condition is "if the exact date of the cell is equal to one of the event dates previously defined in myDates".

Let me parse the code for you:

PART 1

var myDates = $.parseJSON('["1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31"]');

This is the part where the myDates variable is defined and a value is assigned to it. The value is obviously a mockup value, since 1969-12-31 cannot be met by any jQuery.ui datepicker dates which starts from 01/01/1970. You can change this value to real event dates by four methods:

1. Set it dynamically by doing an AJAX call and assign $.parseJSON(returnedJSON) to myDates before the $(selector).datepicker(options) function is called.
2. Set it dynamically by embed a JSON string in a data-anyname attribute of #datepicker itself using any server-side script (<?php echo json_encode($eventDatesArray); ?> if PHP) and then reading it using JavaScript from that element by assigning $.parseJSON($(this).data('anyname')) to myDates before the $(selector).datepicker(options) function is called.
3. Add it dynamically in your <script> using server-side script if the <script> has inline code and not a link to an external file.
4. Replace the current dates in the already existing script.

PART 2

var dateObj = new Date(date);
var month = dateObj.getMonth() + 1;
if(month < 10) {
   month = "0"+month;
}

var day = dateObj.getDate();          
if(day < 10) {
   day = "0"+day;
}

var year = dateObj.getFullYear();

thisdate = year + "-" + month + "-" + day;

This is the part where the developer gets the full date of the datepicker cell and assigns it to thisdate as a string with the desired format. Using only thisdate = $.datepicker.formatDate("yy-mm-dd", new Date(date)); would have been a much easier way to do it though.

PART 3

if($.inArray(thisdate, myDates) != -1) {
   return [true, 'eventDateCls', ''];
} else {
   return [true, '', ''];
}

This is the part where thisdate is searched within the previously defined dates. Here, eventDateCls is the class name to highlight event date cells. If the date of the cell is one of the event dates, the cell will have a class called eventDateCls and will be highlighted. Again, a better way would probably be using only return [true, (myDates.indexOf(thisdate)<0) ? '' : 'eventDateCls',''];

onSelect

As for onSelect, it is just an event triggered callback function which receives the selected date as text and posts it to some http://localhost/CKWEB_28-12-2015/ajax_event.php, whatever it is. We cannot know for sure what it does exactly, but that is a PHP file probably used for validating and saving (inserting into db) the selected date information. The only thing we know is that, it should return (echo) some string which can be directly inserted in the DOM by $("#eventListing").html(data) call.

Maes

Answer 2

To start, these are two awfully designed and implemented functions. A code review session would have rejected them.

beforeShowDay can be used to control 3 properties of a day in the calendar:

1. Whether or not the date is selectable.
2. Apply custom CSS class.
3. Attach custom tooltip.

Unfortunately the implementation does nothing more then compare the dates to a static array containing the same entity of an old date and effectively just return a value that indicates the dates can be selected and no special CSS or tooltip is used.

onSelect reacts to the user selecting a specific date by sending an ajax request to the server. It also controls some "loading" UI element and eventually uses the result of the request to replace the content of another element.

Portly