I’m checking whether I’m using: Scheduler correctly.

[jovanovicParticipant]

I want to display appointments from multiple resources in jqxScheduler’s timeline view. How can I structure the data for Angular?

[adminKeymaster]

Hi,

To display appointments from multiple resources in the jqxScheduler’s timeline view using Angular, you’ll need to structure the data properly so that it matches jqxScheduler’s expectations for resources, appointments, and time slots.

Here’s a step-by-step guide on how you can achieve this:

1. Install jqxScheduler and jqWidgets in Angular

First, make sure you’ve installed jqWidgets in your Angular project. You can do this using npm:

npm install jqwidgets-ng

Then, import the necessary module into your Angular module:

import { jqxSchedulerModule } from 'jqwidgets-ng/jqxscheduler';

@NgModule({
  declarations: [ ... ],
  imports: [ jqxSchedulerModule, ... ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Prepare the Data Structure

To display appointments from multiple resources, you’ll need two main things:

Resources: These represent the different resources in your timeline (e.g., rooms, employees, etc.).
Appointments: These represent the scheduled events for each resource (e.g., meetings, bookings).
Example Data Structure:

Resources (This can be a list of resources such as rooms, staff, etc.)
Appointments (Each appointment will be linked to a specific resource.)

// Example resource data (can represent rooms, employees, etc.)
resources = [
  { id: '1', name: 'Room 101' },
  { id: '2', name: 'Room 102' },
  { id: '3', name: 'Room 103' }
];

// Example appointments data (linked to resources)
appointments = [
  { 
    id: '1', 
    resourceId: '1',  // Linking to 'Room 101'
    subject: 'Meeting with John', 
    start: '2025-10-10T09:00:00', 
    end: '2025-10-10T10:00:00'
  },
  { 
    id: '2', 
    resourceId: '2',  // Linking to 'Room 102'
    subject: 'Project Discussion', 
    start: '2025-10-10T10:30:00', 
    end: '2025-10-10T12:00:00'
  },
  { 
    id: '3', 
    resourceId: '1',  // Linking to 'Room 101'
    subject: 'Team Meeting', 
    start: '2025-10-10T13:00:00', 
    end: '2025-10-10T14:00:00'
  },
  { 
    id: '4', 
    resourceId: '3',  // Linking to 'Room 103'
    subject: 'Client Presentation', 
    start: '2025-10-10T14:30:00', 
    end: '2025-10-10T16:00:00'
  }
];

3. Configure jqxScheduler

In your component where the jqxScheduler will be displayed, you need to configure the scheduler to use the resources and appointments data properly.

Here’s an example setup in your component:

Component HTML (app.component.html)

<jqxScheduler [resources]="resources"
              [appointmentsDataField]="'appointments'"
              [appointmentDataFields]="appointmentDataFields"
              [timelineView]="true"
              [date]="'2025-10-10'"
              [width]="'100%'"
              [height]="'600px'">
</jqxScheduler>

Component TypeScript (app.component.ts)

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  resources = [
    { id: '1', name: 'Room 101' },
    { id: '2', name: 'Room 102' },
    { id: '3', name: 'Room 103' }
  ];

  appointments = [
    { 
      id: '1', 
      resourceId: '1',  // Linking to 'Room 101'
      subject: 'Meeting with John', 
      start: '2025-10-10T09:00:00', 
      end: '2025-10-10T10:00:00'
    },
    { 
      id: '2', 
      resourceId: '2',  // Linking to 'Room 102'
      subject: 'Project Discussion', 
      start: '2025-10-10T10:30:00', 
      end: '2025-10-10T12:00:00'
    },
    { 
      id: '3', 
      resourceId: '1',  // Linking to 'Room 101'
      subject: 'Team Meeting', 
      start: '2025-10-10T13:00:00', 
      end: '2025-10-10T14:00:00'
    },
    { 
      id: '4', 
      resourceId: '3',  // Linking to 'Room 103'
      subject: 'Client Presentation', 
      start: '2025-10-10T14:30:00', 
      end: '2025-10-10T16:00:00'
    }
  ];

  appointmentDataFields = {
    id: 'id', // Unique ID for the appointment
    resourceId: 'resourceId', // Resource ID that the appointment belongs to
    subject: 'subject', // The title of the appointment
    start: 'start', // Start time of the appointment
    end: 'end' // End time of the appointment
  };
}

4. jqxScheduler Timeline View Configuration

To make sure the appointments appear in the timeline view, the following points should be set up:

resources: Defines the resources that will be displayed on the timeline.
appointmentsDataField: Tells the scheduler where the appointments data is located.
appointmentDataFields: This specifies how each appointment is mapped to a data field in your appointments array (e.g., id, subject, start, end).

timelineView: Set this to true to ensure that the scheduler is displayed in the timeline view.

5. Styling and Customization

You can further customize the look of your appointments and resources, for example by changing colors based on the type of appointment, adding labels, or adjusting the timeline’s appearance.

::ng-deep .jqx-scheduler-appointment {
  background-color: #007BFF;
  color: white;
}

::ng-deep .jqx-scheduler-resource-cell {
  background-color: #f0f0f0;
}

Hope this helps.

Best regards,
Peter Stoev

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

[Author]

Posts