SCHEDULER How can i find error IN THIS PIECE OF COD

2 posts, 0 answers
  1. Gridi
    Gridi avatar
    2 posts
    Member since:
    Jun 2014

    Posted 15 Jul 2014 Link to this post

    Hello !
    Now i am exploring Kendo UI, especially scheduler. The scheduler do not display on the browser. How can i fix this error?
    Here is the source code:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Restrictions</title>
        <meta charset="utf-8">
        <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
        <link href="../../styles/kendo.common.min.css" rel="stylesheet">
        <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
        <link href="../../styles/kendo.default.min.css" rel="stylesheet">
        <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet">
        <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet">
        <script src="../../js/jquery.min.js"></script>
        <script src="../../js/kendo.all.min.js"></script>
        <script src="../content/shared/js/console.js"></script>
        <script>
            
        </script>
        
        
    </head>
    <body>
        <div id="example" class="k-content">
        <div id="scheduler">
    <div id="people">
                <input checked type="checkbox" id="alex" value="1">
                <input checked type="checkbox" id="bob" value="2">
                <input type="checkbox" id="charlie" value="3">
            </div>
    </div>
    </div>

    <script id="event-template" type="text/x-kendo-template">
        <div class="movie-template">
            
            <p>#: kendo.toString(start, "hh:mm") # - #: kendo.toString(end, "hh:mm") #</p>
            <h3>#: title #</h3>
            
        </div>
    </script>

    <script>
    $(function() {
        $("#scheduler").kendoScheduler({
            date: new Date("2013/6/13"),
            startTime: new Date("2013/6/13 07:00 AM"),
            height: 600,
            allDaySlot: false,
            views: ["day","week","month","agenda"],
    eventTemplate: $("#event-template").html(),
            dataSource: {
                data: [
                    {
                        meetingID: 1,
                        title: "Call Charlie about the project",
                        start: new Date("2013/6/13 10:30"),
                        end: new Date("2013/6/13 11:30"),
    ownerId:2
                    },
                    {
                        meetingID: 2,
                        title: "Performance review",
                        start: new Date("2013/6/13 9:00"),
                        end: new Date("2013/6/13 12:30"),
                       ownerId:1
                        
                    },
                    {
                        meetingID: 3,
                        title: "HR Lecture",
                        start: new Date("2013/6/13 13:00"),
                        end: new Date("2013/6/13 14:30")
                       ownerId:2
                    }
                ],
                schema: {
                    model: {
                        id: "meetingID",
                        fields: {
                            meetingID: { type: "number" },
                            title: { defaultValue: "No title", validation: { required: true } },
                            start: { type: "date" },
                            end: { type: "date" },
                            ownerId: { defaultValue: 1 },
                            isAllDay: { type: "boolean" }
                        }
                    }
                }
    },
            filter: {
                    logic: "or",
                    filters: [
                        { field: "ownerId", operator: "eq", value: 1 },
                        { field: "ownerId", operator: "eq", value: 2 }
                    ]
                },
            resources: [
                {
                    field: "ownerId",
                    name: "Owner",
                    dataSource: [
                        { text: "Alex", value: 1, color: "#f8a398" },
                        { text: "Bob", value: 2, color: "#51a0ed" },
                        { text: "Charlie", value: 3, color: "#56ca85" }
                  ]
                }
            ]
        });

        $("#people :checkbox").change(function(e) {
            var checked = $.map($("#people :checked"), function(checkbox) {
                return parseInt($(checkbox).val());
            });

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

            scheduler.dataSource.filter({
                operator: function(task) {
                    return $.inArray(task.ownerId, checked) >= 0;
                }
            });
        });
    });

    </script>

    <style scoped>
        .invalid-slot {
            background: red !important;
            cursor: no-drop;
        }
     .movie-template img {
            float: left;
            margin: 0 8px;
        }
        .movie-template p {
            margin: 5px 0 0;
        }
        .movie-template h3 {
            padding: 0 8px 5px;
            font-size: 12px;
        }
        .movie-template a {
            color: #ffffff;
            font-weight: bold;
            text-decoration: none;
        }
        .k-state-hover .movie-template a,
        .movie-template a:hover {
            color: #000000;
        }
    .k-nav-current > .k-link span + span {
        max-width: 200px;
        display: inline-block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        vertical-align: top;
    }

    #team-schedule {
        background: url('../content/web/scheduler/team-schedule.png') transparent no-repeat;
        height: 115px;
        position: relative;
    }

    #people {
        background: url('../content/web/scheduler/scheduler-people.png') no-repeat;
        width: 345px;
        height: 115px;
        position: absolute;
        right: 0;
    }
    #alex {
        position: absolute;
        left: 4px;
        top: 81px;
    }
    #bob {
        position: absolute;
        left: 119px;
        top: 81px;
    }
    #charlie {
        position: absolute;
        left: 234px;
        top: 81px;
    }
    </style>
    </body>
    </html>
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2194 posts

    Posted 16 Jul 2014 Link to this post

    Hi,

    After checking the provided code it seems that current behavior is related to missed comma after one of the properties in the sample data:

    {
      meetingID: 3,
      title: "HR Lecture",
      start: new Date("2013/6/13 13:00"),
      end: new Date("2013/6/13 14:30"),
      ownerId:2
    }

    Also you can check the updated demo below:
    Regards,
    Vladimir Iliev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top