<kendo-chart-value-axis>
	<kendo-chart-value-axis-item >
		<kendo-chart-value-axis-item-labels [content]="utilsService.label" [min]="minVal">
		</kendo-chart-value-axis-item-labels>
	</kendo-chart-value-axis-item>
</kendo-chart-value-axis>

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>