Schedule filter with dropdownlist

[Alexandre]

Hi,

How to implement a filter looking for the EventType?

I created a dropDown with a list of colors using onActionComplete().

I would like to filter by this list.

[Ravikumar Venkatesan]

Hi Alexandre,

Sample: https://stackblitz.com/edit/ej2-angular-schedule-filter-apps-based-on-color?file=src%2Fapp.component.ts

You can filter the Schedule appointments based on color using the DropDownList on Schedule actionComplete event as shown in the below code snippet.

[app.component.ts]

  public onActionBegin(args: ActionEventArgs) {

    if (args.requestType === "toolbarItemRendering") {

      let colorDdl: ItemModel = { align: 'Right', template: ' <input type="text" id="category-color"/>', type: 'Input' };

      args.items.push(colorDdl);

    }

  }

 

  public onActionComplete(args: ActionEventArgs) {

    if (args.requestType === "toolBarItemRendered") {

      let colorObj: DropDownList = new DropDownList({

        dataSource: [

          { text: "Green", value: "#1aaa55" }, { text: "Light blue", value: "#357cd2" }, { text: "Light green", value: "#7fa900" },

          { text: "Dark salmon", value: "#ea7a57" }, { text: "Light sea green", value: "#00bdae" }, { text: "Orange", value: "#f57f17" }

        ],

        fields: { text: "text", value: 'value' },

        placeholder: 'Select a color',

        change: (args: ChangeEventArgs) => {

          const resultData: Record<string, any>[] = this.data.filter((appointment) => { return appointment.CategoryColor === args.value });

          this.scheduleObj.eventSettings.dataSource = resultData.length > 0 ? resultData : [];

        }

      });

      colorObj.appendTo('#category-color');

    }

  }

Regards,

Ravikumar Venkatesan