jQuery ui embedded calendar on a drupal 7 form I have a drupal 7 custom form written in PHP where the user can add periods of time to define his/her availability. Created periods of time are showed in a tableselect list with a button to delete them one by one. Now I want to delete this table and show the periods on a jQuery ui embedded calendar instead. How can I do that?

Given the fact drupal 7 form api has no calendar type I guess one solution would be to write a custom block in PHP where I could print the calendar. Then I could show/hide this new block when needed with Context module new rule. Do you think this solutions is good or there is a better approach?

Any suggestions would be appreaciated! Thanks!
I have already implemented my approach on a custom module and it's working fine! Here's my code:

function calendar_block_info() {
    $blocks['embedded_calendar'] = array(
    'info' =&gt; t('Calendar block'),
    'cache' =&gt; DRUPAL_NO_CACHE,
  );

  return $blocks;
}

function calendar_block_view($delta = '') {
  $block = array();

  switch ($delta) {
    case 'embedded_calendar':

      //JS code based on: http://stackoverflow.com/questions/5578259/jquery-ui-datepicker-how-to-add-clickable-events-on-particular-dates

      drupal_add_css(drupal_get_path('module', 'calendar') .'/calendar.css');
      drupal_add_library('system','ui.datepicker');
      drupal_add_js('jQuery(document).ready(function() {

                      var events = [ 
                        { Title: "Five K for charity", Date: new Date("02/01/2013"), class: "red" }, 
                        { Title: "Dinner", Date: new Date("02/02/2013"), class: "green" }, 
                        { Title: "Meeting with manager", Date: new Date("03/01/2013"), class: "blue" }
                      ];

                      jQuery( "#embedded_calendar" ).datepicker({
                                                   numberOfMonths: 2,
                                                   regional: "es",
                                                   beforeShowDay: function(date) {
                                                      var result = [true, "", null];
                                                      var matching = jQuery.grep(events, function(event) {
                                                          return event.Date.valueOf() === date.valueOf();
                                                      });

                                                      if (matching.length) {
                                                          result = [true, matching[0].class, null];
                                                      }
                                                      return result;
                                                   },
                                                   });
                    });', 'inline'); 

      $block = array(
        'subject' =&gt; t('&amp;nbsp;'),
        'content' =&gt; '&lt;div id="calendar_region"&gt;
                      &lt;div id="embedded_calendar"&gt;&lt;/div&gt;
                      &lt;/div&gt;',
      );

      break;
  }
  return $block;
}