Angular: Resources won't show up in Scheduler

[stijnbParticipant]

Hi
I’m trying to get the resource dropdown in the editDialog to fill up with data from the database.
For some reason the dropdown is empty, only showing a field “Please Choose:”.
I have no idea what I’m supposed to do now, I’ve tried so many different things. If someone knows, please let me know how I can solve this!
Here is my code:

scheduler.component.ts :

import {AfterViewInit, Component, ViewChild} from '@angular/core';
import { jqxSchedulerComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxscheduler';
import {Reservatie} from "../models/reservatie";
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {ActivatedRoute} from "@angular/router";
import {SchedulerService} from "../services/scheduler.service";
import {AuthenticationService} from "../services/authentication.service";

@Component({
  selector: 'app-scheduler-page',
  templateUrl: './scheduler.component.html'
})

export class SchedulerComponent implements AfterViewInit {
  @ViewChild('schedulerReference') scheduler: jqxSchedulerComponent;

  reservaties: Reservatie[] = [];
  editableReservatie = {};

  model: any = {};
  error = '';
  title: String = '';
  isSubmitting: boolean = false;
  isReadOnly: boolean = false;

  constructor(private route: ActivatedRoute,
              private schedulerService: SchedulerService,
              private authenticationService: AuthenticationService) {}

  ngAfterViewInit(): void {
    this.route.url.subscribe(data => {
      // Set a title for the page
      this.title = 'Reservaties';

      this.generateAppointments();
    });
  }

  generateAppointments() {
    this.schedulerService.getReservaties()
      .subscribe(reservaties => {
        this.reservaties = reservaties;
        for (let reservatie of reservaties) {
          this.isReadOnly = false;
          this.scheduler.beginAppointmentsUpdate();
          if((localStorage.getItem('currentUserName') == null) || (localStorage.getItem('currentUserName') != JSON.stringify(reservatie.user.username))) {
            this.scheduler.setAppointmentProperty(reservatie._id, 'readOnly', true);
            this.isReadOnly = true;
          }
          this.scheduler.endAppointmentsUpdate();

          let appointment = {
            id: reservatie._id,
            description: reservatie.reason,
            location: reservatie.room.name,
            subject: reservatie.user.firstName + " " + reservatie.user.lastName,
            start: new Date(reservatie.from),
            end: new Date(reservatie.to),
            room: reservatie.room.name,
            resizable: false,
            draggable: false,
            readOnly: this.isReadOnly
          };
          this.scheduler.addAppointment(appointment);
          console.log(appointment);
        }
      });
  };

source: any =
    {
      dataType: "array",
      dataFields: [
        { name: 'id', type: 'string' },
        { name: 'description', type: 'string' },
        { name: 'location', type: 'string' },
        { name: 'subject', type: 'string' },
        { name: 'room', type: 'string' },
        { name: 'start', type: 'date', format: 'dd/MM/yyyy' },
        { name: 'end', type: 'date', format: 'dd/MM/yyyy' },
        { name: 'resizable', type: 'boolean'},
        { name: 'draggable', type: 'boolean'},
        { name: 'readOnly', type: 'boolean'}
      ],
      id: 'id'
    };
  dataAdapter: any = new jqx.dataAdapter(this.source);
  date: any = new jqx.date();
  appointmentDataFields: any =
    {
      from: "start",
      to: "end",
      id: "id",
      description: "description",
      location: "location",
      subject: "subject",
      resourceId: "room",
      resizable: "resizable",
      draggable: "draggable",
      readOnly: "readOnly"
    };
  resources: any =
    {
      colorScheme: "scheme05",
      dataField: "room",
      source: new jqx.dataAdapter(this.source)
    };
  view: 'timelineWeekView';
  views: any[] =
    [
      { type: 'timelineWeekView', appointmentHeight: 40, timeSlotWidth: 30, showWeekends: true, timeRuler: { scale: "quarterHour", scaleStartHour: 9, scaleEndHour: 22 } },
      { type: 'timelineDayView', appointmentHeight: 40, timeSlotWidth: 30, showWeekends: true, timeRuler: { scale: "quarterHour", scaleStartHour: 9, scaleEndHour: 22 } }
    ];
appointmentChange (event: any): void {
    console.log('change.');
  };

  appointmentAdd (event: any): void {
    console.log('add.');
  };

  appointmentDelete (event: any): void {
    console.log('delete.');
  };

  // called when the dialog is created.
  editDialogCreate = (dialog, fields, editAppointment) => {
    // hide subject option
    fields.subjectContainer.hide();
    // hide from option
    fields.fromContainer.hide();
    // hide to option
    fields.toContainer.hide();
    // remove repeat option
    fields.repeatContainer.remove();
    // remove status option
    fields.statusContainer.remove();
    // remove timeZone option
    fields.timeZoneContainer.remove();
    // remove color option
    fields.colorContainer.remove();
    // remove allDay option
    fields.allDayContainer.remove();
    // show resource option
    fields.resourceContainer.show();

    fields.resourceLabel.html("Room");
    fields.locationLabel.html("Room");
  };

  /**
   * called when the dialog is closed.
   * @param {Object} dialog - jqxWindow's jQuery object.
   * @param {Object} fields - Object with all widgets inside the dialog.
   * @param {Object} the selected appointment instance or NULL when the dialog is opened from cells selection.
   */
  editDialogClose = (dialog, fields, editAppointment) => {
  };

  /**
   * called when a key is pressed while the dialog is on focus. Returning true or false as a result disables the built-in keyDown handler.
   * @param {Object} dialog - jqxWindow's jQuery object.
   * @param {Object} fields - Object with all widgets inside the dialog.
   * @param {Object} the selected appointment instance or NULL when the dialog is opened from cells selection.
   * @param {jQuery.Event Object} the keyDown event.
   */
  editDialogKeyDown = (dialog, fields, editAppointment, event) => {
  };
}

scheduler.component.html :

<div class="app-scheduler-page">
  <div class="container page">
    <jqxScheduler #schedulerReference
                  [date]="date" [width]="'100%'" [height]="800" [source]="dataAdapter" [showLegend]="true" [view]="view"
                  [editDialogCreate]="editDialogCreate"
                  [editDialogOpen]="editDialogOpen"
                  [editDialogClose]="editDialogClose"
                  [editDialogKeyDown]="editDialogKeyDown"
                  (onAppointmentAdd)="appointmentAdd($event)"
                  (onAppointmentChange)="appointmentChange($event)"
                  (onAppointmentDelete)="appointmentDelete($event)"
                  [appointmentDataFields]="appointmentDataFields" [resources]="resources" [views]="views">
    </jqxScheduler>
  </div>
</div>

Thanks in advance!
stijnb

[Ivo ZhulevParticipant]

Hi stijnb,

I can’t help you without knowing the data which is coming etc. So please share an example(maybe a zip file), so I can download it, install the packages and run it. Make dummy services so I can test, and remove all the code which isn’t necessary for the issue.

Best Regards,
Ivo

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

[mousmoulParticipant]

I can make the container to show but, how do you set the options for it. Pull down just has “Please Choose:”
Thanks

[HristoParticipant]

Hello mousmoul,

Could you clarify it? Which widget do you use that collect items (jqxListBox, jqxDropDownList or jqxComboBox)?

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[gellingboeParticipant]

This appears to be the jqxScheduler by the code above and is the exact issue I am trying to find a solution to. How do I get the resourceId, or room value above to be linked to an array instead of just based on the data from the database? I want to have 4 room options and if I only have two values in the database it is limited to those two when making a new appointment. I attempted to manually set the resources to an array of values but it won’t show those.

Here is one of the attempts I have made trying to force a standard list of resource values for the drop down that would be the room in this demo from your site: https://www.jqwidgets.com/angular/angular-scheduler/angular-scheduler-resources.htm

This is my code trying to manually load data into the calendar(room) field.
resource: any = {
dataType: ‘array’,
dataField: [{name: ‘id’, type: ‘number’},{name: ‘name’, type: ‘string’}],
id: ‘id’,
localData : [{id: 1, name: ‘Phone Only’}, {id: 2,name: ‘Video/Phone’}, {id: 3,name: ‘Overflow’}, {id: 4,name: ‘Unavailable’}]
}
resources: any = {
colorScheme: “scheme05”,
dataField: “resource”,
source: new jqx.dataAdapter(this.resource)
};

[gellingboeParticipant]

I guess a better question would be, how would you select a room on the very first appointment being added, if there were no appointments yet to get the room list from?

[HristoParticipant]

Hello gellingboe,

I think I go that you mentioned.
Is the case when you do not have appointments in the Scheduler and want to add one brand new appointment.
You could add the desired number of resources with property – resources with own source.
Please, take a look at this example:

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { jqxSchedulerComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxscheduler';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})

export class AppComponent {	
	@ViewChild('schedulerReference') scheduler: jqxSchedulerComponent;
    
    source: any =
    {
        dataType: "array",
        dataFields: [
            { name: 'id', type: 'string' },
            { name: 'description', type: 'string' },
            { name: 'location', type: 'string' },
            { name: 'subject', type: 'string' },
            { name: 'calendar', type: 'string' },
            { name: 'start', type: 'date' },
            { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: []
    };

    dataAdapter: any = new jqx.dataAdapter(this.source);
    date: any = new jqx.date(2016, 11, 23);
	resourcesSource = [{ calendar: "Room1" }, { calendar: "Room2" }, { calendar: "Room3" }, { calendar: "Room4" }];
    
	appointmentDataFields: any =
    {
        from: "start",
        to: "end",
        id: "id",
        description: "description",
        location: "place",
        subject: "subject",
        resourceId: "calendar"
    };

    resources: any =
    {
        colorScheme: "scheme05",
        dataField: "calendar",
        orientation: "horizontal",
        source: this.resourcesSource
    };

    views: any[] =
    [
        { type: 'dayView', showWeekends: false },
        { type: 'weekView', showWeekends: false },
        { type: 'monthView' }
    ];  
}

(based on this demo)

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[gellingboeParticipant]

That did it, thanks!

[Author]

Posts