search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Vue.js: divShadow is undefined

Asked by Max
6 months ago.

Hi,

we have two type errors showing in the console by testing the scheduler and we dont know why. I couldn't find any helpful information in your forum, so i hope to get an answer.
I saw that divShadow is a feature of the scheduler control, but i never touched it. so we are getting the following errors:

TypeError: this.divShadow is undefined
VueJS 6 (Callstack in daypilot-vue.min.js)
$g
clearSelection
Ql
Sg
show
Bd

May be our code (see attachment) is a good example to find an answer. I also tried to implement the zoom function, but this is not ready, so I think you can ingore it.

+++++++++++++++++++++++++++++++
By the way, what is the best way to set the "startdate" and "days" of the timeline dynamically dependent of a filter, set by the user. I tried to modify it in the "loadTimeline" method, but it shows only one month from the actual day and not the given one (dateFrom).
++++++++++++++++++++++++++++++++

Thank you very much and have a nice day.
Best regards

Comment posted by Dan Letecky [DayPilot]
6 months ago.

It looks like you are using an older version of DayPilot Pro. Does it still happen with the latest release?

> By the way, what is the best way to set the "startdate" and "days" of the timeline dynamically dependent of a filter, set by the user. I tried to modify it in the "loadTimeline" method, but it shows only one month from the actual day and not the given one (dateFrom).

If you change properties, like "startDate" and "days", it's necessary to call update(). You are calling init() in loadTimeline() and that can only be run once. Subsequent calls are ignored.

Comment posted by Max
6 months ago.

>It looks like you are using an older version of DayPilot Pro. Does it still happen with the latest release? <
I installed the newest version und the error is gone, but we have instead a new one: "f.divHover is undefined"
Like with divShadow we didn't change anything.

>If you change properties, like "startDate" and "days", it's necessary to call update(). You are calling init() in loadTimeline() and that can only be run once. Subsequent calls are ignored.<

I replaced .init() with .update(), but the results are the same. The value of "startDate", "days" and all other properties in "loadTimeline" will be changed and shown. Except that startDate is has the same value as it was before (wrong one). Is it possible to change "startDate" dynamically in my methods out of the ":config"?
Its hard to understand the examples that are written in javascript, if we are using vue and or not familier enough with this technology.

Answer posted by Dan Letecky [DayPilot]
6 months ago.

> I installed the newest version und the error is gone, but we have instead a new one: "f.divHover is undefined"
Like with divShadow we didn't change anything.

The Scheduler object is initialized and rendered during the "mounted" phase (it requires the underlying placeholder element to be rendered first). Before "mounted" phase is reach, this.$refs.scheduler returns undefined.

You are trying to load the events in the "created" phase and to overcome this problem (accessing this.scheduler causes "Cannot read property 'control' of undefined" error) you have created another instance of DayPilot.Scheduler manually somewhere (and it uses the same placeholder). When accessing this.scheduler later you are working with an instance which is not linked to the placeholder correctly and it is throwing errors.

> I replaced .init() with .update(), but the results are the same.

In your "loadTimeline" method, you set the date using "startdate" which is incorrect - you need to use "startDate" (note the case).

You also try to generate the timeline manually using "timeline" property but that only works if you set scale="Manual". See also:
https://doc.daypilot.org/scheduler/timeline/

You can download a sample Vue.js Scheduler project here:
https://code.daypilot.org/46517/vue-js-scheduler-changing-visible-date

It includes the correct initialization logic and it demonstrates the options you have when changing the Scheduler properties.

Let me know if the problems persist.

This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.