export class CustomMultiSelectFilterComponent implements AfterViewInit {

  @Output() public handleFilterChange = new EventEmitter<CompositeFilterDescriptor>()

  @Input() public data: string[] = []
  @Input() public textField: string = ""
  @Input() public valueField: string = ""
  @Input() public filter: CompositeFilterDescriptor = { logic: "or", filters: [] }
  @Input() public preFilterValue: string | null = null
  @Input() public filterService: FilterService
  @Input() public currentFilter: CompositeFilterDescriptor = { logic: "or", filters: [] }

  public constructor(
    filterService: FilterService
  ) {
    this.filterService = filterService
  }

  public filterChange(filter: CompositeFilterDescriptor): void {
    this.filter = filter
    this.data = filterBy(this.data , filter)
    this.handleFilterChange.emit(filter)
  }

  public onChange(values: string[], filterService: FilterService): void {
    filterService.filter({
      filters: values.map((value) => ({
        field: this.valueField,
        operator: "contains",
        value,
      })),
      logic: "or",
    })
  }

  public ngAfterViewInit(): void {
    if (this.filterService) {
      this.filterService.changes.subscribe((filter: CompositeFilterDescriptor) => {
        this.currentFilter = filter
        console.log("Current Filters:", this.currentFilter)
      })
    }
  }

}

<kendo-multiselect
  [data]="data"  
  [valuePrimitive]="true"
  [textField]="textField"
  [valueField]="valueField"
  [value]="filter | filterValues"
  (valueChange)="onChange($event, filterService)"
  >
</kendo-multiselect>

<kendo-grid
  kendoGridSelectBy="id"
  [kendoGridBinding]="users"
  filterable="menu"
  [sortable]="true"
  [resizable]="true"
  (selectionChange)="selectionChange($event)"
  [selectable]="selectableSettings"
  [selectedKeys]="[selectedKeyArray]"
  (filterChange)="handleFilterChange($event)"
  [filter]="filter"
>
  <kendo-grid-column-group title="{{ 'literal:Users | Total:' | translate }} {{ users.length }}" [columnMenu]="true">
    <kendo-grid-column field="roles" title="{{ 'literal:Roles' | translate }}" [width]="220" [headerStyle]="{ 'font-weight': 'bold' }">
      <ng-template kendoGridFilterMenuTemplate let-filter="filter" let-filterService="filterService">
        <app-custom-multiselect-filter
          [data]="rolesToFilter"
          textField="rolesToFilter"
          valueField="filterRoles"
          [preFilterValue]="preFilter"
          [filterService]="filterService"
          [currentFilter]="filter"
          >
        </app-custom

import { Component, ViewChild, ElementRef, ViewChildren, QueryList } from '@angular/core';
import { ApptDetail } from '../../interfaces/apptdetail.interface';
import { SchedulerEvent, } from '@progress/kendo-angular-scheduler';
import valueHelpers from '../../shared/value-helpers';
import { ApptService } from '../../interfaces/services/appt.service';
import { GenericPagedResponse } from '../../interfaces/pagedresponse.interface';
import { Client } from '../../interfaces/client.interface';
import { ClientService } from '../../interfaces/services/client.service';
import { ContextMenuComponent, ContextMenuSelectEvent, ContextMenuPopupEvent } from '@progress/kendo-angular-menu';

@Component({
  selector: 'app-appointments',
  templateUrl: './appointments.component.html',
  styleUrls: ['./appointments.component.css']
})
export class AppointmentsComponent {
  public appointments: ApptDetail[] = [];
  selectedDate: Date = new Date();
  public contextMenuEvent!: SchedulerEvent;
  @ViewChild(ContextMenuComponent, { static: true }) apptContextMenu!: ContextMenuComponent;
  @ViewChild('apptScheduler', { read: ElementRef }) apptScheduler!: ElementRef;
  @ViewChildren('apptEvent', { read: ElementRef }) apptEventElements!: QueryList<ElementRef>;

  apptContextMenuItems: any[] = [
    {
      text: "Cashout Appointment",
      value: "cashout"
    },
    {
      text: "Edit",
      value: "edit",
    },
    {
      text: "Delete",
      value: "delete"
    },
    {
      text: "Send SMS Reminder",
      value: "sendSMS"
    },
    {
      text: "Send Email Reminder",
      value: "sendEmailReminder"
    },
  ];


  ngOnInit() {
    this.loadApptData();
  }

  constructor(private apptService: ApptService) { }

  loadApptData() {
    console.log("Load appt data");

    const fromDate = valueHelpers.getStartOfWeek(this.selectedDate);
    const toDate = valueHelpers.getEndOfWeek(this.selectedDate);


    this.apptService.getApptsForCalendar(fromDate, toDate).subscribe((data: GenericPagedResponse<ApptDetail>) => {
      this.appointments = data.data;


      // Update the schedulerEvents array with the new data
      this.updateSchedulerEvents();
    });
  }

  private updateSchedulerEvents() {
    this.schedulerEvents = this.appointments.map(appointment => {

      const startDateTime = new Date(appointment.startDateTime); // Convert to Date object
      const endDateTime = new Date(appointment.endDateTime); // Convert to Date object


      return {
        id: appointment.apptDetailId.toString(),
        start: startDateTime,
        end: endDateTime,
        title: appointment.clientName + ' <br> ' + appointment.itemName,
        description: appointment.apptNote,       
        resourceId: appointment.employeeId
      };
    });
  }

  public schedulerEvents: SchedulerEvent[] = [];

  onDateChange(event: any) {
    console.log(event);
    if (this.selectedDate != event.selectedDate)
      this.selectedDate = event.selectedDate;
    console.log('Selected Date:', this.selectedDate);
    this.loadApptData();
  }


  public onApptContextMenuSelect(e: ContextMenuSelectEvent): void {
    if (e.item.value == "edit") {

    }
    else if (e.item.value == "delete") {

    }
    else if (e.item.value == "cashout") {

    }
    else if (e.item.value == "sendSMS") {

    }
    else if (e.item.value == "sendEmailReminder") {

    }

  }
  public onEventContextMenu(event: any): void {
    this.contextMenuEvent = event; // Save the event for later use

    const targetElement = event.target;

    // Get the unique identifier from the custom attribute
   // const apptId = targetElement.getAttribute('data-appt-id');

    // Find the corresponding 'apptEvent' element based on the 'data-appt-id' attribute

   // console.log(apptId)
    
    if (targetElement) {

      
      this.apptContextMenu.show(targetElement);
    }

    event.preventDefault();
  }

}

<kendo-scheduler [events]="schedulerEvents" (dateChange)="onDateChange($event)" [selectedDate]="selectedDate"
                 (contextmenu)="onEventContextMenu($event)" #apptScheduler>

  <kendo-scheduler-week-view> </kendo-scheduler-week-view>

</kendo-scheduler>


<kendo-contextmenu #apptContextMenu [items]="apptContextMenuItems"  (select)="onApptContextMenuSelect($event)">

</kendo-contextmenu>

<ng-template kendoDrawerItemTemplate let-item let-level="level">
        <div
          style="
            display: flex;
            align-items: center;
            padding-bottom: 3px;
            padding-top: 3px;
          "
        >
          <span
            [ngClass]="'k-icon ' + item.icon"
            [themeColor]="primary"
            size="medium"
          ></span>
          <span class="k-item-text">{{ item.text }}</span>
          <span
            *ngIf="item.children"
            class="k-icon k-panelbar-expand k-i-arrow-60-down"
          ></span>
        </div>
      </ng-template>