Edit this page

Add Footer to Month and Agenda Views in Scheduler

Environment

Product Progress Kendo UI Scheduler

Description

How can I add a footer in the month and agenda views of the Scheduler?

Suggested Workarounds

The Kendo UI Scheduler does not provide a built-in solution for achieving this behavior. However, you can still work around the issue.

Add a footer by using jQuery in the dataBound event handler of the Scheduler. The following example demonstrates how to apply this approach.

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
    date: new Date("2013/6/6"),
    views: ["day", "month", "agenda"],
    allDaySlot: false,
    dataSource: [
        {
            id: 1,
            start: new Date("2013/6/6 08:00 AM"),
            end: new Date("2013/6/6 09:00 AM"),
            title: "Interview"
        }
    ],
    dataBound: function(e) {
        $(".custom-footer").remove();
        if(e.sender.view().name == "agenda" || e.sender.view().name == "month") {
            $(".k-scheduler").append('<div class="k-header k-scheduler-footer custom-footer"><input type="button" class="k-button" value="MyButton" /></div>');
        }
    }
});
</script>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy