title: Kendo UI (Scheduler) - Customize Schedule Event alignment
body: <p>I am using Kendo UI (Scheduler) Month view and Day View by using custom Templates.</p>
  
  <p>By default all events are defaulty aligned to Top of the cell. Instead I want to these to be aligned from the bottom of the cell... [<strong>please refer below image</strong>]</p>
  
  <p><strong>PS</strong>: I have tried to control through CSS, by adding <code>.k-event{ top:auto !important}</code> without luck :(</p>
  
  <p><a href="https://i.stack.imgur.com/CKMed.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CKMed.jpg" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Kendo - Scheduler&lt;/title&gt;
  
    &lt;link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css"&gt;
    &lt;link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css"&gt;
    &lt;link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css"&gt;
    &lt;link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
    
  
    &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"&gt;&lt;/script&gt;&lt;/head&gt;
    
    &lt;style type="text/css"&gt;
  .rp-calendar{background: #f6f7f8;border:1px solid #e9e9eb;color:#585858;position: relative;}
  .rp-calendar table{border-collapse:collapse;}
  .rp-calendar .k-scheduler-toolbar{border:0;padding:20px;}
  .rp-calendar .k-scheduler-toolbar .k-scheduler-navigation .k-nav-current,.rp-calendar .k-scheduler-toolbar .k-scheduler-navigation .k-nav-current a{color:#6e6e6e;font-size:26px;}
  .rp-calendar .k-scheduler-toolbar .k-scheduler-navigation .k-nav-current{position:relative;top:3px;}
  .rp-calendar .k-scheduler-toolbar ul li .k-i-calendar{display:none;}
  .rp-calendar .k-scheduler-toolbar .k-scheduler-views .k-state-default,.rp-calendar .k-scheduler-toolbar .k-scheduler-views .k-state-default a{background:transparent !important;}
  .rp-calendar .k-scheduler-toolbar .k-scheduler-views .k-state-default{border: 1px solid #d7d7d7 !important;}
  .rp-calendar .k-scheduler-toolbar .k-scheduler-views li:first-child,.rp-calendar .k-scheduler-toolbar .k-scheduler-views li:first-child &gt; a{border-right:none;}
  .rp-calendar .k-scheduler-toolbar .k-scheduler-views .k-state-selected,.rp-calendar .k-scheduler-toolbar .k-scheduler-views .k-state-selected a{background: #0c8aff !important;color:#fff !important;}
  .rp-calendar .k-scheduler-toolbar .k-scheduler-views .k-state-selected{border: 1px solid #d7d7d7;position: relative;}
  .rp-calendar .k-scheduler-header th,.rp-calendar .k-scheduler-header td,.rp-calendar .k-scheduler-content td{border: 1px solid #fff;}
  .rp-calendar .k-scheduler-header th{text-align: center; background-color: #f6f7f8;border: 1px solid #fff;color: #585858;}
  .rp-calendar .k-scheduler-content td{color:#585858;}
  .rp-calendar .k-scheduler-monthview .k-scheduler-content td{vertical-align:bottom;color:#585858;}
  .rp-calendar .k-scheduler-content td.k-other-month{background:#e9e9e9 !important;}
  .rp-calendar .k-event{background-image:none !important;}
  .rp-calendar .k-scheduler-monthview .k-scheduler-content .k-event{text-indent:-9999px;height: 15px !important;width: 15px !important;min-height:12px;border:0 !important;border-radius: 100%;padding: 0;margin: 0;overflow: hidden;line-height: initial;}
  .rp-calendar .k-scheduler-monthview .k-scheduler-content table.scheduler-template-table td.et-time{background:#6078aa !important;padding: 0;width: 15px;height: 15px;min-height:12px;margin: 0;}
  .rp-calendar .k-scheduler-monthview .k-scheduler-content .k-event h4,.rp-calendar .k-scheduler-monthview .k-scheduler-content .k-event p{display:none !important;}
  .rp-calendar .k-scheduler-monthview .k-scheduler-content .k-event-actions,.rp-calendar .k-scheduler-monthview .k-scheduler-content .k-resize-handle{display:none !important;}
  .rp-calendar .k-scheduler-content td.k-other-month span{opacity:0.3;}
  .rp-calendar .k-scheduler-monthview .k-scheduler-table td:nth-child(even){background-color: #e9e9e9;}
  .rp-calendar .k-scheduler-monthview .k-scheduler-table tbody tr&gt;td,.rp-calendar .k-scheduler-monthview .k-scheduler-table tbody tr:nth-child(6n+1) td:nth-child(even),.rp-calendar .k-scheduler-monthview .k-scheduler-table tbody tr:nth-child(6n+3) td:nth-child(even),.rp-calendar .k-scheduler-monthview .k-scheduler-table tbody tr:nth-child(6n+3) td:nth-child(even){ background:#e9e9e9}
  .rp-calendar .k-scheduler-monthview .k-scheduler-table tbody tr:nth-child(6n+1) td:nth-child(odd),.rp-calendar .k-scheduler-monthview .k-scheduler-table tbody tr:nth-child(6n+3) td:nth-child(odd),.rp-calendar .k-scheduler-monthview .k-scheduler-table tbody tr:nth-child(6n+5) td:nth-child(odd){ background:#f6f7f8}
  .rp-calendar .k-scheduler-monthview .k-scheduler-table tbody tr:nth-child(even) td:nth-child(even){background:#f6f7f8;}
  .rp-calendar .k-scheduler-monthview td[role='gridcell']{height:120px !important;}
  .rp-calendar .k-scheduler-dayview .k-scheduler-content{background:#f6f7f8;}
  .rp-calendar .k-scheduler-footer,.rp-calendar .k-scheduler-dayview .k-event-actions{display:none !important;}
  .rp-calendar .k-scheduler-dayview .schedule-times-hide .k-scheduler-times{display:none !important;}
  .rp-calendar .k-scheduler-dayview .k-event{background-color:#fff;border:1px solid #efefef;}
  .rp-calendar .k-scheduler-dayview .k-middle-row{display:none;}
  /* .rp-calendar .k-scheduler-dayview .k-nonwork-hour{display:none !important;} */
  
  .rp-calendar .k-scheduler-dayview  .k-event{position:static !important;height:auto !important;width: 100% !important;left: 0 !important;overflow: hidden;margin-bottom: 10px;}
  .rp-calendar .k-scheduler-dayview .k-scheduler-content table.k-scheduler-table{display:none !important;}
  .rp-calendar .k-scheduler-content table.scheduler-template-table td{border:0;padding: 10px;vertical-align:middle;}
  .rp-calendar .k-scheduler-content table.scheduler-template-table td.et-time{background-color:#efefef;font-size: 18px;font-weight:bold;color: #555;}
  .rp-calendar .k-scheduler-content table.scheduler-template-table td.et-content{font-size:13px;}
  .rp-calendar .k-scheduler-content table.scheduler-template-table td.et-content h3{color:#444;margin:0 0 5px 0;}
  .rp-calendar .k-scheduler-content table.scheduler-template-table td.et-content p{margin:0;}
  .rp-calendar .k-scheduler-content table.scheduler-template-table td.et-options a{margin-left:15px;}
  .campaign .k-animation-container,.campaign .k-widget.k-tooltip{width:400px !important;}
  .campaign .k-widget.k-tooltip{/* border-color: #DEDCDC;background-color: #fff;color: #585858; */padding:0;}
  .campaign .k-callout-s{border-top-color: #fff; z-index: 2;bottom: -18px;border-width: 9px;}
  .campaign .k-callout-s:before{border:1px solid red;}
  .scheduler-template-table.stt-tooltip td{padding:10px;background:#fff;}
  .scheduler-template-table.stt-tooltip td.et-time{font-size:18px;background: #efefef;border-right: 1px solid #DCDCDC;}
  .scheduler-template-table.stt-tooltip td.et-content{text-align:left;}
  .scheduler-template-table.stt-tooltip td.et-content h3{font-size:18px;color:#0c8aff !important;margin-bottom:5px;}
  .scheduler-template-table.stt-tooltip td.et-content p{text-align:left;}
  .scheduler-template-table.stt-tooltip .k-callout-s{border-color:#fff;}
    &lt;/style&gt;
    
  &lt;body&gt;
  
    
    &lt;div class="rp-calendar"&gt;
      &lt;div id="socialMediaCalendar" class="schedule-times-hide"&gt;&lt;/div&gt;
    &lt;/div&gt;
    
  &lt;!-- Calendar Scheduler (New) --&gt;
  &lt;script type="text/javascript"&gt;
  
  $(document).ready(function() {
   var date = new Date();
   var _data = new kendo.data.SchedulerDataSource({
       data: [
         {
         eventID: 1,
         title: "Main Heading",
         start: new Date("2015/12/09 01:00 AM"),
         end: new Date("2015/12/09 01:20 AM"),
         isAllDay: false,
         description: "Lorem ipsum content",
         },
         {
         eventID: 2,
         title: "Main Heading",
         start: new Date("2015/12/10 06:30 AM"),
         end: new Date("2015/12/10 07:20 AM"),
         isAllDay: false,
         description: "Lorem ipsum content",
         },
         {
         eventID: 3,
         title: "Main Heading",
         start: new Date("2015/12/23 03:15 AM"),
         end: new Date("2015/12/23 03:50 AM"),
         isAllDay: false,
         description: "Lorem ipsum content",
         },
         {
         eventID: 4,
         title: "Another Heading",
         start: new Date("2015/12/09 03:15 AM"),
         end: new Date("2015/12/09 03:50 AM"),
         isAllDay: false,
         description: "Lorem ipsum content",
         },
       ],
  
       schema: {
         model : { id : "eventID" }
       }
  
     });
  
     function save(){
       console.log(_data);    
     }
  
     $('#socialMediaCalendar').kendoScheduler({
      
    eventTemplate: $("#event-template").html(),
       height: 600,
       messages: {
        today: "Today",
         },
         //editable: false,
       ShowFooter: "false",
       views: [
         { type: "day", title: "Day", selectedDateFormat: "{0:dddd}", showWorkHours: false },
         { type: "month", selected: true },
       ],
       
       dataBound: function() {
              var scheduler = this;
              
              var allDayEventBlock = scheduler.wrapper.find(".k-scheduler-layout&gt;tbody&gt;tr:nth-child(1)");
              var dayViewTimesBlock = scheduler.wrapper.find(".k-scheduler-layout .k-scheduler-times");
              var tdNoWorkHours = scheduler.wrapper.find(".k-scheduler-layout .k-nonwork-hour");
              var prevCalContentRef = scheduler.wrapper.find(".k-scheduler-layout td.et-options #previewCalDayContent");
              
              allDayEventBlock.remove();
              dayViewTimesBlock.remove();
              tdNoWorkHours.closest("tr").remove();
              prevCalContentRef.attr("href", "#pn-modal-day-preview");
  
              
            },
  
       save: save,
       dataSource:_data,
      
       
     });
  
     $(function () {
       $("#socialMediaCalendar").kendoTooltip({
         filter: ".k-event",
         position: "top",
         width: 250,
         content: kendo.template($('#calendarPopupTemplate').html())
       });
     });
     
  });  
  &lt;/script&gt;
  &lt;!-- /Calendar Scheduler (New) --&gt;
   
   &lt;!-- Calendar Scheduler (Content Templates) --&gt;
  &lt;script id="event-template" type="text/x-kendo-template"&gt;
    &lt;table width="100%" cellpadding="0" cellspacing="0" class="scheduler-template-table"&gt;
      &lt;tbody&gt;
    &lt;tr&gt;
     &lt;td class="et-time" width="1%" nowrap&gt;#: kendo.toString(start, "HH:mm") #&lt;/td&gt;
     &lt;td class="et-content"&gt;&lt;h3&gt;#: title #&lt;/h3&gt;&lt;p&gt;#: description #&lt;/p&gt;&lt;/td&gt;
     &lt;td class="et-options" align="right"&gt;&lt;a class="no-hover" id="previewCalDayContent" data-toggle="modal" data-backdrop="static" rel="tooltip" data-original-title="Preview template"&gt;&lt;i title="Preview" class="icon-view-small icon-sm blue"&gt;&lt;/i&gt;&lt;/a&gt;&lt;a class="no-hover"&gt;&lt;i title="Edit" class="icon-edit-pencil-small icon-sm blue"&gt;&lt;/i&gt;&lt;/a&gt;&lt;a class="no-hover"&gt;&lt;i title="Duplicate" class="icon-duplicate-small icon-sm blue"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
   &lt;tbody&gt;
    &lt;/table&gt;
  &lt;/script&gt;
   &lt;!-- /Calendar Scheduler (Content Templates) --&gt;
  
   &lt;!-- Calendar Scheduler (Tooltip Templates) --&gt;
  &lt;script id="calendarPopupTemplate" type="text/x-kendo-template"&gt; 
    #var uid = target.attr("data-uid");#
    #var scheduler = target.closest("[data-role=scheduler]").data("kendoScheduler");#
    #var model = scheduler.occurrenceByUid(uid);#
  
    #if(model) {#
  
      &lt;table width="100%" cellpadding="0" cellspacing="0" class="scheduler-template-table stt-tooltip"&gt;
      &lt;tbody&gt;
    &lt;tr&gt;
     &lt;td class="et-time" width="1%" nowrap&gt;#=kendo.format('{0:HH:mm}',model.start)#&lt;/td&gt;
     &lt;td class="et-content" valign="middle"&gt;&lt;h3&gt;#: model.title #&lt;/h3&gt;&lt;p&gt;#=model.description#&lt;/p&gt;&lt;/td&gt;
    &lt;/tr&gt;
   &lt;tbody&gt;
    &lt;/table&gt;
    #} else {#
    &lt;p&gt;No event data is available&lt;/p&gt;
    #}#
  &lt;/script&gt;
  &lt;!-- /Calendar Scheduler (Tooltip Template) --&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>