[andypet74Participant]

I so appreciate it.

I got 90% of it working. My only problem now is that the legend does not appear. I am guessing this is because the data I bind comes from promises. I would imagine that is the reason when the scheduler is initially created there is no data and so it doesn’t have the functionality to create a legend after initially being created. Is that a correct assumption? I know there is a destroy method but there is not a way to rebuild the scheduler after destroying it is there.

I can see my events now and that is all working, it is just the legend. I could make my own legend I suppose, I assume there is a way to hide and unhide appointments.

[andypet74Participant]

I do have showLegend set to true and I have calendar being set, see below

This is the “important” code of the Typescript:

  generateAppointments(companyID) {
   
    this.appointments = null;
    this.appointmentService.getAppointmentsByCompanyID(companyID).then(r => {
      console.log(r);
      this.appointments = r;

      this.events = r.map(item => {
        return {
          id: item.appointmentID,
          description: item.appointmentNotes,
          subject: item.employeeLastName + ", " + item.employeeFirstName,
          calendar: item.employeeLastName + ", " + item.employeeFirstName,
          observCat: item.customerID,
          observSub: item.observationCategoryID,
          start: new Date(item.appointmentDate),
          end: new Date(item.appointmentEndDate),
          resizable: false,
          draggable: false,
          readOnly: false
        }

      });
      this.refreshdata();
      console.log(this.events);

      //this.appointments.forEach((item, index) => {
        //console.log(item);
        //let newAppointment = {
          //id: item.appointmentID,
          //description: item.appointmentNotes,
          //subject: item.employeeLastName + ", " + item.employeeFirstName,
          //calendar: item.employeeLastName + ", " + item.employeeFirstName,
          //observCat: item.customerID,
          //observSub: item.observationCategoryID,
          //start: new Date(item.appointmentDate),
          //end: new Date(item.appointmentEndDate),
        //}
        //console.log(newAppointment);
        //this.scheduler.addAppointment(newAppointment);
      //});
      //jqxScheduler('render');
      //let dataAdapter: any = new jqx.dataAdapter(this.source);
    });
    //console.log(this.source);
    
  };

  refreshdata() {
    this.source.localData = this.events;
    this.dataAdapter = new jqx.dataAdapter(this.source)

  }

 async getCustomerNameByID(customerID) {
    await this.appointmentService.getCustomerNameByCustomerID(customerID)
      .then(data => { this.customerName = data; return data; }).catch(err => console.log(err));
    
  }
  
  source: any =
    {
      dataType: "array",
      dataFields: [
        { name: 'id', type: 'string' },
        { name: 'description', type: 'string' },
        { name: 'location', type: 'string' },
        { name: 'subject', type: 'string' },
        { name: 'observCat', type: 'string' },
        { name: 'observSub', type: 'string' },
        { name: 'calendar', type: 'string' },
        { name: 'start', type: 'date' },
        { name: 'end', type: 'date' },
        { name: 'resizable', type: 'bool' },
        { name: 'draggable', type: 'bool' },
        { name: 'readOnly', type: 'bool' }
      ],
      id: 'id',
      localData: this.events
    };
  dataAdapter: any = new jqx.dataAdapter(this.source);
 
  appointmentDataFields: any =
    {
      from: "start",
      to: "end",
      id: "id",
      description: "description",
      location: "location",
      subject: "subject",
      resourceId: "calendar",
      resizable: "resizable",
      readOnly: "readOnly",
      draggable: "draggable"
    };

  resources: any =
    {
      colorScheme: "scheme05",
      dataField: "calendar",
      source: new jqx.dataAdapter(this.source)
    };

  //views: any[] =
  //  [
  //    'dayView',
  //    'weekView',
  //    'monthView'
  //  ];
  views: any[] =
    [
      {
        type: 'dayView',
        showWeekends: false
      },
      {
        type: "weekView",
        showWeekends: false,
        timeRuler: {
          scaleStartHour: 8,
          scaleEndHour: 22,
          hidden: false
        },
        workTime:
        {
          fromDayOfWeek: 1,
          toDayOfWeek: 5,
          fromHour: 8,
          toHour: 22
        }
      },
      {
        type: 'monthView',
        monthRowAutoHeight: true
      },
      'agendaView'
    ];

If you look at the commented out code in the generateAppointments method you can see I set the calendar property. I also have showLegend set to true in the settings as well as in the HTML:

      <jqxScheduler [theme]="'material'" #schedulerReference (onCellClick)="CellClick($event,content)"
                    [date]="date" [width]="'100%'" [height]="'70vh'" [source]="dataAdapter" [showLegend]="true" [view]="'weekView'" [renderAppointment]="renderAppointment"
                    [appointmentDataFields]="appointmentDataFields" [editDialog]="true" [resources]="resources" [views]="views" [editDialogCreate]="editDialogCreate">
      </jqxScheduler>

Also, the uncommented code isn’t working in the generateAppointments, I am trying to get it to work but it won’t add appointments to the scheduler. It sets all the variables fine but I can’t get data to the scheduler. I have a seperate post about that. That being said, I can get appointments on the scheduler if I uncomment the commented code.

[andypet74Participant]

So in this example, I see the bottom legend but it is being set by the Calendar property. I have that property set in mine but no legend on the bottom, any idea why?

https://jseditor.io/?key=jqwidgets-scheduler-template

[andypet74Participant]

So I can set a room to what I want to get it to appear and use the html of the renderAppointment to customize what it looks like on the calendar.

[andypet74Participant]

Sorry, the key I am talking about is the legend at the bottom that shows usually “rooms”. In my example, I do not have rooms so it makes it slightly more difficult. I will share some of my code because my schedule is probably not typical.

First off, my schedule is loaded on page load but not all the data is. A user would select the company they wish to view and then it will populate the scheduler with that companies’ employee’s and their schedules. I do this with the following function:

generateAppointments(companyID) {
   
    this.appointments = null;
    this.appointmentService.getAppointmentsByCompanyID(companyID).then(r => {
      console.log(r);
      this.appointments = r;
      this.appointments.forEach((item, index) => {
        console.log(item);
        let newAppointment = {
          id: item.appointmentID,
          description: item.appointmentNotes,
          subject: item.employeeLastName + ", " + item.employeeFirstName,
          calendar: item.employeeLastName + ", " + item.employeeFirstName,
          observCat: item.customerID,
          observSub: item.observationCategoryID,
          start: new Date(item.appointmentDate),
          end: new Date(item.appointmentEndDate),
        }
        //console.log(newAppointment);
        this.scheduler.addAppointment(newAppointment);
      });
       let dataAdapter: any = new jqx.dataAdapter(this.source);
    });

The angular code I have for the scheduler is:

source: any =
    {
      dataType: "array",
      dataFields: [
        { name: 'id', type: 'string' },
        { name: 'description', type: 'string' },
        { name: 'subject', type: 'string' },
        { name: 'observCat', type: 'string' },
        { name: 'observSub', type: 'string' },
        { name: 'calendar', type: 'string' },
        { name: 'start', type: 'date' },
        { name: 'end', type: 'date' }
      ],
      id: 'id',
      localData: this.appointmentArray
    };

  //dataAdapter: any = new jqx.dataAdapter(this.source);
 
  schedulerSettings: jqwidgets.SchedulerOptions = {
    showLegend: true
  }
  appointmentDataFields: any =
    {
      from: "start",
      to: "end",
      id: "id",
      description: "description",
      subject: "subject",
      resourceId: "calendar",
    };

  resources: any =
    {
      colorScheme: "scheme05",
      dataField: "calendar",
      source: new jqx.dataAdapter(this.source)
    };

  views: any[] =
    [
      'dayView',
      'weekView',
      'monthView'
    ];

In my component HTML I call it using:

      <jqxScheduler [theme]="'material'" #schedulerReference (onCellClick)="CellClick($event,content)"
                    [date]="date" [width]="'100%'" [height]="'70vh'" [source]="dataAdapter" [showLegend]="true" [view]="'weekView'"
                    [appointmentDataFields]="appointmentDataFields" [editDialog]="false" [resources]="resources" [views]="views" [editDialogCreate]="editDialogCreate">
      </jqxScheduler>

We have a custom model that pops up when you click on the scheduler. It has the information we want as we were having too many issues customizing the default dialogs. Since I don’t have “rooms” I am wondering if that is what is causing my “key”/”legend” to not appear at the bottom. See Picture Attached.

Also my second question I think is what you did answer, I will have to play with it but I was asking if I could add more information to the cards, mine only says Test 1 and Test 2 but it would be nice to display some extra information to the user. I believe what you suggested will work I just need to test it out.

[Author]

Posts