title: jQuery mobile calendar with 3-state day colours
body: <p>I am looking at creating an event and reservation system.</p>
  
  <p>I found the Stack&nbsp;Overflow question <a href="https://stackoverflow.com/questions/5549729">jQuery - Mobile date picker control</a> which shows <a href="https://github.com/jtsage/jquery-mobile-datebox" rel="nofollow noreferrer">jquery-mobile-datebox</a> and <a href="https://github.com/filamentgroup/jQuery-Mobile-Themed-DatePicker" rel="nofollow noreferrer">jQuery-Mobile-Themed-DatePicker</a>.</p>
  
  <p>I want to display a calendar where certain dates I get from the server are  </p>
  
  <ol>
  <li>available</li>
  <li>not available</li>
  <li>reserved</li>
  </ol>
  
  <p>When a reserved or available date is touched, I want to show times - there can be more than one time per day. The user can then click on a time to reserve it which would hit off an Ajax request.</p>
  
  <p>jQuery UI datepicker, for example, has </p>
  
  <pre><code> onSelect: function(date, inst) {
  </code></pre>
  
  <p>From what I can see in the above pickers, what I need is not readily available. Before I start hacking them myself:   </p>
  
  <ol>
  <li>Which one would lend itself best to what I want?</li>
  <li>Are there perhaps better ones out there that already serve my needs?</li>
  </ol>
  
  <hr>
  
  <p>UPDATE:</p>
  
  <p>Firebug gave me </p>
  
  <p><code>&lt;div class="ui-datebox-griddate ui-corner-all ui-btn-up-e" data-date="25" data-theme="e"&gt;25&lt;/div&gt;</code> </p>
  
  <p>where ui-btn-up-e can be changed from a - e. </p>
  
  <p>Now I need to find out if data-theme also needs to be changed</p>
  
  <pre><code> $('.ui-datebox-griddate').click(function () {
     alert($(this).attr("class"));
   }
  </code></pre>
  
  <p>What is the nicest way to toggle through three of the classes and save the state each time?</p>
  
  <pre><code> $('.ui-datebox-griddate').toggle(
     function () {
       $(this).????? // change ui-btn-up-? to ui-btn-up-a
       $.get(...)
    },
     function () {
       $(this).????? // change ui-btn-up-a to ui-btn-up-b
       $.get(...)
    },
     function () {
       $(this).????? // change ui-btn-up-b to ui-btn-up-c
       $.get(...)
    }
  );
  </code></pre>
  
  <p>UPDATE: NOTE: When I click, the calendar change the date, reloading the calendar completely. Perhaps I need to stop that :(</p>