Could use a sanity check on: Scheduler.

[jovanovicParticipant]

I’m building a calendar view with jqxScheduler in Angular. How do I make sure appointments span correctly across multiple days?

[adminKeymaster]

Hi,

jqxScheduler handles multi-day appointments, but there are a few important details to get right for them to render correctly across multiple days in an Angular app.

Use correct from and to Date fields. Multi-day appointments are supported automatically if your data adapter provides correct JavaScript Date objects for both start and end times.

this.appointments = [
  {
    id: 1,
    description: 'Conference',
    location: 'London',
    subject: 'Tech Conference',
    calendar: 'Work',
    start: new Date(2025, 10, 6, 9, 0, 0),  // Nov 6, 09:00
    end: new Date(2025, 10, 8, 17, 0, 0)     // Nov 8, 17:00 → spans 3 days
  }
];

Configure the dataAdapter correctly. Ensure that your dataFields map your start and end times properly to jqxScheduler’s expected fields (from and to):

this.source = {
  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: this.appointments
};

this.dataAdapter = new jqx.dataAdapter(this.source);

Full example:

<jqxScheduler
  [width]="'100%'"
  [height]="600"
  [source]="dataAdapter"
  [appointmentDataFields]="{
    from: 'start',
    to: 'end',
    id: 'id',
    description: 'description',
    location: 'location',
    subject: 'subject',
    resourceId: 'calendar'
  }"
  [view]="'weekView'"
  [showLegend]="true"
  [views]="['dayView', 'weekView', 'monthView']">
</jqxScheduler>

Best regards,
Peter Stoev

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

[Author]

Posts