我正在使用Kendo UI - 计划程序在日历上创建活动。
我想点击“修改”按钮修改已添加的活动。
目前，剑道只提供双击事件。
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/scheduler/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/kendo.timezones.min.js"></script>
</head>
<body>
<div class="container">
<div class="rp-calendar">
<div id="socialMediaCalendar"></div>
</div>
</div>
<!-- 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">
<input type="button" value="Edit" id="eventEdit" class="k-button">
</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) -->
<script>
$(document).ready(function() {
var date = new Date();
var _data = new kendo.data.SchedulerDataSource({
data: [
{
eventID: 1,
title: "Main Heading",
start: new Date("2015/12/17 01:00 AM"),
end: new Date("2015/12/17 01:20 AM"),
isAllDay: false,
description: "Lorem ipsum content",
},
{
eventID: 2,
title: "Heading 2",
start: new Date("2015/12/17 06:15 AM"),
end: new Date("2015/12/17 06:30 AM"),
isAllDay: false,
description: "New content goes here...",
},
{
eventID: 3,
title: "Heading 2",
start: new Date("2015/12/17 09:15 PM"),
end: new Date("2015/12/17 09:30 PM"),
isAllDay: false,
description: "More content goes here...",
},
],
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, selected: true },
{ type: "month" },
],
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>
<style>
.rp-calendar{margin:auto;width:80%;margin-top:50px;}
form{max-width:500px;margin:20px auto;}
.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-toolbar .k-scheduler-views .k-state-selected:before {
position: absolute;
bottom: -10px;
left: 0;
display: inline-block;
border-right: 10px solid transparent;
border-top: 10px solid #0c8aff;
border-left: 10px solid transparent;
border-top-color: rgba(0, 0, 0, 0.2);
content: '';
right: 0;
width: 10px;
margin: auto;
}
.rp-calendar .k-scheduler-toolbar .k-scheduler-views .k-state-selected:after {
position: absolute;
bottom: -18px;
left: 0;
display: inline-block;
border: 9px solid transparent;
border-top: 9px solid #0c8aff;
border-left: 9px solid transparent;
content: '';
right: 0;
width: 8px;
margin: auto;
}
.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;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;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>
</html>
答案 0 :(得分：-2)
我没有完全阅读你的问题。我理解的是在按钮点击事件上打开编辑器弹出窗口。如果它是正确的，那么“addEvent”函数将解决您的查询。