Refresh parent page after calendar event creation

Question

I have created a new page with a default calendar webpart.

Below is what I'm doing.

1. Click New Event and the popup gets opened
2. Fill-in the event details
3. Click Save and the event gets saved
4. Calendar gets reloaded asynchronously and my new get details are shown

Though the calendar gets reloaded automatically when an event is created, I would like to reload the entire screen once the event is created, as it requires due to my other customization.

I tried creating some script with some timeout to reload the screen, in the save button as below, but it doesn't get fired.

$("input[id$=SaveItem]").click(function(){
     setTimeout(function(){ parent.window.location.reload(); }, 3000);
});

I tried another approach which executes the same kind of script when the modal dialog of "newForm.aspx" form is closed. I tried the below, but it doesn't work either.

$('.ms-dlgContent').on('hidden', function(){
    alert('test');
});

document.getElementsByClassName('ms-dlgContent')[0].addEventListener('hide', function (event) {
     alert('Test 1');
 });

document.getElementsByClassName('ms-dlgContent')[0].addEventListener('hidden', function (event) {
     alert('Test 2');
    });

Is there any way I can reload my screen once the modal dialog is closed or an event is created?

I also tried to use the SP.UI.ModalDialog class, but I couldn't find much.

Answer 1

You can add a callback on the SP.UI.ModalDialog.showModalDialog method. You will want to use dialogReturnValueCallback.

There is an example in an answer on another question that should get you going in the right direction. SharePoint Modal Help - pass value back to parent when closing

Using this you can reload the page if a new item is saved or updated and have it do nothing if the dialog is canceled.