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

problem configuring scheduler

3 Answers 102 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Jack
Top achievements
Rank 1
Jack asked on 04 May 2014, 09:38 AM
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}








3 Answers, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 07 May 2014, 06:44 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Jack
Top achievements
Rank 1
answered on 07 May 2014, 08:56 AM
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   
0
Alexander Popov
Telerik team
answered on 09 May 2014, 09:08 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Scheduler
Asked by
Jack
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Jack
Top achievements
Rank 1
Share this question
or