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_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' => t(' '),
'content' => '<div id="calendar_region">
<div id="embedded_calendar"></div>
</div>',
);
break;
}
return $block;
}