Kendo UI Scheduler

by Loan Burger

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<div id="example">   
    <div id="scheduler"></div>
</div>

CSS

.k-nav-current > .k-link span + span {
    max-width: 200px;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    vertical-align: top;
}

JavaScript

$(function() {
  var webinarSchedule = [//Date are in utc -5:00
            {
               title: "Part 1 The Golden Rule",
                shortName: "1) The Golden Rule ",
                presenter: "Bill Preston",
                description: "A great event",
                synopsis: "Learn stuff",
                seriesNote: "The first of a 4-part series.",
                registration: "https://attendee.gotowebinar.com/register/3782113333237861889",
       start: new Date("2015-01-24T13:00:00.000-05:00"),
                end: new Date("2015-01-24T13:20:00.000-05:00")
            }];
  
    $("#scheduler").kendoScheduler({
        date: new Date("2015/1/24"),    
  currentTimeMarker: {
    useLocalTimezone: true
  },
        height: 900,
        editable: false,                        
        views: [                
            {
                type: "month",
                selected: true,
                eventHeight: 50,
                eventTemplate: $("#event-template-month").html(),
            },{
                type: "agenda",
                eventHeight: 50,
                eventTemplate: $("#event-template-sched").html(),
            }
        ],
        dataSource: webinarSchedule
    });



});