What does it take to make a custom control to use in a Schedule edit template?

[Jesper Petersen]

Hi. I need to include a custom control in my Schedule editor.

What do I need to do, to make it usable for binding in a template?

Cheers /Jesper

[Nevitha Ravi]

Hi Jesper, 

Greetings from Syncfusion Support. 

We suspect that your requirement is to have custom fields in editor window of schedule which can be achieved using editorTemplate. Please refer the following UG and online demo. 

Demo: https://ej2.syncfusion.com/angular/demos/#/material/schedule/editor-template  

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

Please get back to us for further assistance. 

 

Regards, 

Nevitha 

[Jesper Petersen]

Hi Nevitha.

Thanks for your answer.

You're partly right.

But I need to embed a control to edit a complex relationship between 3 custom properties in the event. 

1 single select and 2 multiselections where in some circumstances, entries can be hidden or disabled.

I already have this component made, but can't get it to work in the event template.

 /Jesper

[Nevitha Ravi]

Hi Jesper, 

Thanks for your update. 

Can you please share the following details to provide the prompt solution? 

• Whether you have used single component in editor template to handle three fields of apppointments.
• Component details you have used like whether you have tried with Syncfusion controls.
• Code snippet or issue replicating sample
• Image or video depecting your problem

Regards, 

Nevitha 

[Jesper Petersen]

Hi. See the attached for a little demo of the functionality.

This is the markup to use the component out-of-the-box. The implementation can be changed to be compatible with Schedule if I just know the requirements.

I have not tried to use it in the Schedule component. 

        <app-choose-sharing titles="'Choose team sharing and select players'" [selectedTeam]='{connection: {id: 581}}'

          [selectedPlayers]='[{id: 805}]' (teamConnectionChanged)="teamConnectionChanged($event,null)"

          (playersChanged)="playersChanged($event)" (responsibleTeamChanged)="responsibleTeamChanged($event,null)">

        </app-choose-sharing>

Cheers /Jesper

Attachment: Choosesharingcomponentvideo_48e373c7.zip

[Alagumeena Kalaiselvan]

Hi Jesper, 

Thanks for your update. 

We have prepared a sample with custom component in editor template for your reference which can be downloaded from the following link. 

https://stackblitz.com/edit/web-accessibility-in-editor-template-cem1hm?file=app.component.ts 

Kindly check with above sample and get back to us with below details to validate your issue further 

• Share the issue depicting sample code if possible
• Reproduce your issue with shared sample

Regards 

Alagumeena.K 

[Jesper Petersen]

Hi. thx.

This looks promising :)

I will work a little with it and let you know!

[Nevitha Ravi]

Hi Jesper, 

Thanks for your update, we will wait to hear from you. 

Regards, 

Nevitha

[Jesper Petersen]

Hi again. 

I've played around with your sample and I have a problem with the date fields.

They reset on editing other fields and they don't persist on save.

I have attached a video of my experience from your stackblitz sample.

Cheers /Jesper

Attachment: 20201024165934_a09bb29e.zip

[Vinitha Devi Murugan]

Hi Jesper, 

 

Thanks for your update. 

 

We have validated your reported issue “Problem with date field in editor tempalte” at our end. We have resolved your reported issue with the help of the below code and the same can be modified in the following sample. 

 

Sample: https://stackblitz.com/edit/web-accessibility-in-editor-template-uwykjz?file=insert.component.html  

 

Insert.component.html 

 

  <td class="e-textlabel">From</td> 

      <td colspan="4"> 

        <ejs-datetimepicker id="StartTime" class="e-field" data-name="StartTime" format="M/dd/yy h:mm a" 

          (change)="onChangeSrt($event)" [value]="dateParserSrt(data.startTime || data.StartTime)"> 

        </ejs-datetimepicker> 

      </td> 

    </tr> 

    <tr> 

      <td class="e-textlabel">To</td> 

      <td colspan="4"> 

        <ejs-datetimepicker id="EndTime" class="e-field" data-name="EndTime" format="M/dd/yy h:mm a" 

          (change)="onChangeEnd($event)" [value]='dateParserEnd(data.endTime || data.EndTime)'> 

        </ejs-datetimepicker> 

      </td> 

    </tr> 

 

Kindly try the above sample and get back to us if you need any further assistance. 

 

Regards, 

Vinitha 

[Jesper Petersen]

Hi I see acouple of problems in your referenced stackblitz example.

The first is that the start date won't work at all.

The second is more of a practice issue, with binding to a function.

Try to see the attached video where i add logging to the parse function.

Best regards /Jesper

[Jesper Petersen]

Sorry. I forgot the video :)

Attachment: 20201026130351_5891ea2a.zip

[Ravikumar Venkatesan]

Hi Jesper, 

Thanks for the update. 

Q1. The first is that the start date won't work at all 

Q2. The second is more of a practice issue, with binding to a function 

We have validated your above queries at our end. We have resolved your reported problems by removing the methods that bind with the value property of the date-time picker. Instead of that, we have set the value to the editor window date-time pickers in the created event of the date-time picker like the below code. We have prepared a sample for your reference and it can be available below. 

[insert.component.html] 

<table *ngIf="data != undefined" class="custom-event-editor" width="100%" cellpadding="5"> 

  <tbody> 

    <tr> 

      <td class="e-textlabel">From</td> 

      <td colspan="4"> 

        <ejs-datetimepicker id="StartTime" class="e-field" data-name="StartTime" format="M/dd/yy h:mm a"></ejs-datetimepicker> 

      </td> 

    </tr> 

    <tr> 

      <td class="e-textlabel">To</td> 

      <td colspan="4"> 

        <ejs-datetimepicker id="EndTime" class="e-field" data-name="EndTime" format="M/dd/yy h:mm a" (created)="onCreated($event)"> </ejs-datetimepicker> 

      </td> 

    </tr> 

  </tbody> 

</table> 

[insert.component.ts] 

  public onCreated() { 

    if (Object.keys(this.dialogData).length > 0) { 

      (document.querySelector("#StartTime") as any).ej2_instances[0].value = this.dialogData.StartTime; 

      (document.querySelector("#EndTime") as any).ej2_instances[0].value = this.dialogData.EndTime; 

    } 

  } 

Sample: https://stackblitz.com/edit/web-accessibility-in-editor-template-qymtfj?file=insert.component.ts 

Kindly try the above sample and get back to us if you need any further assistance. 

API(created event): https://ej2.syncfusion.com/angular/documentation/api/datetimepicker#cleared 

Regards, 

Ravikumar Venkatesan 

[Jesper Petersen]

Hi. I got it working, finally :) Thanks.

Do you have a working demo of an angular scheduler connecting to dotnet core service with webmethodadaptor or webapiadaptor ?

I have a problem with recurrency exceptions where the original event is rendered alongside the exception event. This is not happening with simple json binding.

Cheers /Jesper

[Ravikumar Venkatesan]

Hi Jesper, 

Thanks for the update. 

We have validated your requirement at our end and we regret tot let you know that the Patch operation doesn’t work on the WebApi. So, we suggest you please use the ODataV4 adaptor and we have created a for your reference in it. In this sample, it works as expected when editing an occurrence event of the Recurrence event and it can be available below. 

Sample: https://stackblitz.com/edit/ej2-angular-schedule-odatav4-service-sample-mdpe4v?file=app.component.ts 

Service: https://www.syncfusion.com/downloads/support/forum/158564/ze/ej2-schedule-odatav4-service-sample-747827883 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 

Ravikumar Venkatesan