Schedule custom editor with the exact Resources dropdown input field of the default Editor.

[Carlos Viol Barbosa]

Hi,

I would like to have the default resources dropdown input (with color bullets)  in my custom editor.

Where can I find the default editor template (.html)?

BR

CB

[Vinitha Devi Murugan]

Hi Carlos,

Refer to the below shared UG to know about how to add the resource options within the editor template.

UG: https://ej2.syncfusion.com/angular/documentation/schedule/editor-template#how-to-add-resource-options-within-editor-template

Regards,

Vinitha

[Carlos Viol Barbosa]

Dear Vinitha,

Thank you for your reply. I have already found this section in the documentation, but it basically shows how to use the multi-selection input, and its layout is not the same than the  dropdown input of the default editor window for resources.

The default resource input brings automatically the color indicator for each resource. See the picture below:

I would like to render this input in my few custom Editors, such I have it homogeneous though the application.

Thank you

 

[Ravikumar Venkatesan]

Hi Carlos,

Sample: https://stackblitz.com/edit/ej2-angular-schedule-editor-template-multiselect-templat?file=src%2Fapp.component.html

Demo: https://ej2.syncfusion.com/angular/demos/#/material/multi-select/template

You can achieve your requirement with help of the ejs-multiselect itemTemplate property as shown in the below code snippet.

[app.component.html]

  <ejs-schedule #scheduleObj width='100%' height='550px' [group]="group">

    <ng-template #editorTemplate let-data>

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

        <tbody>

          <tr>

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

            <td colspan="4">

              <ejs-multiselect id='ConferenceId' class="e-field" data-name="ConferenceId" placeholder='Choose Status'

                [dataSource]='resourceDataSource' [fields]='fields' [value]="data.ConferenceId">

                <ng-template #itemTemplate let-data>

                  <div class="e-resource-template">

                    <div class="e-resource-color" [ngStyle]="{'background': data.Color}"></div>

                    <div class="e-resource-text">{{data.Text}}</div>

                  </div>

                </ng-template>

              </ejs-multiselect>

            </td>

          </tr>

        </tbody>

      </table>

    </ng-template>

  </ejs-schedule>

[app.component.ts]

export class AppComponent {

  public resourceDataSource: Object[] = [

    { Text: "Margaret", Id: 1, Color: "#1aaa55" },

    { Text: "Robert", Id: 2, Color: "#357cd2" }

  ];

  public fields: Object = { text: "Text", value: "Id" };

}

Regards,

Ravikumar Venkatesan