Kendo UI（调度程序） - 自定义计划事件对齐

时间：2015-12-23 06:42:58

标签： jquery kendo-ui kendo-scheduler

我使用自定义模板使用Kendo UI（调度程序）月视图和日视图。

默认情况下，所有事件都默认与单元格顶部对齐。相反，我希望这些从单元格的底部对齐... [请参考下面的图像]

PS ：我试图通过CSS来控制，加上.k-event{ top:auto !important}没有运气:(

enter image description here

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

0 个答案:

没有答案
相关问题
最新问题