Requesting assistance with: Scheduler. Appreciate it!

[sandeParticipant]

Can jqxScheduler display multiple resources side by side and how do I configure this with jQuery?

[adminKeymaster]

Hi,

jqxScheduler fully supports displaying multiple resources side by side (like different rooms, employees, or projects). This is usually called the resources view.

With jQuery, you configure it by:

Defining your resources (e.g., rooms, people).

Assigning appointments to those resources.

Configuring the resources and appointmentDataFields.resourceId in the scheduler initialization.

<div id="scheduler"></div>

<script type="text/javascript">
$(document).ready(function () {
    // Sample appointments
    let appointments = [
        {
            id: "id1",
            description: "Meeting",
            location: "Room 1",
            subject: "Board Meeting",
            calendar: "Room 1",
            resourceId: 1,
            start: new Date(2025, 8, 5, 9, 0, 0),
            end: new Date(2025, 8, 5, 11, 0, 0)
        },
        {
            id: "id2",
            description: "Conference",
            location: "Room 2",
            subject: "Tech Talk",
            calendar: "Room 2",
            resourceId: 2,
            start: new Date(2025, 8, 5, 10, 0, 0),
            end: new Date(2025, 8, 5, 12, 0, 0)
        }
    ];

    // Scheduler source
    let 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' },
            { name: 'resourceId', type: 'number' }
        ],
        id: 'id',
        localData: appointments
    };

    let adapter = new $.jqx.dataAdapter(source);

    // Define resources (side-by-side columns)
    let resources =
    {
        colorScheme: "scheme05",
        dataField: "resourceId",
        source: new $.jqx.dataAdapter({
            dataType: "array",
            dataFields: [
                { name: "id", type: "number" },
                { name: "name", type: "string" }
            ],
            localData: [
                { id: 1, name: "Room 1" },
                { id: 2, name: "Room 2" },
                { id: 3, name: "Room 3" }
            ]
        })
    };

    // Initialize Scheduler
    $("#scheduler").jqxScheduler({
        date: new $.jqx.date(2025, 9, 5),
        width: 850,
        height: 600,
        source: adapter,
        showLegend: true,
        view: "weekView",
        views: ["dayView", "weekView", "monthView"],
        resources: resources,
        appointmentDataFields:
        {
            from: "start",
            to: "end",
            id: "id",
            description: "description",
            location: "location",
            subject: "subject",
            resourceId: "resourceId" // link appointment → resource
        }
    });
});
</script>

Best regards,
Peter Stoev

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

[Author]

Posts