如何在syncfusion MVC中动态编辑日程安排的宽度和位置

发布于 2025-01-11 07:45:23 字数 2386 浏览 0 评论 0原文

我正在开发一个项目,让我在 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文