Pass dynamic data via data-attribute

Scheduler
#1

Is it possible to pass data dynamically to a dhtmlxScheduler via a data-attribute?

I am attempting to pass dynamic data, specifically a date, to be then used to stop the scheduler from showing events prior to the date I am trying to pass. The scheduler already receive data like api-url , api-root and read-only , but when I try to add more data using data-attribute I then get undefined . I tried both using .data() and .attr() . Here is my code:

blade.php

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

scheduler.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');
#2

Hello @Nebula ,

Yes, technically you can add the “data attribute” to the scheduler container(as I can see, you are trying to do exactly this thing).

I tried to reproduce your issue with pure javascript(instead of jQuery $ and attr methods), with the following code:


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)

And the data attribute was added correctly, here is a demo:
http://snippet.dhtmlx.com/5/3fba66b31

btw, I may misunderstand what exactly you are supposed to do, but if you just want not to display event’s before some date - you just can do it with the Filter functionality:
https://docs.dhtmlx.com/scheduler/filtering.html