Custom Headers...

Scheduler ASP.NET MVC
#1

Adding Custom Headers with 3 status:

Admin Posted (Studio Class)
Teacher Posted - Not booked (Available)
Teacher Poster - Booked (Booked)

So implemented code as per your information in your Docs section. Added the code into the site, now the site is running VERY slow. Code has been placed into dhtmlxscheduler.js

There are two icons - a Green checkmark and a red “X” icon. Both are 1k each, I’ve tried with and without the icons and code runs slow either way, so its not the icons causing the issue.

Here is code:

       scheduler.templates.event_header = function (start, end, ev) {
                var headerText = "";
                jQuery.ajax({
                    url: "/Home/CheckBookingForHeader",
                    type: "POST",
                    data: { start: start.toUTCString(), end: end.toUTCString(), "roomid": ev.room_id },
                    async: false,
                    success: function (data) {
                        // alert(data);
                        if (data == "Admin") {
                            headerText = "<b style='color:white'>Studio Class</b>";
                        }
                        if (data == "True") {
                            headerText = "<img src=/images/red-x-icon.gif style='float: left; width: 12px; margin-left: 30%;'></img><b style='color:red;float:left;'>Booked</b>";
                            //alert(headerText);
                            //headerText = "<b style='color:red'>Booked</b>";
                            //alert(headerText);
                        }
                        if (data == "False") {
                            headerText = "<img src=/images/greencheckmark.gif style='float: left; width: 12px; margin-left: 30%;'><b style='color:green;float:left;'>Available</b>";
                            //alert(headerText);
                            //headerText = "<b style='color:green'>Available</b>";
                            //alert(headerText);
                        }

                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        headerText = "<b style='color:green'>Available</b>";
                    }

                });

                //alert(headerText);
                return headerText;

            };
#2

Hello,
your code sends synchronous request each time event is being rendered. It should halt rendering of your scheduler for a couple of seconds, depending on number events displayed.
Try loading all data required for displaying calendar data in one request.
For example you can load data from visible area from this event
docs.dhtmlx.com/scheduler/api__s … event.html

#3

We actually added a status field to the table and then altered the header to load in the status variable just like it loads in the time, text and room ID fields. Has no performance hit at all.

When we change the event from normal to read-only we change the status field from an available event to a studio class and when a class is booked we change the status from available to booked.

We aren’t able to do different colors like green or red, but at least we are able to change the headers and set them as bold so its enough to make them stand out.

#4

Hi,
please provide a full demo. All I can tell from the code above - is that the performance problem seems to be related to excesive amount of sync ajax requests. If that is not the case, we’ll need some more info in order to investigate the issue

#5

Hi,

Applied fix exactly as you suggested and it completely corrected performance issue, thank you!

:smiley: