显示谷歌日历等弹出窗口

Question

我正在制作日历。我使用了fullcalendar.js来实现这一点。现在我想显示一个像谷歌日历一样的弹出窗口。我使用了下面给出的代码。这里弹出对话框只会出现在中心。我想在点击事件的位置显示它。请给我一个解决方案。

    var calendar = $('#datepicker');
calendar.fullCalendar
({
    defaultView: 'agendaWeek',
    defaultEventMinutes: 60,
    aspectRatio: 1.5,
    dayClick: function(date, allDay, jsEvent, view) 
    {
    if(eventEdit)
    {
       $('.ui-dialog').hide();
       eventEdit = false;
    }
    if(jsEvent.title == undefined)
    {
        var createEvent = prompt('Event Title:','',{
        buttons: {
            Ok: true,
            Cancel: false
        }
       });
    }
    else
    {
        var createEvent = prompt('Event Title:', jsEvent.title, {
            buttons: 
            {
                Ok: true,
                Cancel: false
            }
           });
    }
    if (createEvent)
    {
      jsEvent.title = createEvent;
      calendar.fullCalendar('renderEvent', { title: jsEvent.title, start: date, allDay: false, editable: true}, true );   
    }      
    eventEdit = true;
    },
    eventClick: function(calEvent, jsEvent, view) 
    {
    if(eventEdit)
    {
       $('.ui-dialog').hide();
       eventEdit = false;
    }
    var timing = $('.fc-event-time').html();
    var dialog = $('<p class="event" align="justify">Event:'+calEvent.title+'<br/>Timing:'+timing+'</p>').dialog
    ({
        buttons: 
        {
           "Edit Event": function()
             {               
                   dialog.dialog('close');
                   var editEvent = prompt('Event Title:', calEvent.title, {
                    buttons: 
                    {
                        Ok: true,
                        Cancel: false
                    }
                   });
                  if (editEvent)
                  {
                      calEvent.title = editEvent;
                      calendar.fullCalendar('updateEvent',calEvent);
                  }
              },
          "Delete Event":  function() 
                    {
         calendar.fullCalendar('removeEvents', calEvent._id);
         dialog.dialog('close');
                    }
        }
    }); 
    eventEdit = true;
    },
    header: 
    {
        left: "prev,next today",
        center: "title",
        right: "month,agendaWeek,agendaDay"
    }
});