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!

1 Answer 1


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' => t('Calendar block'),
    'cache' => 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_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' => t(' '),
        'content' => '<div id="calendar_region">
                      <div id="embedded_calendar"></div>

  return $block;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.