[FullStackDevATLParticipant]

Thank you for your answer.

Actually, I just installed jqwidgets-ng from npm.
I am on 19.0.5, which is the latest version on npm.

npm view jqwidgets-ng returns 19.0.5

[FullStackDevATLParticipant]

I have the same problem. The onAppointmentClickfires in month and week views, but not in agenda view.
I tried with onAppointmentDoubleClick as well. No luck either.

See code below. Some lines are omitted.

@angular-devkit/architect       0.1602.10
@angular-devkit/build-angular   16.2.10
@angular-devkit/core            16.2.10
@angular-devkit/schematics      16.2.10
@angular/cdk                    15.2.1
@angular/cli                    16.2.10
@angular/material               15.2.1
@schematics/angular             16.2.10
rxjs                            7.8.1
typescript                      4.9.5
zone.js                         0.13.3
jqwidgets-ng": "^19.0.5"

HTML

<jqxScheduler style="margin-bottom: 1%;" [hidden]="isLoading$ | async" #schedulerReference
              (onAppointmentClick)="AppointmentDoubleClick($event)"
              [date]="today"  
              [width]="'100%'" 
              [theme]="'material'" 
              [source]="dataAdapter" 
              [showLegend]="true"            
              [legendHeight]="100"
              [view]="'monthView'"
              [editDialog]="false"
              [contextMenu]="false"
              [appointmentDataFields]="appointmentDataFields" 
              [resources]="resources" 
              [views]="views"
              [max]="max"
              [min]="min"
              [statuses]="statuses">
</jqxScheduler>

@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.css']
})
export class CalendarComponent implements AfterViewInit {
  @ViewChild('schedulerReference', { static: false })
  scheduler!: jqxSchedulerComponent;

  private loadingSubject = new BehaviorSubject<boolean>(true);
  public isLoading$ = this.loadingSubject.asObservable();

  source: any =
    {
      dataType: "array",
      dataFields: [
        { name: 'id', type: 'string' },
        { name: 'description', type: 'string' },
        { name: 'subject', type: 'string' },
        { name: 'calendar', type: 'string' },
        { name: 'start', type: 'date' },
        { name: 'end', type: 'date' },
        { name: 'color', type: 'string' },
        { name: 'readOnly', type: 'boolean' },
        { name: 'allDay', type: 'boolean' },
        { name: 'status', type: 'string' }, 
        { name: 'borderColor', type: 'string' },
        { name: 'tooltip', type: 'string' },
        { name: 'style', type: 'string' },
      ],
      id: 'id',
      localData:
        [
          { calendar: "bogus" }
        ]
    };

  public dataAdapter: any = new jqx.dataAdapter(this.source);

 
  public today: any = new jqx.date('todayDate');

  public max: any;
  public min: any;

  public appointmentDataFields: any =
    {
      from: "start",
      to: "end",
      id: "id",
      vendor: "vendor",
      description: "description",
      location: "location",
      subject: "subject",
      resourceId: "calendar",
      color: "color",
      readOnly: "readOnly",
      style: "style",
      allDay: "allDay",
      status: 'status', 
      borderColor: 'borderColor',
      tooltip: "tooltip"
    };

  public resources: jqwidgets.SchedulerResources =
    {
      colorScheme: "scheme06",
      dataField: "calendar",
      source: new jqx.dataAdapter(this.source),
    };

  public views: any[] =
    [
      { type: 'weekView', timeRuler: { hidden: true } },
      { type: 'agendaView', timeRuler: { hidden: true } },
      { type: 'monthView', timeRuler: { hidden: true }, monthRowAutoHeight: true }
    ];

    public statuses = {free : "white"}

  constructor() {

    let threeYearsIntheFuture: Date = new Date();
    threeYearsIntheFuture.setFullYear(threeYearsIntheFuture.getFullYear() + 3);

    let oneYearBack: Date = new Date();
    oneYearBack.setFullYear(oneYearBack.getFullYear() - 1);

    this.max = new jqx.date(
      threeYearsIntheFuture.getFullYear(),
      threeYearsIntheFuture.getMonth(),
      threeYearsIntheFuture.getDate());

    this.min = new jqx.date(
      oneYearBack.getFullYear(),
      oneYearBack.getMonth(),
      oneYearBack.getDate());
  }

  public AppointmentDoubleClick(event: any): void {
    console.log("Fired")
  }

  ngAfterViewInit(): void {
  
    forkJoin({
    
    }).pipe(catchError((error) => {
      
    }
    ), finalize(() => {
      this.loadingSubject.next(false);
    })).subscribe(({ contracts }) => {

      this.source.localData = this.generateAppointments();
      this.scheduler.setOptions({ source: new jqx.dataAdapter(this.source) })

      this.scheduler.getAppointments().forEach(appointment => {
        this.scheduler.setAppointmentProperty(appointment.id!.toString(), 'draggable', false);
        this.scheduler.setAppointmentProperty(appointment.id!.toString(), 'resizable', false);
      })
    })
  }

  private generateAppointments(): any {
    let appointments = new Array();
    let appointment1 = {
      id: "id1",
      description: "End of the Contract",
      subject: "Contract 1",
      calendar: "John Smith",
      start: new Date(2024, 3, 23),
      end: new Date(2024, 3, 23),
      readOnly: false,
      allDay: true,
      status : null, 
    };
    let appointment2 = {
      id: "id2",
      description: "Custom Alert",
      subject: "Contract 2",
      calendar: "Amerigo Vespucci",
      start: new Date(2024, 3, 23),
      end: new Date(2024, 3, 23),
      allDay: true,
      readOnly: true,
      status : null,
      borderColor : "red",
    };
    }

    appointments.push(appointment1);
    appointments.push(appointment2);

    return appointments;
  };
}

[Author]

Posts