Event click dialog

HTML

<link rel="stylesheet" href="http://qtip2.com/static/stylesheets/libs/jquery.fullcalendar.css">
<script src="http://qtip2.com/static/javascripts/libs/jquery.fullcalendar.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<div id="fullcalendar"></div>
<div id="dialog" title="My dialog" style="display:none">
    <form>
        <fieldset>
            <label for="Id">Id</label>
            <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all">
            <label for="Id">Title</label>
            <input type="text" name="title" id="title" class="text ui-widget-content ui-corner-all">
        </fieldset>
    </form>
</div>

JavaScript

// Setup FullCalendar
(function () {
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();



    $('#fullcalendar').fullCalendar({
        editable: true,
        height: 300,
        header: {
            left: 'title',
            center: '',
            right: 'today prev,next'
        },

        eventClick: function (calEvent, jsEvent, view) {

            $("#dialog").dialog({
                autoOpen: false,

            }

            );

            $("#name").val(calEvent.id);

            $("#title").val(calEvent.title);

            $('#dialog').dialog('open');
        },
        events: [{
            id: 'My Id',
            title: 'Meeting',
            start: new Date(y, m, d, 10, 30),
            allDay: false
        }, {
            id: 'My Id',
            title: 'Birthday Party',
            start: new Date(y, m, d + 1, 19, 0),
            end: new Date(y, m, d + 1, 22, 30),
            allDay: false
        }]
    });
}());