jQWidgets Forums
Forum Replies Created
Viewing 2 posts - 1 through 2 (of 2 total)
-
Author
-
April 3, 2024 at 2:47 pm in reply to: appointment click not firing in agenda view appointment click not firing in agenda view #134547
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.5April 2, 2024 at 10:53 pm in reply to: appointment click not firing in agenda view appointment click not firing in agenda view #134536I have the same problem. The
onAppointmentClick
fires in month and week views, but not in agenda view.
I tried withonAppointmentDoubleClick
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; }; }
-
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)