CODEWITHSUNDEEP
jquerylaravelcustom-data-attributedhtmlx-scheduler
Nebula
Nebula

Reputation: 35

pass dynamic data-attribute to a dhtmlxScheduler

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

Upvotes: -1

Views: 154

Answers (1)

Siarhei
Siarhei

Reputation: 51

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

Upvotes: 0

Related Questions