将动态数据属性传递给 dhtmlxScheduler

问题描述

是否可以通过数据属性将数据动态传递给 dhtmlxScheduler？

我正在尝试传递动态数据，特别是日期，然后用于阻止调度程序显示我试图传递的日期之前的事件。 调度程序已经收到 api-url、api-root 和 read-only 之类的数据，但是当我尝试使用 data-attribute 添加更多数据时，我会收到 undefined。我尝试使用 .data() 和 .attr()。这是我迄今为止尝试过的：

Blade.PHP 模板

 <x-scheduler :api-url="route('portal.schedule.events',$project)"
              api-root="/portal/schedules"
              :read-only="true"
              :data-project-start-date="$projectStartDate"
/>

调度程序.js

 const schedulerElement = $('#scheduler');
 const api_url = schedulerElement.data('api-url');
 const api_root = schedulerElement.data('api-root');

 const project_start_date = schedulerElement.attr('data-project-start-date');
 //const project_start_date = schedulerElement.data('project-start-date');

解决方法

是的，从技术上讲，您可以将“数据属性”添加到调度程序容器中（如我所见，您正在尝试做这件事）。

我尝试使用纯 javascript（而不是 jQuery $ 和 attr 方法）重现您的问题，代码如下：

function customAddData(){
    var el = document.querySelector("#scheduler_here")
    el.dataset.projectStartDate = new Date()
}
scheduler.init("scheduler_here",new Date(2020,5,30),"week");

customAddData()  
var schedulerElement = document.querySelector("#scheduler_here")
var project_start_date = schedulerElement.dataset.projectStartDate;
console.log(project_start_date)

并且正确添加了数据属性，这里是一个演示： http://snippet.dhtmlx.com/5/3fba66b31

顺便说一句，我可能会误解您到底应该做什么，但是如果您只是不想在某个日期之前显示事件 - 您只需使用 Filter 功能即可： https://docs.dhtmlx.com/scheduler/filtering.html