jQWidgets Forums

Forum Replies Created

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts

  • FullStackDevATL
    Participant

    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


    FullStackDevATL
    Participant

    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;
      };
    }
Viewing 2 posts - 1 through 2 (of 2 total)