New to Kendo UI for jQuery? Download free 30-day trial

Show All-Day Scheduler Events Only

Environment

Product Progress® Kendo UI® Scheduler for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript

Description

How can I show only all-day events in the Kendo UI for jQuery Scheduler?

Solution

The following example demonstrates how to achieve the desired scenario.

    <div id="example" class="k-content">
        <div id="scheduler"></div>
    </div>
    <script>
        $(function() {
            var date = new Date();
            var addDays = kendo.date.addDays;
            $("#scheduler").kendoScheduler({
                eventHeight: 40,
                //set major tick to full day
                //and leave the default startTime/endTime
                majorTick: 1440,
                //show only one minor tick
                minorTickCount: 1,
                majorTimeHeaderTemplate: "",
                views: [
                    "timelineWeek",
                    "timelineWorkWeek",
                    "timeline"
                ],
                timezone: "Etc/UTC",
                dataBound: function(e) {
                    //hide the times row from the date/time header:
                    var view = this.view();
                    view.datesHeader.find("tr:last").prev().hide();
                    view.timesHeader.find("tr:last").prev().hide();
                },
                resources: [{
                    field: "roomId",
                    name: "Rooms",
                    dataSource: [{
                        text: "Meeting Room 101",
                        value: 1,
                        color: "#6eb3fa"
                    }, {
                        text: "Meeting Room 201",
                        value: 2,
                        color: "#f58a8a"
                    }],
                    title: "Room"
                }, {
                    field: "attendees",
                    name: "Attendees",
                    dataSource: [{
                        text: "Alex",
                        value: 1,
                        color: "#f8a398"
                    }, {
                        text: "Bob",
                        value: 2,
                        color: "#51a0ed"
                    }, {
                        text: "Charlie",
                        value: 3,
                        color: "#56ca85"
                    }],
                    multiple: true,
                    title: "Attendees"
                }],
                dataSource: {
                    data: [
                        //sample data:
                        {
                            MeetingID: 1,
                            Start: date,
                            End: date,
                            Title: "Team building",
                            IsAllDay: true,
                            RoomID: 1,
                            Attendees: [1, 2, 3]
                        }, {
                            MeetingID: 2,
                            Start: addDays(date, 1),
                            End: addDays(date, 1),
                            Title: "Meeting with Alex",
                            IsAllDay: true,
                            RoomID: 2,
                            Attendees: [1]
                        }, {
                            MeetingID: 3,
                            Start: addDays(date, 2),
                            End: addDays(date, 2),
                            Title: "Meeting with Charlie",
                            IsAllDay: true,
                            RoomID: 2,
                            Attendees: [3]
                        }
                    ],
                    schema: {
                        model: {
                            id: "meetingID",
                            fields: {
                                meetingID: {
                                    from: "MeetingID",
                                    type: "number"
                                },
                                title: {
                                    from: "Title",
                                    defaultValue: "No title",
                                    validation: {
                                        required: true
                                    }
                                },
                                start: {
                                    type: "date",
                                    from: "Start"
                                },
                                end: {
                                    type: "date",
                                    from: "End"
                                },
                                roomId: {
                                    from: "RoomID",
                                    nullable: true
                                },
                                attendees: {
                                    from: "Attendees",
                                    nullable: true
                                },
                                isAllDay: {
                                    type: "boolean",
                                    from: "IsAllDay"
                                }
                            }
                        }
                    }
                }
            });
        });
    </script>

See Also

In this article