Bottom calendar bar and calendar display blocks

[andypet74Participant]

Hi, I have two specific questions, firstly, how do you enable the little key at the bottom of the calendar? Mine is off for some reason and I don’t know how to turn it on.

Secondly, can I customize what data is displayed in the little block/tooltips on the calendar itself? Right now each appointment just says my person’s name but no description, how can I go about adding more detail to each appointment block displayed on the calendar.

EDIT – as a heads up, I do have [showLegend]=”true” in my component.html

[TodorParticipant]

Hello andypet74,

1) Could you please be more specific, because I’m not quite sure for what key you are talking about? You could share a jsfiddle example.
2) I would suggest you to use renderAppointment property. It sets a function called when the Scheduler is rendering its appointments. The function has one parameter which is Object with the following members:

– appointment – Object which has the appointmentDataFields. See appointmentDataFields property.
– width – integer. Gets the appointment’s width.
– height- integer. Gets the appointment’s height.
– textColor – hex string. Gets or sets the appointment’s text color.
– background – hex string. Gets or sets the appointment’s background color.
– borderColor – hex string. Gets or sets the appointment’s border color.
– style – hex string. Gets or sets the appointment’s style. This is alternative to textColr, background and borderColor, because it sets them all depending on the HEX string you set.
– cssClass – string. This can be used for adding CSS Class to the appointment.
– html – html string. This can be used for replacing the appointment’s HTML Content.
– view – string. Gets the current view – ‘dayView’, ‘weekView’, ‘monthView’, timelineDayView’, ‘timelineWeekView’, ‘timelineMonthView’

You could review the following demo which uses this property.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[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.

[TodorParticipant]

Hello andypet74,

About your first question. You are correct. If you don’t have rooms your legend stays hidden.

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[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.

[TodorParticipant]

Hello andypet74,

You could set each appointment to different room and they will show in different colors. From the legend below you could show/hide each room(appointments). So the answer to your question is yes, you could set a room and the legend will show.
renderAppointment property customizes the appointment, yes as shown in the following demo.

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[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

[TodorParticipant]

Hello andypet74,

You have to have calendar property set for the appointments and the showLegend property set to true for the scheduler itself. Probably you don’t have one of these. If you have both set and still no legend is showing, please share your code for better investigation.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[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.

[TodorParticipant]

Hello andypet74,

I’ve made a similar example for you. It’s shown how to update scheduler’s data. Also please take a note that the legend is working.

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[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.

[TodorParticipant]

Hello andypet74,

Yes, you could use showAppointmentsByResource/hideAppointmentsByResource methods for this purpose.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[Author]

Posts