pass dynamic data-attribute to a dhtmlxScheduler

Question

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(). This is what I have tried so far:

Blade.php template

 <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');

schedulerElement is refering to the actual scheduler hence it is a big boy, but I can see api-root and api-url under both dataset and attributes. Unfortunately project-start-date is nowhere to be found — Nebula, Jan 13 '21 at 09:57

score 0 · Answer 1 · answered Jan 18 '21 at 15:05

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

The point is that I want to retrieve a startProjectDate dynamically from my database and use it so that the user cannot 'scroll' past that date in the scheduler. Let's say the user can see in the past up to the week when the project started, but cannot go further back in time and see other weeks before that... — Nebula, Jan 27 '21 at 09:23

pass dynamic data-attribute to a dhtmlxScheduler

1 Answers1