Large Number of appointments

[buckeyejeffParticipant]

I have a schedular and I have almost 200 appointments in some months. When I get over 100 the scheduler will take over 30 seconds to load. I know there is one other question this in the forum, but I could not reply there. I tried by directly adding appointments and that was still slow and no faster. I have watched fiddler and everything is fast until jqxScheduler is bound. I followed all the guidelines here and my example would be same fiddle as is here:
http://www.jqwidgets.com/community/topic/appointment-limitation/

Please advise on how you can get > 100 appointments to load faster

[Peter StoevKeymaster]

Hi buckeyejeff,

The count of appointments affects the performance. I do not think that you can do anything about this.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[buckeyejeffParticipant]

So, there are no alternatives other than trying a different product? We are only trying to load a couple 100 and that is not a lot when using it for business needs.

[Peter StoevKeymaster]

I don’t see so slow loading with 100+ appointments.

$(document).ready(function () {
    var appointments = new Array();

    var appointment1 = {
    id: "id1",
    description: "George brings projector for presentations.",
    location: "",
    subject: "Quarterly Project Review Meeting",
    calendar: "Room 1",
    start: new Date(2015, 10, 23, 9, 0, 0),
    end: new Date(2015, 10, 23, 16, 0, 0)
}

var appointment2 = {
    id: "id2",
    description: "",
    location: "",
    subject: "IT Group Mtg.",
    calendar: "Room 2",
    start: new Date(2015, 10, 24, 10, 0, 0),
    end: new Date(2015, 10, 24, 15, 0, 0)
}

var appointment3 = {
    id: "id3",
    description: "",
    location: "",
    subject: "Course Social Media",
    calendar: "Room 3",
    start: new Date(2015, 10, 27, 11, 0, 0),
    end: new Date(2015, 10, 27, 13, 0, 0)
}

var appointment4 = {
    id: "id4",
    description: "",
    location: "",
    subject: "New Projects Planning",
    calendar: "Room 2",
    start: new Date(2015, 10, 23, 16, 0, 0),
    end: new Date(2015, 10, 23, 18, 0, 0)
}

var appointment5 = {
    id: "id5",
    description: "",
    location: "",
    subject: "Interview with James",
    calendar: "Room 1",
    start: new Date(2015, 10, 25, 15, 0, 0),
    end: new Date(2015, 10, 25, 17, 0, 0)
}

var appointment6 = {
    id: "id6",
    description: "",
    location: "",
    subject: "Interview with Nancy",
    calendar: "Room 4",
    start: new Date(2015, 10, 26, 14, 0, 0),
    end: new Date(2015, 10, 26, 16, 0, 0)
}
appointments.push(appointment1);
appointments.push(appointment2);
appointments.push(appointment3);
appointments.push(appointment4);
appointments.push(appointment5);
appointments.push(appointment6);

for(var i = 0; i < 100; i++) {
    var appointment = {
    id: "id6",
    description: "",
    location: "",
    subject: "Interview with Nancy",
    calendar: "Room 4",
    start: new Date(2015, 10, 26, 14+i, 0, 0),
    end: new Date(2015, 10, 26, 16+i, 0, 0)
    }
    appointments.push(appointment);
}
// prepare the data
var 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: appointments
};
var adapter = new $.jqx.dataAdapter(source);
$("#scheduler").jqxScheduler({
    date: new $.jqx.date(2015, 11, 23),
    width: 850,
    height: 600,
    source: adapter,
    view: 'weekView',
    appointmentOpacity: 0.7,
    showLegend: true,
    ready: function () {
        $("#scheduler").jqxScheduler('ensureAppointmentVisible', 'id1');
    },
    resources:
    {
        colorScheme: "scheme05",
        dataField: "calendar",
        source:  new $.jqx.dataAdapter(source)
    },
    appointmentDataFields:
    {
        from: "start",
        to: "end",
        id: "id",
        description: "description",
        location: "place",
        subject: "subject",
        resourceId: "calendar"
    },
    views:
    [
        'dayView',
        'weekView',
        'monthView'
    ]
});
});

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[balachandraParticipant]

I have scheduler i am loading only one month data, almost 10000 records are there for a month but for each day appointments are around 300 when i try to load this to scheduler it is in unresponsive state.

$(document).ready(function () {
var appointments = new Array();
for(var i = 0; i < 400; i++) {
var appointment = {
id: “id6”,
description: “”,
location: “”,
subject: “Interview with Nancy”,
calendar: “Room 4”,
start: new Date(2019, 10, 26, 14, 0, 0),
end: new Date(2019, 10, 26, 16, 0, 0)
}
appointments.push(appointment);
}
// prepare the data
var 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: appointments
};
var adapter = new $.jqx.dataAdapter(source);
$(“#scheduler”).jqxScheduler({
date: new $.jqx.date(2015, 11, 23),
width: 850,
height: 600,
source: adapter,
view: ‘weekView’,
appointmentOpacity: 0.7,
showLegend: true,
ready: function () {
$(“#scheduler”).jqxScheduler(‘ensureAppointmentVisible’, ‘id1’);
},
resources:
{
colorScheme: “scheme05”,
dataField: “calendar”,
source: new $.jqx.dataAdapter(source)
},
appointmentDataFields:
{
from: “start”,
to: “end”,
id: “id”,
description: “description”,
location: “place”,
subject: “subject”,
resourceId: “calendar”
},
views:
[
‘dayView’,
‘weekView’,
‘monthView’
]
});
});

I tried this example in fiddler loading appointments for only one day then page goes unresponsive.

[TodorParticipant]

Hello balachandra,

jqxScheduler is a complex widget with many nested elements which should be rendered. When we multiply that by 10000 it is normal and expected to have performance issues.

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[Author]

Posts