I’m learning about: Scheduler and have some questions. - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 1 reply, has 2 voices, and was last updated by admin 3 months, 3 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

I’m learning about: Scheduler and have some questions. Posts

August 25, 2025 at 7:34 am I’m learning about: Scheduler and have some questions. #136143

jovanovic

Participant

I want to load jqxScheduler appointments from a local JSON file using jQuery. What’s the simplest way to do this?

August 26, 2025 at 7:55 am I’m learning about: Scheduler and have some questions. #136157

admin

Keymaster

Hi,

if you want to load jqxScheduler appointments from a local JSON file using jQuery, the simplest approach is to:

Store your appointments in a .json file.
Load that JSON with $.getJSON() (or $.ajax).
Pass the data into the scheduler’s dataAdapter as the source.

Simple json file:

[
  {
    "id": "1",
    "description": "Morning Meeting",
    "location": "Room 1",
    "subject": "Standup",
    "calendar": "Work",
    "start": "2025-08-26T09:00:00",
    "end": "2025-08-26T09:30:00"
  },
  {
    "id": "2",
    "description": "Client Call",
    "location": "Zoom",
    "subject": "Project Discussion",
    "calendar": "Work",
    "start": "2025-08-26T11:00:00",
    "end": "2025-08-26T12:00:00"
  }
]

and the example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jqxScheduler with JSON</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.classic.css" type="text/css" />
    <script src="scripts/jquery-1.12.4.min.js"></script>
    <script src="jqwidgets/jqxcore.js"></script>
    <script src="jqwidgets/jqxbuttons.js"></script>
    <script src="jqwidgets/jqxscrollbar.js"></script>
    <script src="jqwidgets/jqxmenu.js"></script>
    <script src="jqwidgets/jqxdata.js"></script>
    <script src="jqwidgets/jqxscheduler.js"></script>
    <script src="jqwidgets/jqxscheduler.api.js"></script>
    <script src="jqwidgets/jqxdatetimeinput.js"></script>
    <script src="jqwidgets/jqxcalendar.js"></script>
    <script src="jqwidgets/jqxtooltip.js"></script>
    <script src="jqwidgets/jqxwindow.js"></script>
</head>
<body>
    <div id="scheduler"></div>

    <script>
        $(document).ready(function () {
            $.getJSON("appointments.json", function (data) {
                var source = {
                    dataType: "json",
                    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: data
                };

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

                $("#scheduler").jqxScheduler({
                    date: new $.jqx.date(2025, 8, 26), // year, month (0-based), day
                    width: 850,
                    height: 600,
                    source: adapter,
                    view: 'weekView',
                    showLegend: true,
                    appointmentDataFields: {
                        from: "start",
                        to: "end",
                        id: "id",
                        description: "description",
                        location: "location",
                        subject: "subject",
                        resourceId: "calendar"
                    },
                    resources: {
                        colorScheme: "scheme05",
                        dataField: "calendar",
                        source: new $.jqx.dataAdapter(source)
                    }
                });
            });
        });
    </script>
</body>
</html>

Best regards,
Peter Stoev

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

Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.