Kendo Scheduler TimeLineView对于资源，可以像显示其allDay事件一样显示每个事件
Kendo Scheduler TimeLineView对于资源，可以像显示其allDay事件一样显示每个事件
提问于 2018-05-05 04:59:28
我创建了这个按组显示资源的Dojo Link。这个视图的问题是，只有当它是一个allDay事件时，它才会显示长块。对于这个视图，我如何应用一个模板来显示每个事件的时间范围？
目前它显示的是小区块，很难分辨它是什么，或者它被预订了多长时间。
我希望所有的事件块都是全长的，尽管持续时间很长。类似于下面突出显示的内容
回答 2
Stack Overflow用户
发布于 2018-05-07 22:59:33
请看下面的代码片段。我做了几件事：
- 我从事件的模板中删除了
title数据，因为您说您不想看到它。 - 我在模板中的
<p>元素之后放置了一个space，以便事件的x操作有一个显示位置。还有其他方法可以做到这一点，我使用了一个简单的方法。 - 我已经对代码底部的样式进行了更改，具体如下：
. .space -template{ overflow: auto !important；width: fit-content !important；} .k-event { width: fit-content !important；}{ width: 20px；height: 15px；display: inline-block；}..movie template p{页边距: 5px 0 0；display: inline-block；}.movie template p{ margin: 5px 0 0；display:inline-block；}
编辑
让约会填充它们所属的单元格要么是不可能的，要么是极其复杂的。我会解释为什么：
按照事件的编程方式，它们与调度程序的表存在于DOM的同一级别上，并在其上方浮动。调度程序根据事件的开始和结束时间计算事件的位置和大小。
为了让你把它们当作全天活动来安排，你需要做以下两件事之一：
- 使用您自己的代码覆盖调度程序的自动放置，这些代码将计算位置和大小并相应地设置它们。请注意，每次调整窗口大小、重新聚焦、旋转等操作时，都需要运行此代码。
- 将事件定义为“全天约会”，并将其实际开始和结束时间存储在您将在代码中使用的其他字段中。这可能会破坏您可能已有的其他功能。
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/scheduler/resources-grouping-vertical">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.timezones.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div id="scheduler"></div>
</div>
<script id="event-template" type="text/x-kendo-template">
<div class="movie-template" style="width:100px">
<p>#: kendo.toString(start, "hh:mm") # - #: kendo.toString(end, "hh:mm") #</p>
<span class="space"></span>
</div>
</script>
<script>
var MyCustomTimelistView = kendo.ui.TimelineMonthView.extend({
options: {
name: "MyCustomTimelistView",
title: "Timeline Week",
selectedDateFormat: "{0:D} - {1:D}",
selectedShortDateFormat: "{0:d} - {1:d}",
majorTick: 1440,
numberOfDays: 7
},
name: "MyCustomTimelistView",
calculateDateRange: function() {
//create the required number of days
var start = this.options.date,
// start = kendo.date.dayOfWeek(selectedDate, this.calendarInfo().firstDay, -1),
idx, length,
dates = [];
for (idx = 0, length = this.options.numberOfDays; idx < length; idx++) {
dates.push(start);
start = kendo.date.nextDay(start);
}
this._render(dates);
},
previousDate: function() {
var date = new Date(this.startDate());
date.setDate(date.getDate() - this.options.numberOfDays);
return date
}
});
$(function() {
$("#scheduler").kendoScheduler({
date: new Date("2013/6/13"),
startTime: new Date("2013/6/13 07:00 AM"),
height: 600,
eventTemplate: $("#event-template").html(),
views: [
"day",
{ type: "MyCustomTimelistView", selected: true,
},
"month",
"agenda",
"timeline"
],
timezone: "Etc/UTC",
dataBinding: function(e) {
var view = this.view();
$( ".k-scheduler-times > table > tbody > tr:eq(1)" ).hide();
$( ".k-scheduler-header-wrap > table > tbody > tr:eq(1)" ).hide();
},
dataSource: {
batch: true,
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/meetings",
dataType: "jsonp"
},
update: {
url: "https://demos.telerik.com/kendo-ui/service/meetings/update",
dataType: "jsonp"
},
create: {
url: "https://demos.telerik.com/kendo-ui/service/meetings/create",
dataType: "jsonp"
},
destroy: {
url: "https://demos.telerik.com/kendo-ui/service/meetings/destroy",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
schema: {
model: {
id: "meetingID",
fields: {
meetingID: { from: "MeetingID", type: "number" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
startTimezone: { from: "StartTimezone" },
endTimezone: { from: "EndTimezone" },
description: { from: "Description" },
recurrenceId: { from: "RecurrenceID" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
roomId: { from: "RoomID", nullable: true },
attendees: { from: "Attendees", nullable: true },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
}
},
group: {
resources: ["Rooms"],
orientation: "vertical"
},
resources: [
{
field: "roomId",
name: "Rooms",
dataSource: [
{ text: "Meeting Room 101", value: 1, color: "#6eb3fa" },
{ text: "Meeting Room 201", value: 2, color: "#f58a8a" }
],
title: "Room"
},
{
field: "attendees",
name: "Attendees",
dataSource: [
{ text: "Alex", value: 1, color: "#f8a398" },
{ text: "Bob", value: 2, color: "#51a0ed" },
{ text: "Charlie", value: 3, color: "#56ca85" }
],
multiple: true,
title: "Attendees"
}
]
});
});
</script>
<style>
.movie-template {
overflow: auto !important;
width: fit-content !important;
}
.k-event {
width: fit-content !important;
}
.space {
width: 20px;
height: 15px;
display: inline-block;
}
.movie-template img {
float: left;
margin: 0 8px;
}
.movie-template p {
margin: 5px 0 0;
display: inline-block;
}
.movie-template h3 {
padding: 0 0 5px;
font-size: 12px;
}
.movie-template a {
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
.k-state-hover .movie-template a,
.movie-template a:hover {
color: #000000;
}
</style>
</body>
</html>
Stack Overflow用户
发布于 2019-10-02 04:25:00
您可以像这样创建自定义视图，并在代码中使用它
var CustomMonthView = kendo.ui.TimelineMonthView.extend({
options: {
name: "CustomMonth",
title: "Month"
},
name: "CustomMonth",
_positionEvent: function(eventObject) {
var eventHeight = this.options.eventHeight + 2;
var rect = eventObject.slotRange.innerRect(eventObject.start, eventObject.end, true);
var left = this._adjustLeftPosition(rect.left);
var width = rect.right - rect.left - 2;
if (width < 0) {
width = 0;
}
if (width < this.options.eventMinWidth) {
var slotsCollection = eventObject.slotRange.collection;
var lastSlot = slotsCollection._slots[slotsCollection._slots.length - 1];
var offsetRight = lastSlot.offsetLeft + lastSlot.offsetWidth;
width = this.options.eventMinWidth;
if (offsetRight < left + width) {
width = offsetRight - rect.left - 2;
}
}
eventObject.element.css({
top: eventObject.slotRange.start.offsetTop + eventObject.rowIndex * (eventHeight + 2) + 'px',
left: left,
width: width
});
},
_arrangeRows: function (eventObject, slotRange, eventGroup) {
var startIndex = slotRange.start.index;
var endIndex = slotRange.end.index;
var rect = eventObject.slotRange.innerRect(eventObject.start, eventObject.end, true);
var rectRight = rect.right + this.options.eventMinWidth;
var events = kendo.ui.SchedulerView.collidingEvents(eventObject.slotRange.events(), startIndex, endIndex);
slotRange.addEvent({
slotIndex: startIndex,
start: startIndex,
end: endIndex,
rectLeft: rect.left,
rectRight: rectRight,
element: eventObject.element,
uid: eventObject.uid
});
events.push({
start: startIndex,
end: endIndex,
uid: eventObject.uid
});
var rows = kendo.ui.SchedulerView.createRows(events);
if (eventGroup.maxRowCount < rows.length) {
eventGroup.maxRowCount = rows.length;
}
for (var idx = 0, length = rows.length; idx < length; idx++) {
var rowEvents = rows[idx].events;
for (var j = 0, eventLength = rowEvents.length; j < eventLength; j++) {
eventGroup.events[rowEvents[j].uid].rowIndex = idx;
}
}
}
});希望这能有所帮助
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50182972
复制相关文章
相似问题
腾讯云开发者
