This is a migrated thread and some comments may be shown as answers.

Scheduler Month Rendering Issue

5 Answers 149 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
grant
Top achievements
Rank 1
grant asked on 01 Oct 2015, 08:16 PM

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",
    },
    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

5 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 05 Oct 2015, 08:28 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
grant
Top achievements
Rank 1
answered on 05 Oct 2015, 09:29 PM

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

0
Vladimir Iliev
Telerik team
answered on 07 Oct 2015, 08:12 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
grant
Top achievements
Rank 1
answered on 08 Oct 2015, 02:43 PM

Hi Vladimir,

 

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

 

Thanks,

Jongbeom

0
Vladimir Iliev
Telerik team
answered on 09 Oct 2015, 09:53 AM
Hi,

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

Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Scheduler
Asked by
grant
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
grant
Top achievements
Rank 1
Share this question
or