How do you open a FullCalendar event URL in a jquery-ui dialog?

Question

I am wrestling with figuring out how to open a FullCalendar event URL in a modal dialog using jQuery UI Dialog. I know next to nothing about javascript, so I'm not sure how the call syntax is supposed to look.

I figure I'm supposed to use the eventClick option, but I cannot figure out how to use it to instantiate the dialog. Any help?

My calendar generating script looks like this:

<script type="text/javascript">

$(document).ready(function() { var $dialog = $('')

$('#calendar').fullCalendar({
  header: {
    left: 'month,agendaWeek,agendaDay',
    center: 'title',
    right: 'today prev,next'
  },
  allDayDefault: false,
  editable: false,
  eventSources: ['[[~96]]'],
  eventClick: function(event) {
    if (event.url) {
      $dialog
        .load(event.url)
        .dialog({
          autoOpen: false,
          width: 500,
          height:300
        });
      $dialog.dialog('open');
      return false;
    };
  };
});

});

Answer 1

You have to declare some div for dialog in your page, for example:

<div id="myDialog"></div>

...

$(document).ready(function() {
$('#calendar').fullCalendar({
...
eventClick: function(event) {
    if (event.url) {
      $('#myDialog')
        .load(event.url)
        .dialog({
          width: 500,
          height:300
        });
      return false;
    };