DayPilot Knowledge Base

AJAX Calendar/Scheduling Controls
DayPilot Pro (AJAX Calendar Control)
» DayPilot AJAX Calendar
DayPilot Pro (AJAX Monthly Calendar Control)
» DayPilot AJAX Monthly Calendar
DayPilot Pro (AJAX Scheduler Control)
» DayPilot AJAX Scheduler
DayPilot » Knowledge Base » How to open a new event dialog using TimeRangeSelected event (modal.js)

How to open a new event dialog using TimeRangeSelected event (modal.js)

Last revision: Apr 13, 2015

The source code is taken from Demo/Scheduler/Default.aspx (trial package).

1. Include modal.js script

Download the modal.js script from DayPilot.Modal Dialog page. DayPilot.Modal is now open-source (Apache Software License 2.0).

<script type="text/javascript" src="../js/modal.js"></script> 

2. Use custom (JavaScript) TimeRangeSelected handling

.aspx

TimeRangeSelectedHandling="JavaScript"
TimeRangeSelectedJavaScript="createEvent(start, end, resource);"

createEvent() is a custom JavaScript function that will open the modal dialog.

3. Customize the dialog box (editEvent)

You can customize the dialog box by changing the createEvent() function. Here is an example implementation:

function createEvent(start, end, resource) {
  var modal = new DayPilot.Modal();
  modal.top = 60;
  modal.width = 300;
  modal.opacity = 70;
  modal.border = "10px solid #d0d0d0";
  modal.closed = function() { 
    if(this.result == "OK") { 
      dp.commandCallBack('refresh'); 
    }
    dp.clearSelection();
  };
  modal.height = 250;
  modal.showUrl("New.aspx?start=" + start.toStringSortable() + "&end=" + end.toStringSortable() + "&r=" + resource);
}

Where "dp" is the ClientObjectName value of the respective DayPilot control (DayPilot Calendar, DayPilot Month, DayPilot Scheduler).

4. Implement the dialog page (New.aspx)

The New.aspx page referenced by the createEvent() function can be a standard ASPX page. It will load the event details and show a form.

You will need to add the following line to the Cancel button Click handler:

    protected void ButtonCancel_Click(object sender, EventArgs e)
    {
        Modal.Close(this);
    }

And the following code to the Save button click handler:

    protected void ButtonOK_Click(object sender, EventArgs e)
    {
        // do your DB changes
        Modal.Close(this, "OK");
    }

The Modal.Close() call will close the modal window on the client side.

You can send custom data to the client using the optional second parameter ("OK" string in this case). This is helpful when you want to pass some result to the DayPilot.Modal.closed callback (see 3.Customize the dialog box (createEdit) above).

The source of the Modal class can be found in Demo/App_Code directory of the trial package.

5. Handle the 'refresh' Command

The DayPilot.Modal.closed callback used the following call to refresh the DayPilot control after an event change has been done (see 3.Customize the dialog box (eventEdit) above):

dp.commandCallBack('refresh'); 

It fires the Command event of the DayPilot control on the server side. You need to handle the Command event and update the event set.

An example for DayPilot Scheduler:

    protected void DayPilotScheduler1_ResourceHeaderMenuClick(object sender, DayPilot.Web.Ui.Events.Scheduler.ResourceHeaderMenuClickEventArgs e)
    {
        switch (e.Command)
        {
            case "refresh":
                  // calling a custom getData() method that loads the events from a DB
                  DayPilotScheduler1.DataSource = getData(DayPilotScheduler1.StartDate, DayPilotScheduler1.EndDate);
                  DayPilotScheduler1.DataBind();
                  DayPilotScheduler1.Update();
                break;
        }
    }

Related

How to show event details in a modal dialog (modal.js)
How to show a modal dialog in ASP.NET MVC 3 Razor
How to make sure that the modal dialog is on top of all other page elements
How to make the modal dialog draggable