problem configuring scheduler

[Jack]

Hi,

I am trying to configure a scheduler.

I want to customise each day in the 'month' view, to work with my datasource.
for example: if i want to add a div with the background black or blue then it depends on the field "title" in my datasource etc...

I am having problems configuring my datasource. For some reason I do not see the data returned from the server appearing on my scheduler.

I am tearing out my hair !!!!

Attached it the code I am using for reference.

Please help !!! Where am I going wrong?

Thanks,

Jack.







<script id="editor" type="text/x-kendo-template">


    @*<span class='k-link k-nav-day'>#=kendo.toString(date, 'dd')#</span>*@
    <div>dddd</div>
    <div>#: title #</div>
</script>


<script id="editor2" type="text/x-kendo-template">


    <div>#: title #</div>
<h3>aaaa</h3>
<p>
   <label>Title: <input name="title" /></label>
</p>
<p>
   <label>Start: <input data-role="datetimepicker" name="start" /></label>
</p>
<p>
   <label>Start: <input data-role="datetimepicker" name="end" /></label>
</p>
</script>




<script>
    var tempContent = $("#editor").html();
    var template = kendo.template(tempContent);


    $("#scheduler").kendoScheduler({
            date: new Date(2014, 4, 2, 0, 0, 0, 0),
            startTime: new Date("2014/6/13 00:00 AM"),
            //height: 600,
            views: [
                {
                    type: "day",
                    dateHeaderTemplate: kendo.template("<u>#=kendo.toString(date,'d')#</u>")
                },
                {
                    type: "month",
                    dayTemplate: kendo.template("<span class='k-link k-nav-day'>#=kendo.toString(date, 'dd')#</span><div>aaaa</div>")/*template(template)*/,
                    dayHeaderTemplate: kendo.template("<u>#=kendo.toString(date,'ddd')#</u>")
                    
                }
            ],
            selectable:true,
            timezone: "Etc/UTC",
            //dataSource: [
            //{
            //    id:1,
            //    title: "Fast and furious 6",
            //    image: "../../content/web/scheduler/fast-and-furious.jpg",
            //    imdb: "http://www.imdb.com/title/tt1905041/",
            //    start: new Date("2014/6/13 17:00"),
            //    end: new Date("2014/6/13 18:30")
            //},
            //{
            //    id:2,
            //    title: "The Internship",
            //    image: "../../content/web/scheduler/the-internship.jpg",
            //    imdb: "http://www.imdb.com/title/tt2234155/",
            //    start: new Date("2014/6/14 14:00"),
            //    end: new Date("2014/6/14 15:30")
            //}
            //],
            editable: {
                template: $("#editor2").html()
            },


            dataSource: {
                batch: true,
                transport: {
                    read: {
                        url: "@Url.Action("Read","OmittedDaysScheduler",new { brnEntID=ViewBag.BranchEntityID})",
                        dataType: "jsonp"
                    },
                    update: {
                        url: "@Url.Action("Update","OmittedDaysScheduler")",
                        dataType: "jsonp"


                    },
                    create: {
                        url: "@Url.Action("Create","OmittedDaysScheduler")",
                        dataType: "jsonp"


                    },
                    destroy: {
                        url: "@Url.Action("Destroy","OmittedDaysScheduler")",
                        dataType: "jsonp"


                    },
                    parameterMap: function (options, operation) {
                        if (operation !== "read" && options.models) {
                            return { models: kendo.stringify(options.models) };
                        }
                    }
                },
                schema: {
                    model: {
                        id: { type: "number", from: "ID" },
                        fields: {
                            taskId: {from: "ID", type: "number"},
                            title: { from: "Title", defaultValue: "No title" },
                            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" },
                            isAllDay: { type: "boolean", from: "IsAllDay" }
                        }
                    }
                }
            }
        });
</script>


Here is the server response:

{"Data":[{"ID":6,"Description":null,"End":"\/Date(1396818000000)\/","EndTimezone":"UTC","IsAllDay":false,"RecurrenceException":"excep","RecurrenceRule":"rule","Start":"\/Date(1396818000000)\/","StartTimezone":"UTC","Title":"Number 1","TimeFrom":null,"TimeTo":null},{"ID":3,"Description":null,"End":"\/Date(1396339200000)\/","EndTimezone":"UTC","IsAllDay":false,"RecurrenceException":"excep","RecurrenceRule":"rule","Start":"\/Date(1396332000000)\/","StartTimezone":"UTC","Title":"Number 2","TimeFrom":{"Hours":7,"Minutes":39,"Seconds":0,"Milliseconds":0,"Ticks":275400000000,"Days":0,"TotalDays":0.31875,"TotalHours":7.6499999999999995,"TotalMilliseconds":27540000,"TotalMinutes":459,"TotalSeconds":27540},"TimeTo":{"Hours":9,"Minutes":39,"Seconds":0,"Milliseconds":0,"Ticks":347400000000,"Days":0,"TotalDays":0.40208333333333329,"TotalHours":9.65,"TotalMilliseconds":34740000,"TotalMinutes":579,"TotalSeconds":34740}}],"Total":2,"AggregateResults":null,"Errors":null}

[Alexander Popov]

Hello Jack,

Thank you for the provided code snippets. I reviewed them and noticed that the DataSource is configured to work with JSONP data, however the server is sending regular JSON strings. If that is indeed the case, then would recommend changing the dataType option to JSON and setting the schema.data option to "Data".

Regards,
Alexander Popov
Telerik

 

 

[Jack]

Hi Alexander,

Thanks for the help, that worked.

I am now facing a new problem.

I am trying to customise the daytemplate ( to add buttons,all different designs etc...) for each day in the month view.
For some reason i cant use a logic "if #:title#" expression for example, because i keep on getting the error "not defined". Is it possible to use databinded fields in the daytemplate or only in the eventtemplate?

If yes, then I will need some help understanding how, because I cant figure it out.

Thanks,

Jack   

[Alexander Popov]

Hello again Jack,

This behavior is somewhat expected, because days have no title property as opposed to events. Basically the template gives you access to the members of the related model, so in the eventTemplate that is the event, thus you get access to properties like title, start, end and so on. The dayTemplate however, provides access to only one property and that is the date. Here is a little trick you could use when in doubt - simply print the data object to the browser's console and inspect it. For example: 

$("#scheduler").kendoScheduler({
  eventTemplate: "#console.log(data)#",
  views: [
    {
      type: "month",
      dayTemplate: "#console.log(data)#"
    }
  ],

Regards,
Alexander Popov
Telerik