Appointment edit dialog not maintaining duration between start and end time

[Ian Davies]

Hi,

The user guide here : https://ej2.syncfusion.com/aspnetmvc/documentation/schedule/how-to/set-different-event-time-duration

Indicates the appointment editor dialog by default should maintain a duration of 30 minutes between start and end time but I am not finding this to occur e.g. :

How do I maintain end datetime 30 minutes past start datetime selected (in popup function I have tried setting duration as per the user guide indication but it does not make a difference)?

If the user attempts to proceed it alerts them the end time is now less than the start time:

Thanks in advance.

Regards

Ian

[Ruksar Moosa Sait]

Hi Ian,

Greetings from Syncfusion support.

We have checked on your reported issue at our end and let you know that by default the EndDate value is set to 30 minutes intervals based on the StartDate value. According to the current Schedule architecture, it’s not possible to set the StartDate based on the EndDate value in the default editor window. You can achieve your requirement in the Schedule editorTemplate.

Demo: https://ej2.syncfusion.com/aspnetmvc/Schedule/EditorTemplate#/material

UG: https://ej2.syncfusion.com/aspnetmvc/documentation/schedule/editor-template#customizing-event-editor-using-template

Kindly let us know if you need any further assistance.

Regards,

Ruksar Moosa Sait

[Ian Davies]

Thanks,

Okay I have created a custom editor template, but what is needed to initialise the addition of the recurrence editor in the custom editor?

Thus far I have:

Template:

But in the below it just adds a text box with the recurrence rule not the editor:

 

Tried looking at the reccurence editor topic in the UG and it does not really cover this use case.

Thanks in advance.

Regards

Ian

[Ian Davies]

Hi Please note there was a typo in the above now corrected to for the second if:

However still does not work.

Still need an example on how to add a reoccurence editor with an initialisation of a rule to a editor template.

Thanks in advance.

[Ruksar Moosa Sait]

Hi Ian,

We have prepared a sample to add RecurrenceEditor in the editor template as shown in the below code snippet.

var recurElement = args.element.querySelector('#Recurrence');

            if (!recurElement.classList.contains('e-recurrenceeditor')) {

                let recurrObject = new ej.schedule.RecurrenceEditor({

                });

                recurrObject.appendTo(recurElement);

                var scheduleObj = document.getElementById('schedule').ej2_instances[0];

                (scheduleObj.eventWindow).recurrenceEditor = recurrObject;

            }

            document.getElementById('Recurrence').style.display = (scheduleObj.currentAction == "EditOccurrence") ? 'none' : 'block';

Output:

Kindly try the attached sample and let us know if this fulfilled your requirement.

Regards,

Ruksar Moosa Sait

Attachment: MVCEditorTemplate_a8084c9e.zip

[Ian Davies]

Thanks,

That works to show the recurrence editor but it still does not set any initial value based on the current recurrence rule set. How is the value initialised?

For the div associated to the recurrence editor tried adding e-field as the value is not defined in the element from loading currently but that then does not allow the editor to show.  Previously using the same approach as the start time with an input element I could access the rule from the passed model data but with a div as per the same code value is undefined.

The sample provided appointment data also appears to not include a recurrence rule to demonstrate how the data is passed through to the editor:

public class AppointmentData

{

public string Subject { get; set; }

public DateTime StartTime { get; set; }

public DateTime EndTime { get; set; }

}

Regards

Ian

[Ruksar Moosa Sait]

Hi Ian,

You can set the Recurrence rule to the Recurrence editor based on the RecurrenceRule details of the appointment on the Recurrence Editor by using the setRecurrenceRule property like the below code.

[ Index.cshtml]

var recurElement = args.element.querySelector('#Recurrence');

   if (!recurElement.classList.contains('e-recurrenceeditor')) {

        let recurrObject = new ej.schedule.RecurrenceEditor({});

         recurrObject.appendTo(recurElement);

         if (args.data.RecurrenceRule) {

               recurrObject.setRecurrenceRule(args.data.RecurrenceRule);

          }

         var scheduleObj = document.getElementById('schedule').ej2_instances[0];

         (scheduleObj.eventWindow).recurrenceEditor = recurrObject;       

    } 

[HomeContrller.cs]

public List<AppointmentData> GetScheduleData()

        {

            List<AppointmentData> appData = new List<AppointmentData>();

            appData.Add(new AppointmentData

            {

                Subject = "Paris",

                StartTime = new DateTime(2022, 2, 15, 10, 0, 0),

                EndTime = new DateTime(2022, 2, 15, 12, 30, 0),

                RecurrenceRule = "FREQ=DAILY;INTERVAL=1;COUNT=5"

        });

Output:

Kindly try the Modified attached sample and let us know if this meets your requirements.

Regards,

Ruksar Moosa Sait

Attachment: MVCRecurrenceEditorinEditorTemplate_c7aa693e.zip

[Ian Davies]

Thanks for your support,

That has solved the requirement.

Kind Regards

Ian

[Satheesh Kumar Balasubramanian]

Hi Ian,

Thanks for the update.

We are happy that your problem has been resolved now.

Regards,

Satheesh Kumar B