dhtmlx scheduler dynamic colors

Question

I am using DHTMLX Scheduler, with the Timeline extension.

I have connected my data to a MySQL database and everything works fine. I then created custom code to where 2 colors (background and text) are set and inserted in to the database, under the 'sections' (the y-axis values) table.

Now when the page with the scheduler is loaded, a SQL query is executed, which checks each event and copies the color values to the 'events' table from the 'section' table. Then further down in the page when the scheduler is initialized, it also collects and assigns these values to each event.

Example:

I have Room1 and Room2 as 'sections'. I set Room1's background color to 'blue' and save it to the DB. When the page loads, the query checks all events assigned to Room1, and assigns them the same background color of 'blue'.

Problem:

When I add a new event, it is assigned the default background color.

When I move an event, it keeps its previous background color.

Refreshing the page, re-runs the script and all the colors are updated accordingly. However this does not solve my problem as it has to be done manually. Is there a way to do this automatically that it refreshes the page after an insert/update?

Or even more ideally, I can store the 'sections' colors in variables when the page loads, and then assign them accordingly on the client-side insert/update events. And when the page is loaded, it will update the database. However, again, I am unsure of how to target these insert/update functions.

Any help or suggestions, for a better solution is welcome and would be appreciated.

Thank you in advance

Answer 1

I managed to get the solution:

DHTMLX has nifty event handlers built in, that can target the update/insert functions with ease. See documentation on Events here.

So using these event triggers, once an event is created/updated, it executes the php script which updates the colors in the DB. I then clear the scheduler and reload the data, without refreshing the page.

My code:

scheduler.attachEvent("onEventChanged", function(id,ev){
$.get('sections/refresh.php', function(dataz) 
{
    function reload()
    {
    scheduler.clearAll();
    scheduler.load("connector.php");
    }
    reload();
});
});