I am using Kendo UI (Scheduler) Month view and Day View by using custom Templates.
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... [please refer below image]
PS: I have tried to control through CSS, by adding .k-event{ top:auto !important} without luck :(
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo - Scheduler</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script></head>
<style type="text/css">
.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 > 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>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;}
</style>
<body>
<div class="rp-calendar">
<div id="socialMediaCalendar" class="schedule-times-hide"></div>
</div>
<!-- Calendar Scheduler (New) -->
<script type="text/javascript">
$(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>tbody>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())
});
});
});
</script>
<!-- /Calendar Scheduler (New) -->
<!-- Calendar Scheduler (Content Templates) -->
<script id="event-template" type="text/x-kendo-template">
<table width="100%" cellpadding="0" cellspacing="0" class="scheduler-template-table">
<tbody>
<tr>
<td class="et-time" width="1%" nowrap>#: kendo.toString(start, "HH:mm") #</td>
<td class="et-content"><h3>#: title #</h3><p>#: description #</p></td>
<td class="et-options" align="right"><a class="no-hover" id="previewCalDayContent" data-toggle="modal" data-backdrop="static" rel="tooltip" data-original-title="Preview template"><i title="Preview" class="icon-view-small icon-sm blue"></i></a><a class="no-hover"><i title="Edit" class="icon-edit-pencil-small icon-sm blue"></i></a><a class="no-hover"><i title="Duplicate" class="icon-duplicate-small icon-sm blue"></i></a></td>
</tr>
<tbody>
</table>
</script>
<!-- /Calendar Scheduler (Content Templates) -->
<!-- Calendar Scheduler (Tooltip Templates) -->
<script id="calendarPopupTemplate" type="text/x-kendo-template">
#var uid = target.attr("data-uid");#
#var scheduler = target.closest("[data-role=scheduler]").data("kendoScheduler");#
#var model = scheduler.occurrenceByUid(uid);#
#if(model) {#
<table width="100%" cellpadding="0" cellspacing="0" class="scheduler-template-table stt-tooltip">
<tbody>
<tr>
<td class="et-time" width="1%" nowrap>#=kendo.format('{0:HH:mm}',model.start)#</td>
<td class="et-content" valign="middle"><h3>#: model.title #</h3><p>#=model.description#</p></td>
</tr>
<tbody>
</table>
#} else {#
<p>No event data is available</p>
#}#
</script>
<!-- /Calendar Scheduler (Tooltip Template) -->
</body>
</html>