Bishan Bishan - 2 months ago 27
Javascript Question

Form Dialog like in Google Calendar

I'm using FullCalendar in my
application and i need to add form dialog like in Google Calendar. if i click on some date, dialog is popup near the that date. not in middle of the page. and also page background is not get dark. (background is active)

I can create a form dialog using jquery. but i don't know how to popup dialog near the clicked date and keep page background active.

Google Calendar

How can i create a form dialog like this ?


You can hook into the dayClick callback, and use the jsEvent to position the jQuery UI dialog above the position where the mouse was clicked.


    dayClick: function(date, allDay, jsEvent, view) {

      $("#dialog").dialog("option", "position", {
                                  my: "bottom-10",
                                  of: jsEvent



(Documentation for dayClick:

For making sure that the background doesn't turn grey, you can set the modal option of the jQuery UI dialog to false:

$("#dialog").dialog({ modal: false });