problem configuring scheduler

4 posts, 0 answers
  1. Jack
    Jack avatar
    2 posts
    Member since:
    Oct 2013

    Posted 04 May 2014 Link to this post

    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}








  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 07 May 2014 Link to this post

    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.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Jack
    Jack avatar
    2 posts
    Member since:
    Oct 2013

    Posted 07 May 2014 in reply to Alexander Popov Link to this post

    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   
  5. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 09 May 2014 Link to this post

    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.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready