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

How To Update Separators?

Related article: JavaScript Scheduler: Show Separators in the Time Header
Asked by RPM
7 months ago.

Here is my code for the separators to show current time on DayPilot:

                              separators: [{color: "white" , location: prelocalISO.addHours(-7), width:36, opacity: 10},  //Glow around red line
                                           {color: "white" , location: prelocalISO.addHours(-6), width:32, opacity: 11},  //Glow around red line
                                           {color: "white" , location: prelocalISO.addHours(-5), width:26, opacity: 12},  //Glow around red line
                                           {color: "yellow", location: prelocalISO.addHours(-4), width:22, opacity: 13},  //Glow around red line
                                           {color: "red"   , location:    localISO, width:2}, //, layer: "AboveEvents"}, //Adds a red line to show current time
                                           {color: "white" , location: prelocalISO.addHours(-3), width:16, opacity: 14},  //Glow around red line
                                           {color: "white" , location: prelocalISO.addHours(-2), width:12, opacity: 15},  //Glow around red line
                                           {color: "white" , location: prelocalISO.addHours(-1), width:6 , opacity: 16},  //Glow around red line
                                          ],

But I want it so if the page stays open, the line moves throughout the day.

This is not happening. I have code that refreshes the events on a timer, so everything else updates, but the separators never move. How can I refresh the separators without a full page refresh?

Comment posted by RPM
7 months ago.

Something like this, not working yet though:

const separators = daypilot.separators;
separators.forEach(separator => {separator.location = localISO;});

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

You can use the update() method:

scheduler.update({separators});

If the Scheduler detects that only {separators} property is in the update params, it will perform an optimized update and only refresh the separators. See more in the update() documentation.

Comment posted by RPM
7 months ago.

Thanks for the suggestion, unfortunately I don’t think it works for me.

1) I opened my page

2) I changed my TimeZone

3) I tried dpObj.update();

4) It did not work, but reloading the page did work.

5) I changed my TimeZone back and tried again… same result.

I tried this to:

dpObj.update( dpObj.separators );

but that gives and “unexpected . error“

I tried this to:

hi = dpObj.separators;

dpObj.update( hi );

Which did not give an error, but like pbObj.update() it did not move my RED “Now” line.

Comment posted by RPM
7 months ago.

Sorry, I meant dpObj.update({hi}); in my last example… the NOW line never moves unless I reload the page no matter what I try.

Comment posted by RPM
7 months ago.

Here is a photo of my system with the NOW line:

Comment posted by RPM
7 months ago.

Ok, I got it to move…

//First you need to move all the separators like...
dpObj.separators[4].location = DayPilot.Date('2023-11-03T17:14:50.033');

//THEN you need to run update:
dpObj.update();

I never got update({separators}) to work, but that’s ok.

I was hoping there was some way it could re-calc the separators from the settings shown in the OP, but it looks like I have to make a function to adjust them all, and then update.

Comment posted by RPM
7 months ago.

I see what you were saying too now, instead of doing it how I did it I could have just updated my localiso variable and then passed in the same code I initialized with like this (I should have followed your link sooner):

dp.update({separators: [{color:"red", location: new DayPilot.Date()}]});
This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.