appointment click not firing in agenda view

[alinungureanParticipant]

Hi,

how can appointmentClick be used in agenda view? Below is the demo in which the event looks like is not triggered.
https://jsfiddle.net/6s0zby1k/

[adminKeymaster]

Hi alinungurean,

The Scheduler cannot process your data, because of the HTML Elements and different things in the data which you try to put in the Scheduler. By default the Agenda view looks like that: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxscheduler/scheduler-agenda-view.htm?light. You can see in the sample that the edit dialog is displayed when you double click on a cell from the appointment column

I would suggest you to take a look at the sample’s source and put an Array with data, because HTML tags and HTML class will be displayed as Strings due to security reasons built-in the Scheduler.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[alinungureanParticipant]

Something is wrong here, please take a look at these examples. In the JQuery version the click works in agenda view https://jsfiddle.net/2dj1azbv/, but in the Vue version it doesn’t https://codesandbox.io/s/modest-framework-kv6t2

[adminKeymaster]

Hi alinungurean,

In your Vue example, the package.json is pointing out to an old version of jQWidgets. That’s the difference which I found.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[alinungureanParticipant]

Now it points to the latest version. But even so the click is not working in agenda view in the vue example https://codesandbox.io/s/modest-framework-kv6t2.
Please take a look and confirm if is a configuration problem or a jqwidgets bug.

[adminKeymaster]

Hi alinungurean,

We debugged this and the issue is that the appointment data contains HTML strings and tries to render DIVs and Spans. If the data is with strings only, the event will click. Please, note that HTML in appointments is not supported by design for security reasons.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[alinungureanParticipant]

Hi,

is this issue fixed is the v11.0.0 ?

https://jsfiddle.net/fy0ugv5w/

[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;
  };
}

[adminKeymaster]

Hi,

We fire the appointmentClick event in the agenda view in the current version of jQWidgets. If you used a previous version of jQWidgets, please remove all caches from your app.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[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

[Author]

Posts