如何在syncfusion MVC中动态编辑日程安排的宽度和位置
我正在开发一个项目,让我在 SyncFusion MVC 的调度程序中编辑约会。 目前,我使用 .cshtml 文件中的 .EventRendered("onEventRendered")
方法通过 JavaScript 编辑所有约会的宽度和位置。
当我编辑同时发生的多个约会的宽度和位置时,我遇到了问题。我的 JavaScript 代码按其应有的方式执行,但在某个地方(我猜是在另一个 .js 文件中)它被覆盖并将值更改回默认值。 我想要的示例 和 当前是什么
我正在编辑自动生成的默认调度程序,以下是我渲染的方式实际的调度程序:
@{
ViewBag.Title = "ScheduleFeatures";
}
@using Syncfusion.EJ2.Schedule
<h2>ScheduleFeatures</h2>
<li> Schedule Samples - Default</li>
<li> Theme - Fabric</li>
<br/>
<div id="ControlRegion">
@(Html.EJS().Schedule("schedule")
.Width("100%")
.Height("550px")
.EventRendered("onEventRendered")
.EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource })
.SelectedDate(new DateTime(2018, 2, 15))
.Render())
</div>
这是我的 JavaScript 代码,如何更改约会的宽度和位置:
let appointmentData = [];
function onEventRendered(args) {
try {
args.element.children[1].innerHTML += "<i class=\"" + args.data.IconTag + "\" style=\"float: right\"></i>";
console.log(args.element.children[1]);
var scheduleObj = document.querySelector('.e-schedule').ej2_instances[0];
if (!args.element) {
return;
}
const uniqueElement = appointmentData.find((appointment) => args.data.Id == appointment.Id);
if (uniqueElement == null) {
appointmentData.push(args.data)
}
args.element.style.width = (args.data.NumberOfRows * 100) / 10 + "%";//"50%"
const searchObject = appointmentData.filter((appointment) => appointment.StartTime <= args.data.StartTime && appointment.EndTime > args.data.StartTime);
if (searchObject.length > 0) {
var left = 0
searchObject.every(apointment => {
if (apointment.Id == args.data.Id) {
return false;
}
else {
left += ((apointment.NumberOfRows * 100) / 10);
}
return true;
})
args.element.style.left = left + "%";
}
} catch (error) {
console.error(error);
}
}
I'm working on a project that has me edit the appointments in the scheduler of SyncFusion MVC.
Currently I edit the width and position of all the appointmets through JavaScript with the .EventRendered("onEventRendered")
method in the .cshtml file.
I've ran into a problem when I edit the width and position of multiple appointments that happen at the same time. My JavaScript code executes as it should but somewhere (in another .js file I presume) it gets overwritten and changes the values back to the default values.
Example of what I would like and
what it currently is
I am editing the default scheduler that auto generates and here is how I render the actual scheduler:
@{
ViewBag.Title = "ScheduleFeatures";
}
@using Syncfusion.EJ2.Schedule
<h2>ScheduleFeatures</h2>
<li> Schedule Samples - Default</li>
<li> Theme - Fabric</li>
<br/>
<div id="ControlRegion">
@(Html.EJS().Schedule("schedule")
.Width("100%")
.Height("550px")
.EventRendered("onEventRendered")
.EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource })
.SelectedDate(new DateTime(2018, 2, 15))
.Render())
</div>
Here is my JavaScript code how I change the width and positioning of the appointments:
let appointmentData = [];
function onEventRendered(args) {
try {
args.element.children[1].innerHTML += "<i class=\"" + args.data.IconTag + "\" style=\"float: right\"></i>";
console.log(args.element.children[1]);
var scheduleObj = document.querySelector('.e-schedule').ej2_instances[0];
if (!args.element) {
return;
}
const uniqueElement = appointmentData.find((appointment) => args.data.Id == appointment.Id);
if (uniqueElement == null) {
appointmentData.push(args.data)
}
args.element.style.width = (args.data.NumberOfRows * 100) / 10 + "%";//"50%"
const searchObject = appointmentData.filter((appointment) => appointment.StartTime <= args.data.StartTime && appointment.EndTime > args.data.StartTime);
if (searchObject.length > 0) {
var left = 0
searchObject.every(apointment => {
if (apointment.Id == args.data.Id) {
return false;
}
else {
left += ((apointment.NumberOfRows * 100) / 10);
}
return true;
})
args.element.style.left = left + "%";
}
} catch (error) {
console.error(error);
}
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
请在下面找到详细信息
https: //www.syncfusion.com/forums/173357/how-to-dynamicly-edit-the-width-and-position-of-schedule-appointments
Please find the details below
https://www.syncfusion.com/forums/173357/how-to-dynamicly-edit-the-width-and-position-of-schedule-appointments