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

need to add scheduler into html but cant get style/formatting to work

1 Answer 55 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Alana
Top achievements
Rank 1
Alana asked on 24 Jul 2013, 09:14 PM
I am trying to add this scheduler code into a html project i am working on. 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>
<body>
    <div id="example" class="k-content">
    <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 id="scheduler"></div>
</div>
<script>
$(function() {
    $("#scheduler").kendoScheduler({
        date: new Date("2013/6/13"),
        startTime: new Date("2013/6/13 07:00 AM"),
        height: 600,
        views: [
        "day",
            { type: "week", selected: true },
            "month",
            "agenda"
        ],
        timezone: "Etc/UTC",
        dataSource: {
            batch: true,
            transport: {
                read: {
                    url: "http://demos.kendoui.com/service/tasks",
                    dataType: "jsonp"
                },
                update: {
                    url: "http://demos.kendoui.com/service/tasks/update",
                    dataType: "jsonp"
                },
                create: {
                    url: "http://demos.kendoui.com/service/tasks/create",
                    dataType: "jsonp"
                },
                destroy: {
                    url: "http://demos.kendoui.com/service/tasks/destroy",
                    dataType: "jsonp"
                },
                parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                        return {models: kendo.stringify(options.models)};
                    }
                }
            },
            schema: {
                model: {
                    id: "taskId",
                    fields: {
                        taskId: { from: "TaskID", type: "number" },
                        title: { from: "Title", defaultValue: "No title", validation: { required: true } },
                        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" },
                        ownerId: { from: "OwnerID", defaultValue: 1 },
                        isAllDay: { type: "boolean", from: "IsAllDay" }
                    }
                }
            },
            filter: {
                logic: "or",
                filters: [
                    { field: "ownerId", operator: "eq", value: 1 },
                    { field: "ownerId", operator: "eq", value: 2 }
                ]
            }
        },
        resources: [
            {
                field: "ownerId",
                title: "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 filter = {
            logic: "or",
            filters: $.map(checked, function(value) {
                return {
                    operator: "eq",
                    field: "ownerId",
                    value: value
                };
            })
        };

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

        scheduler.dataSource.filter(filter);
    });
});
</script>
<style scoped>
#people {
    background: url('../../content/web/scheduler/team-schedule.png') transparent no-repeat;
    height: 115px;
    position: relative;
}
#alex {
    position: absolute;
    left: 404px;
    top: 81px;
}
#bob {
    position: absolute;
    left: 519px;
    top: 81px;
}
#charlie {
    position: absolute;
    left: 634px;
    top: 81px;
}
</style>


</body>
</html>



unfortunately all I see when I add in the code are 3 check boxes. for some reason the style and formatting of the scheduler arent showing up or linking to my page. Can I have two different style sheets in one html file? I copied the example code exactly but still no luck. i am really new to all of this but would really appreciate any help or advice on why its not showing up. 

thanks so much

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 25 Jul 2013, 03:01 PM
Hello Alana,

The Scheduler on the provided page works correctly. In case you are referring to the missing image with the three people, it depends on the particular demo's HTML and CSS. This image is not part of the default Scheduler styling.

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


In addition, please avoid posting duplicate forum threads with the same question. Thank you.

Regards,
Dimo
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
Alana
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or