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

Scheduler initialization problems

3 Answers 140 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
100%
Top achievements
Rank 1
100% asked on 26 Jan 2014, 05:27 PM
I have problems having the scheduler widget initialize correctly.

When it shows up, I have to go forward one day and then backward one day to have it render as it should.

Why?

Because of problems with posting images on this forum, I had to create a stack overflow posting, if you are interested in screenshots of the rendition, look here.

The source code for index.html comes here (it is probably looking better on stack overflow):

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.web.js"></script>
    <script src="js/kendo.mobile.js"></script>
    
    <script>
        var app = new kendo.mobile.Application(document.body,
        {
            skin: 'flat'
        });
        
        window.kendoMobileApplication = app;
        
        $(function()
        {
            init_scheduler();
            change_view("#vHome");
        });

        function change_view(view)
        {
            app.navigate(view);
        }

        function init_scheduler()
        {
            $("#wScheduler").kendoScheduler({
                date: new Date("2013/6/13"),
                startTime: new Date("2013/6/13 07:00 AM"),
                height: 600,
                views: [
                        "day",
                        { type: "workWeek", selected: true },
                        "week",
                        "month",
                        "agenda"
                ],
                timezone: "Etc/UTC",
                dataSource: {
                    batch: true,
                    transport: {
                        read: {
                            url: "http://demos.kendoui.com/service/tasks",
                            dataType: "jsonp"
                        },
                        update: {
                            url: "http://demos.kendoui.com/service/tasks/update",
                            dataType: "jsonp"
                        },
                        create: {
                            url: "http://demos.kendoui.com/service/tasks/create",
                            dataType: "jsonp"
                        },
                        destroy: {
                            url: "http://demos.kendoui.com/service/tasks/destroy",
                            dataType: "jsonp"
                        },
                        parameterMap: function(options, operation)
                        {
                            if (operation !== "read" && options.models)
                            {
                                return { models: kendo.stringify(options.models) };
                            }
                        }
                    },
                    schema: {
                        model: {
                            id: "taskId",
                            fields: {
                                taskId: { from: "TaskID", type: "number" },
                                title: { from: "Title", defaultValue: "No title", validation: { required: true } },
                                start: { type: "date", from: "Start" },
                                end: { type: "date", from: "End" },
                                startTimezone: { from: "StartTimezone" },
                                endTimezone: { from: "EndTimezone" },
                                description: { from: "Description" },
                                recurrenceId: { from: "RecurrenceID" },
                                recurrenceRule: { from: "RecurrenceRule" },
                                recurrenceException: { from: "RecurrenceException" },
                                ownerId: { from: "OwnerID", defaultValue: 1 },
                                isAllDay: { type: "boolean", from: "IsAllDay" }
                            }
                        }
                    },
                    filter: {
                        logic: "or",
                        filters: [
                                { field: "ownerId", operator: "eq", value: 1 },
                                { field: "ownerId", operator: "eq", value: 2 }
                        ]
                    }
                },
                resources: [
                        {
                            field: "ownerId",
                            title: "Owner",
                            dataSource: [
                                    { text: "Alex", value: 1, color: "#f8a398" },
                                    { text: "Bob", value: 2, color: "#51a0ed" },
                                    { text: "Charlie", value: 3, color: "#56ca85" }
                            ]
                        }
                ]
            });
        }

        function on_goto_scheduler_clicked()
        {
            change_view('#vCalendar');
        }
    </script>

    <link href="css/kendo.mobile.flat.css" rel="stylesheet" />
    <link href="css/kendo.common.css" rel="stylesheet" />
    <link href="css/kendo.default.css" rel="stylesheet" />
    <style>
        [href*=index], #back-button
        {
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div data-role="view" id="vHome">
        <div class="margin-box">
            <span data-role="button" data-click="on_goto_scheduler_clicked">show scheduler</span>
        </div>
    </div>
    
    <div data-role="view" id="vCalendar">
        <div id="wScheduler"></div>
    </div>
</body>
</html>

3 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 27 Jan 2014, 03:11 PM
Hi,

The behavior you have described is caused by the fact that the scheduler widget is not visible during its initialization and it size cannot be adjusted correctly. Therefore, you will need to manually refresh the widget when the view is displayed. 

<div data-role="view" id="vCalendar" data-show="refreshScheduler">
     <div id="wScheduler"></div>
 </div>
 
<script>
    function refreshScheduler() {
       $("#wScheduler").data("kendoScheduler").resize();
     }
</script>


Regards,
Rosen
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
100%
Top achievements
Rank 1
answered on 27 Jan 2014, 04:09 PM
I tried this:

    <div data-role="view" id="vCalendar" data-layout="drawer-layout" data-title="Kalender" >
        <div id="wScheduler" data-init="init_scheduler" data-show="refreshScheduler"></div>
    </div>

but the events do not trigger.

Then I put the attributes data-init and data-show in the parent view.
    <div data-role="view" id="vCalendar" data-layout="drawer-layout" data-title="Kalender" data-init="init_scheduler" data-show="refreshScheduler">
        <div id="wScheduler"></div>
    </div>

That was triggering the events init and then refresh almost always.
When those events were triggered, the scheduler got the right look.
Some times however, only the show event occurs in case the scheduler will still be broken.
In other words, problem not solved yet.
0
Rosen
Telerik team
answered on 28 Jan 2014, 01:22 PM
Hi,

You may try changing the resize method call with refresh instead and see if this helps.

function refreshScheduler() {
  $("#wScheduler").data("kendoScheduler").refresh();
}


Regards,
Rosen
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
100%
Top achievements
Rank 1
Answers by
Rosen
Telerik team
100%
Top achievements
Rank 1
Share this question
or