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

SCHEDULER How can i find error IN THIS PIECE OF COD

1 Answer 47 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Gridi
Top achievements
Rank 1
Gridi asked on 15 Jul 2014, 08:32 AM
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>

1 Answer, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 16 Jul 2014, 07:37 AM
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!
 
Tags
Scheduler
Asked by
Gridi
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Share this question
or