[Solved] Scheduler Month Rendering Issue

[grant]

Hi,

 

I have the following code for a complex scheduler. When I switch to the month view, it randomly changes the position of the first column (grouping column) left, middle or right. Is there any solution to fix this rendering issue? The first attached image, "scheduler_0.png", is normal. The rest of attached images are for this rendering issue. Any ideas?

 

window.schema = {
    model: {
        id: "id",
        fields: {
            id: { from: "id", type: "number" },
            title: { from: "ev1_title", defaultValue: "", validation: { required: true } },
            description: { from: "ev1_desc" },
            isAllDay: { from: "ev1_is_all_day", type: "boolean" },
            startTimezone: { from: "ev1_start_timezone" },
            start: { from: "ev1_start", type: "date" },
            endTimezone: { from: "ev1_end_timezone" },
            end: { from: "ev1_end", type: "date" },
            recurrenceId: { from: "ev1_recurring" },
            recurrenceRule: { from: "ev1_recurring_rule" },
            recurrenceException: { from: "ev1_recurring_exception" },
            ev1_status: { from: "ev1_status", },
            ev1_type: { from: "ev1_type", },
            jt1_id: { from: "jt1_id", },
            ev1_event_resource_types: { from: "ev1_event_resource_types", nullable: true },
            ev1_event_resources: { from: "ev1_event_resources", nullable: true },
            ev1_event_users: { from: "ev1_event_users", nullable: true },
            ev1_urgent: { from: "ev1_urgent", nullable: true },
            ev1_date_count: { from: "ev1_date_count", nullable: true },
        },
    },
};
window.parameterMap = function (options, operation) {
    if (operation !== "read" && options.models) {
        return { models: kendo.stringify(options.models) };
    }
};
var timelineMonth = kendo.ui.TimelineView.extend({
    options: {
        selectedDateFormat: "{0:D} - {1:D}"
    },
    name: "timelineMonth",
    calculateDateRange: function() {
        //create a range of dates to be shown within the view
        var selectedDate = this.options.date;
        var start = kendo.date.dayOfWeek(selectedDate, this.calendarInfo().firstDay, -1);
        var dates = [];
        for (var idx=0, length=25; idx<length; idx++) {
            dates.push(start);
            start = kendo.date.nextDay(start);
        }
        this._render(dates);
    }
});
$("#scheduler").kendoScheduler({
    //timezone: "America/Chicago",
    date: new Date("2015/10/01"),
    startTime: new Date("2015/10/01 00:00 AM"),
    //endTime: new Date("2015/10/01 00:00 AM"),
    workDayStart: new Date("2015/10/01 00:00 AM"),
    workDayEnd: new Date("2015/10/01 11:59:59 PM"),
    currentTimeMarker: {
        useLocalTimezone: true,
    },
    showWorkHours: false,
    //selectable: true,
    majorTick: 60,
    eventHeight: 20,
    toolbar: [
        "pdf",
    ],
    pdf: {
        fileName: "JobSchedules.pdf",
        proxyURL: "http://demos.telerik.com/kendo-ui/service/export"
    },
    views: [
        {
            type: "timeline",
            title: "Day",
            majorTick: 60,
            columnWidth: 20,
            eventHeight: 12,
            startTime: new Date("2015/10/01 00:00 AM"),
            editable: {
                create: false,
                update: false,
                destroy: false,
                move: true,
                resize: true,
            },
            eventTemplate: $("#event-template").html(),
        },
        {
            type: "timelineWeek",
            title: "Week",
            majorTick: 720,
            columnWidth: 15,
            eventHeight: 12,
            startTime: new Date("2015/10/01 00:00 AM"),
            editable: {
                create: false,
                update: false,
                destroy: false,
                move: true,
                resize: true,
            },
            eventTemplate: $("#event-template").html(),
        },
        {
            type: timelineMonth,
            name: "timelineMonth",
            title: "Month",
            selected: true,
            majorTick: 1440,
            columnWidth: 10,
            eventHeight: 12,
            startTime: new Date("2015/10/01 00:00 AM"),
            editable: {
                create: false,
                update: false,
                destroy: false,
                move: true,
                resize: true,
            },
            eventTemplate: $("#event-template").html(),
            dateHeaderTemplate: kendo.template('<strong>#=kendo.toString(date,"MMM")#<br>#=kendo.toString(date,"dd")#</strong>'),
        }
    ],
    group: {
        resources: ["Jobs"],
        orientation: "vertical"
    },
    resources: [
        {
            title: "Status",
            field: "ev1_status",
            dataTextField: "text",
            dataValueField: "value",
            name: "EventStatus",
            multiple: false,
            dataSource: [
                { text: "Tentative", title: "Tentative", value: 1, color: "#808080" },
                { text: "Active", title: "Active", value: 2, color: "#008000" },
                { text: "In Progress", title: "In Progress", value: 3, color: "#008000" },
                { text: "Pending", title: "Pending", value: 4, color: "#808080" },
                { text: "Completed", title: "Completed", value: 5, color: "#000000" },
            ],
        },
        {
            title: "Type",
            field: "ev1_type",
            dataTextField: "text",
            dataValueField: "value",
            name: "EventType",
            multiple: false,
            dataSource: [
                { text: "Activity", title: "Activity", value: 1, color: "#008000" },
                { text: "Activity", title: "Activity", value: 2, color: "#d9534f" },
                { text: "Individual", title: "Individual", value: 0, color: "#39B3D7" },
            ],
        },
        {
            title: "Jobs",
            field: "jt1_id",
            dataTextField: "text",
            dataValueField: "value",
            name: "Jobs",
            multiple: false,
            dataSource: [{"text":"C14050 - Walmart Blaine\/Ramsey","value":"51","color":"#3C763D","title":"Walmart Blaine\/Ramsey","code":"C14050"},​...],
        },
        {
            title: "Trucking",
            field: "ev1_event_resource_types",
            dataTextField: "text",
            dataValueField: "value",
            name: "ResourceTypes",
            multiple: true,
            dataSource: [{"text":"Box Trailer","value":"32","color":"","title":"Box Trailer","code":"Box Trailer"},​...],
        },
        {
            title: "Equipment",
            field: "ev1_event_resources",
            dataTextField: "text",
            dataValueField: "value",
            name: "Resources",
            multiple: true,
            dataSource: [{"text":"1 Foot Bucket","value":"68","color":"#3C763D","title":"1 Foot Bucket - 1 Foot Bucket","code":"1 Foot Bucket"},​...],
        },
        {
            title: "Employee",
            field: "ev1_event_users",
            dataTextField: "text",
            dataValueField: "value",
            name: "Employees",
            multiple: true,
            dataSource: [{"text":"[FMAN] Brian H","value":"53","title":"[Foreman] Brian H"},​...],
        },
    ],
    dataSource: {
        batch: false,
        transport: {
            read: function(options) {
                $("body").append('<div class="spinner-modal row-centered"><div class="col-centered"><i class="fa fa-spinner fa-2x faa-spin animated"></i></div></div>');
                var view = $("#scheduler").data("kendoScheduler").view();
                $.ajax({
                    url: "http://localhost/valleyrich/scheduler/read",
                    dataType: "jsonp",
                    data: {
                        view: view.title=="Day"?"timeline":(view.title=="Week"?"timelineWeek":(view.title=="Month"?"timelineMonth":"agenda")),
                        start: kendo.format("{0:d}", view.startDate()),
                        end: kendo.format("{0:d}", view.endDate()),
                        active: 2,
                        eventType: 3,
                        users: [],
                        jobTickets: $("#s2id_Scheduler_jobTickets").select2("val"),
                    },
                    success: function(result) {
                        options.success(result);
                        $(".spinner-modal").remove();
                    },
                    error: function(result) {
                        options.error(result);
                        $(".spinner-modal").remove();
                    }
                });
            },
            parameterMap: window.parameterMap,
        },
        requestEnd: function(e) {
            if (e.response && e.response.length > 0) {
                $.each(e.response, function(key, event) {
                    event.ev1_start = new Date(event.ev1_start);
                    event.ev1_end = new Date(event.ev1_end);
                });
            }
        },
        schema: window.schema,
    },
    dataBound: function(e) {
        dropTargetArea();
        $("#scheduler .k-event").each(function() {
            $(this).tooltip({
                title: $.trim($(this).children(":nth-child(2)").attr("data-tooltip")),
                html: true,
                container: "body",
                placement: "bottom"
            });
        });
        $(".schedule-edit-btn").tooltip({
            title: "Edit",
            html: true,
            container: "body",
            placement: "top"
        });
        $("#scheduler .k-event-content[data-event-type='0']").parent().addClass("event-type-individual");
        $("#scheduler .k-event-content[data-event-type='2']").parent().addClass("event-type-locate");
        var view = $("#scheduler").data("kendoScheduler").view();
        if (view.title == "Day" || view.title == "timeline") {
            //
        } else if (view.title == "Week" || view.title == "timelineWeek") {
            //
        } else if (view.title == "Month" || view.title == "timelineMonth") {
            window.slots = {};
            view.datesHeader.find("tr:first th").each(function(index) {
                var text = $(this).children().first().text();
                window.slots[index] = {
                    date: text.substring(text.length-2, text.length),
                    x: $(this).offset().left,
                    width: $(this).width()
                        + parseFloat($(this).css("border-left-width"))
                        //+ parseFloat($(this).css("border-right-width"))
                        + parseFloat($(this).css("padding-left")) +
                        + parseFloat($(this).css("padding-right")),
                };
            });
            $("#scheduler .k-event-content[data-event-type='2'][data-urgent='1']").each(function() {
                $(this).prepend('<i class="fa-locate-warning fa fa-warning fa-lg faa-flash animated"></i>');
                window.locateX = $(this).parent().offset().left;
                window.locateIndex = 0;
                $.each(window.slots, function(index, slot) {
                    if (slot.x <= window.locateX && window.locateX <= slot.x+slot.width) {
                        window.locateIndex = parseInt(index);
                    }
                });

                var tick = 0;
                var locateIndex = window.locateIndex;
                var locateWidth = 0;
                var totalLocateWidth = $(this).parent().width();
                var locateContent = '<div class="k-event-locate">';
                while(locateWidth <= totalLocateWidth && tick < 14 && window.slots[locateIndex] !== undefined) {
                    var width = window.slots[locateIndex].width;
                    if (locateWidth+width > totalLocateWidth) {
                        width = totalLocateWidth - locateWidth;
                    }
                    if (tick < 11)
                        locateContent += '<div class="k-event-locate-slot" style="width: '+width+'px;"></div>';
                    else
                        locateContent += '<div class="k-event-locate-slot" style="width: '+width+'px;"><i class="fa-locate-warning fa fa-warning fa-lg faa-flash animated"></i></div>';
                    locateWidth += width;
                    locateIndex++;
                    tick++;
                }
                locateContent += '</div>';
                $(this).parent().append(locateContent);
            });
        }
        $(".spinner-modal").remove();
    },
    navigate: function(e) {
        $(".tooltip").remove();
        var dataSource = new kendo.data.SchedulerDataSource({
            batch: false,
            transport: {
                read: function(options) {
                    $("body").append('<div class="spinner-modal row-centered"><div class="col-centered"><i class="fa fa-spinner fa-2x faa-spin animated"></i></div></div>');
                    var date = e.date;
                    //if (e.action == "previous") {
                    //    date.setDate(date.getDate()-27);
                    //}
                    $.ajax({
                        url: "http://localhost/valleyrich/scheduler/read",
                        dataType: "jsonp",
                        data: {
                            //view: e.view,
                            view: e.view=="Day"?"timeline":(e.view=="Week"?"timelineWeek":(e.view=="Month"?"timelineMonth":"agenda")),
                            action: e.action,
                            start: kendo.format("{0:d}", e.date),
                            end: kendo.format("{0:d}", e.date),
                            active: 2,
                            eventType: 3,
                            users: [],
                            jobTickets: $("#s2id_Scheduler_jobTickets").select2("val"),
                        },
                        success: function(result) {
                            options.success(result);
                            $(".spinner-modal").remove();
                        },
                        error: function(result) {
                            options.error(result);
                            $(".spinner-modal").remove();
                        }
                    });
                },
                parameterMap: window.parameterMap,
            },
            requestEnd: function(e) {
                if (e.response && e.response.length > 0) {
                    $.each(e.response, function(key, event) {
                        event.ev1_start = new Date(event.ev1_start);
                        event.ev1_end = new Date(event.ev1_end);
                    });
                }
            },
            schema: window.schema,
        });
        $("#scheduler").data("kendoScheduler").setDataSource(dataSource);
    },
    edit: function(e) {
        e.preventDefault();
        $(".tooltip").remove();
        window.editEvent(e.event.id, e.event.ev1_type, e.event.ev1_status);
    },
});

 

Thank you,

JB

[Vladimir Iliev]

Hello,

I tried to reproduce the problem locally but to no avail – everything is working as expected on our side using the provided example code. Could you please provide runable project where the issue is reproduced? This would help us pinpoint the exact reason for this behavior.

Regards,
Vladimir Iliev
Telerik

 

 

[grant]

Hi Vladimir,

 

Thank you for your feedback. It might take a long time for me to prepare a working code on your website. Is it possible to email a link with a test account to you? It's not secure to open our project on this public thread. You can post any feedback here for other users who have the same issue, though.

 

Thank you again,

Jongbeom

[Vladimir Iliev]

Hello Jongbeom,

Please note that it would be best if you can isolate the issue in example project (not sending your original one) - for more information on the matter you can check this blog post. 

Regards,
Vladimir Iliev
Telerik

 

 

[grant]

Hi Vladimir,

 

The link is broken. Can you repost? I'll prepare a test page for you soon.

 

Thanks,

Jongbeom

[Vladimir Iliev]

Hi,

Apologize for posting broken link - here is the correct one:

• Get most of Kendo UI support

Regards,
Vladimir Iliev
Telerik