DayPilot » Knowledge Base » How to open a new event dialog using TimeRangeSelected event (modal.js)

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;
        }
    }