title: jQuery datepicker- highlight date selected from datepicker in a calendar
body: <p>How do I highlight the date selected by two different associates on associate.html in training.html,that is, two associates select their training dates and these two dates must be highlighted on the training calendar.  </p>
  
  <p>associate.html</p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt;
              .ui-datepicker {font-size:12pt ! important}
          &lt;/style&gt;
  
          &lt;link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-    ui.css" rel="stylesheet"&gt;
          &lt;script src="http://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
          &lt;script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;script&gt;
  
      $(document).ready(function(){
          $("#datepicker").datepicker();
          $('form#dateform').submit(function(){
              var aselectedDate=$('#datepicker').val();
              if(aselectedDate!=''){
              alert('You selected: ' +aselectedDate);
          } 
          return false;
          });
      });
      &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;&lt;br&gt;&lt;br&gt;
          &lt;form id="dateform" name="dateform" action="#" method="POST"&gt;
              &lt;table&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Select a date&lt;/td&gt;
                      &lt;td&gt;&lt;input id="datepicker" name="date"/&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
              &lt;input type="submit" name="submit" value="Submit"/&gt;
          &lt;/form&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>training.html</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;style type="text/css"&gt;
          .highlight {
              background: red !important;
          }
  
          .ui-datepicker {
              font-size: 16pt !important;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;link href="http://code.jquery.com/ui/1.11.4/themes/blitzer/jquery-ui.css" rel="stylesheet"&gt;
      &lt;script src="http://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"&gt;&lt;/script&gt;
  
      &lt;br&gt;&lt;br&gt;
      &lt;br&gt;
      &lt;center&gt;&lt;div id="datepicker"&gt;&lt;/div&gt;&lt;/center&gt;&lt;br&gt;
      &lt;script type="text/javascript"&gt;
          var Event = function (text, className) {
              this.text = text;
              this.className = className;
          };
          var events = {};
          events[new Date("06/07/2015")] = new Event("You have selected Training 1", "highlight");
          events[new Date("06/16/2015")] = new Event("You have selected Training 2", "highlight");
          events[new Date("07/07/2015")] = new Event("You have selected Training 3", "highlight");
          events[new Date("06/18/2015")] = new Event("You have selected Training 4", "highlight");
  
          $('#datepicker').datepicker({
              beforeShowDay: function (date) {
                  var event = events[date];
                  if (event) {
                      return [true, event.className, event.text];
                  } else {
                      return [true, '', ''];
                  }
              },
              onSelect: function (date) {
                  var event = events[new Date(date)];
                  if (event) {
                      alert(event.text);
                  }
                  else {
                      alert('No training event');
                  }
              }
          });
      &lt;/script&gt;
      &lt;script&gt;
          $(document).ready(function () {
              $('form#dateform').click(function () {
                  var aselectedDate = $('#datepicker').val();
                  if (aselectedDate != '') {
                      alert('You selected: ' + aselectedDate);
                  }
                  return false;
              });
          });
      &lt;/script&gt;
      &lt;form id="dateform" name="dateform" action="#" method="POST"&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;input id="datepicker" name="date" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
  
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>