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

Scheduler Event backcolor Revert back after loading

Asked by Ben
3 years ago.

Hi,

I am setting backcolor for events and they appear correctly for a brief moment before reverting back to the normal colors. Any idea why?

Here is the code that load the events;

function loadEvents() {

DayPilot.request("{Site_Root}/services/Roster_Dates.php?_", function(result) {
var data = eval("(" + result.responseText + ")");
//dp.sortDirections = ["asc"];
for(var i = 0; i < data.length; i++) {
var e = new DayPilot.Event(data[i]);
dp.events.add(e);
dp.update();
}
});

}

Here is sample of the json

[
{
"id": "136009",
"text": " 14:00 No. Bookings:1",
"start": "2017-09-03T14:00:00",
"end": "2017-09-04T00:00:00",
"resource": "41",
"backColor": "red",
"resizeDisabled": "true",
"bubbleHtml": "Time: <br/>14:00<br/> Staff: 14:00 No. Bookings:1"
}
]

As mention the color appear but overridden by the style sheet.

Any help would be appreciated.

Comment posted by Ben
3 years ago.

Note I am working in Javascript version

Answer posted by Dan Letecky [DayPilot]
3 years ago.

If you add events using .events.add() you don't need to call .update() to apply the change. The Scheduler will be updated automatically. Also, calling .update() in every iteration of the loop is very expensive (and not necessary).

1. If you want to replace the existing data set with the result you can use this helper method:

dp.events.load("{Site_Root}/services/Roster_Dates.php?_");

This is an equivalent of the following code:

DayPilot.request("{Site_Root}/services/Roster_Dates.php?_", function(req) {
  var data = JSON.parse(req.responseText);
  dp.events.list = data;
  dp.update();
});

2. If you want to add the loaded events to the existing set (but it's not the typical case) you can do it like this:

DayPilot.request("{Site_Root}/services/Roster_Dates.php?_", function(req) {
  var data = JSON.parse(req.responseText);
  data.forEach(function(item) {
    dp.events.add(new DayPilot.Event(item));
  });
});

Both .events.add() and .update() update the Scheduler in an asynchronous way so you can't mix them together.

Comment posted by Ben
3 years ago.

Thanks, Dan that worked.

Any tip on how I could search for events by resource and delete them?

Comment posted by Dan Letecky [DayPilot]
3 years ago.

You can list and delete all events for a given row like this:

  var events = dp.rows.find("A").events.all();
  events.forEach(function(e) {
    dp.events.remove(e);
  });
Comment posted by Ben
3 years ago.

Thanks

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