How to load Scheduler 'values' in kendo jQuery

[Kasper]

Hey Sup

Iam playing around with the scheduler from Kendo UI - and the scheduler is working fine atm. 
but but.. Iam trying to use some from the API demo at. 
API Demo

I have a html 'tool bar' as 
<div class="schedulerHeader">
    <p>
        <label>Current Date:</label><input id="currentDate" />
    </p>
    <p>
        <label>Current View:</label>
        <select id="views">
            <option value="agenda">Agenda</option>
            <option value="day">Day</option>
            <option value="month">Month</option>
            <option value="week">Week</option>
            <option value="workWeek">Work Week</option>
        </select>
    </p>
</div>
and javascript:
<script type="text/javascript">
    $(function () {
        var scheduler = $("#myScheduler").data("kendoScheduler");

        $("#currentDate").kendoDatePicker({
            value: new Date("2013/12/24"),
            change: function () {
                scheduler.date(this.value());
            }
        });


        $("#views").kendoDropDownList({
            value: scheduler.view(),
            change: function () {
                scheduler.view(this.value());
            }
        });

    });
</script>
all on in the same view as my scheduler, where I can change the view and date from the 'toolbar' hurra. 
but on site load the $("x").kendoDropDownList({ value: scheduler.view()...  is not set. I think it because that the scheduler wrapper isnt done loading. so the schedulder object in my js is 'null' when it load.
How should I handle this ? or how are you doing it in your demo, I am looking at the example project, but cant see a clear answer.

yeah I can use a timer... but no thanks :) 

- Kasper 

[Atanas Korchev]

Hello Kasper,

You should initialize the scheduler before the dropdownlists and then the reference will not be null. This is how we are doing it in our demo:

<script>
$(function() {
    $("#scheduler").kendoScheduler({ /* options */ });

     var scheduler = $("#scheduler").data("kendoScheduler");

    $("#date").kendoDatePicker({
        value: new Date("2013/6/13"),
        change: function() {
            scheduler.date(this.value());
        }
    });

    $("#views").kendoDropDownList({
        value: scheduler.view().name,
        change: function() {
            scheduler.view(this.value());
        }
    });

Regards,
Atanas Korchev
Telerik