DP Month Recurring Events Using Modal Window

The following menu item will open Edit.aspx page in a modal dialog :

<DayPilot:MenuItem Text="Open" Action="JavaScript" JavaScript="dialog().showUrl('Edit.aspx?id=' + e.value());" />

This is the modal helper function (you can use it to configure the modal window properties):

    function dialog() {
      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") { 
                dps1.commandCallBack('refresh'); 
            }
            dps1.clearSelection();
      };
      modal.height = 250;
      modal.zIndex = 100;
      return modal;
    }
}

Just a few notes:

1. This method uses DayPilot.Modal instead of the ModalPopupHelper from the ASP.NET AJAX Extensions. The main advantage is that the modal content is in a separate page (both the .aspx declaration and the code behind handlers).

2. It might be possible to integrate the DetailsView with the recurrence helpers but you would probably have to use a separate submit button (not the "Submit" command from the DetailsView). The recurrence helper (see "Recurrence section" in Demo/Scheduler/RecurrentEventEdit.aspx) intercepts the form submission and encodes the data from the recurrence fields into a hidden field.

Please let me know if you have questions.

If you want to stay with the ModalPopupExtender it's possible to display it using $find() and show():

http://weblogs.asp.net/ashicmahtab/archive/2009/05/06/how-to-show-hide-a-modalpopupextender-using-javascript.aspx

But still, it may take more work to integrate the recurrence helper.

I think I have the DayPilot.Modal working with the DetailsView (by calling DetailsView.UpdateItem (or .InsertItem, depending on the currentMode) in a separate Submit button, as you suggested above. I'll work on checking and submitting the recurring event value next.

In the meantime, how do you wire up a calendar refresh after submitting/dismissing DayPilot.Modal? Do you have an API or tutorial where I can find this info?

I am using the code as you specified above. My DPM control client name is dpm1, so I'm not sure why the calendar is not refreshing on modal close.

function dialog() {
var modal = new DayPilot.Modal();
modal.top = 60;
modal.width = 700;
modal.opacity = 70;
modal.border = "10px solid #d0d0d0";
modal.closed = function() {
if(this.result == "OK") {
dpm1.commandCallBack('refresh');
}
//dpm1.clearSelection();
};
modal.height = 600;
modal.zIndex = 100;
return modal;
}

Found it. The modal.js tutorial is located at http://kb.daypilot.org/11616/how-to-show-event-details-in-a-modal-dialog-modal-js/ .

I needed to handle the refresh command event of the Daypilot control - step 5 in the tutorial.

Recurrence next...