Bishan Bishan - 11 days ago 6
Javascript Question

Form Dialog like in Google Calendar

I'm using FullCalendar in my

asp.net
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 ?

Answer

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.

E.g.

  $('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {

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

      $("#dialog").dialog("open");

    }
  });

(Documentation for dayClick: http://arshaw.com/fullcalendar/docs/mouse/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 });