Change color on event added

Scheduler Javascript
#1

Hello,

I have included the following to assign colors to events as they load.

        scheduler.templates.event_class=function(start,end,event){
            if (event.status == 'maintenance') {
                return "maintenance"; 
            } else if (event.person_id == <{$person_id}>) {
                return "own_event"
            }
        }

However, when a new event is added, this function is not run so the event stays in the default color unless the view is changed. Is there a way to update event color in my OnEventAdded function?

#2

Actually event_class is called for newly added events as well.
In which moment you are assigning person_id or status values ? It possible that you are assigning them after event rendereing , that is why new styles is not applied.

In any case

scheduler.updateEvent(id);

will force repainting of the event

#3

I added scheduler.updateEvent(temp.new_id); per your recommendation, which works. I guess I am updating the values after the event is rendered. I noticed that in the month view, when I add this line of code, and add two events on the same day, they are rendered on top of each other until I switch views and come back…not sure what is causing this.

        scheduler.attachEvent("onEventAdded", 
            function(event_id,event_object) {
                $("#working_message").show();
                var start_dt = convert(event_object.start_date);
                var end_dt = convert(event_object.end_date);
                if (event_object.rec_type != null) {
                    rec_type = event_object.rec_type.replace('#', '');
                } 
                $.wiengine.request({
                    handle_only : 1,
                    panel_id : '<{insert name="get_panel_id"}>',
                    parameters : '&insert=1&event_id=' + event_id + '&start_dt=' + start_dt + '&end_dt=' + end_dt + 
                        '&text=' + event_object.text + '&instr=' + event_object.instrument_id +
                        '&discount=' + event_object.discount + '&is_assisted=' + event_object.is_assisted +   
                        '&event_length=' + length + '&event_pid=' + event_object.event_pid + 
                        '&rec_type=' + rec_type,
                    onSuccess: function(response) {
                        temp = jQuery.parseJSON(response); 
                        scheduler.changeEventId(event_id, temp.new_id);
                        var ev = scheduler.getEvent(temp.new_id);
                       	ev.person_id = <{$person_id}>;
                        ev.name = "<{$name}>";
                        ev.cost = temp.cost;
                        ev.status = temp.status;
                        scheduler.updateEvent(temp.new_id); 
                    }
                });
                for (var i = 0; i < sections.length; i++) {
                    if (event_object.instrument_id == sections[i].key) {
                        scheduler.getEvent(event_id).instrument_name = sections[i].label;
                    }
                }
                $("#working_message").hide();
            }
        );
#4

updateEvent repaints only single event block, and don’t recalculate layout of all events on the page, so if you making changes to multiple events, it is more safe to call

scheduler.setCurrentView(scheduler.getState().date);

which will repaint whole view

#5

I am handling the update of single and recurring series differently in my onEventChanged function - for single event, I get some data back from the database and call scheduler.updateEvent(event_id); to refresh the event data. I am doing something similar for the recurring set, calling the same update on each event in the series, but the result is that the event disappears from the calendar until I refresh the page. I don’t understand.

Thanks.

scheduler.attachEvent("onEventChanged", function(event_id,event_object) { $("#working_message").show(); var start_dt = convert(event_object.start_date); var end_dt = convert(event_object.end_date); for (var i = 0; i < sections.length; i++) { if (event_object.instrument_id == sections[i].key) { instr = sections[i].label; } } $.wiengine.request({ handle_only : 1, panel_id : '<{insert name="get_panel_id"}>', parameters : '&update=1&event_id=' + event_id + '&start_dt=' + start_dt + '&end_dt=' + end_dt + '&text=' + event_object.text + '&instr=' + event_object.instrument_id + '&discount=' + event_object.discount + '&is_assisted=' + event_object.is_assisted + '&update_recurring=' + update_recurring + '&event_length=' + length + '&event_pid=' + event_object.event_pid + '&rec_type=' + event_object.rec_type, onSuccess: function(response) { temp = jQuery.parseJSON(response); if (temp.action == 'update') { var ev = scheduler.getEvent(event_id); ev.cost = temp.cost; ev.instrument_name = instr; scheduler.updateEvent(event_id); } else if (temp.action == 'recurring_update') { for (var i = 0; i < temp.ids.length; i++) { var ev = scheduler.getEvent(temp.ids[i]); if (temp.ids[i] == event_id && temp.orig_instr_id != null) { ev.discount = temp.orig_discount; ev.cost = temp.costs[i]; ev.instrument_id = temp.orig_instr_id; ev.instrument_name = temp.orig_instr_name; ev.start_date = temp.start[i]; ev.end_date = temp.end[i]; ev.text = temp.orig_text; ev.is_assisted = temp.orig_assisted; } else { ev.cost = temp.costs[i]; ev.instrument_id = event_object.instrument_id; ev.instrument_name = instr; ev.start_date = temp.start[i]; ev.end_date = temp.end[i]; ev.discount = temp.discount; ev.text = event_object.text; ev.is_assisted = event_object.is_assisted; } scheduler.updateEvent(temp.ids[i]); } } } }); update_recurring = false; $("#working_message").hide(); } );

#6

The temp.ids[i] contains references for true events ( which have separate event records in DB ) or for instances of recurring event, which has not separate records in DB ( ids, like 123#134543252 ) ?

In second case it will fail for sure, because those events are just reflections of the master event, and can’t contain info different from the master event.

#7

temp_ids is an array of all event_ids that are part of the same recurring series (identified by event_pid). When a recurring event is created, that event is deleted from the calendar, but saved in the db as a master record, and the sub_events that are created are loaded into the calendar. So what I’m doing in my code when a change is made to an event in a recurring series, I update all events within that series that have not passed (only time can be changed, not date and pattern), and then reloading the original data for the event opened to edit the series if it is in the past.

I guess I’m not clear on your question, but all the events already exist with an event_id from my system, so the data in temp_ids is already in both the calendar and my db backend. My problem is that the updateEvent function is not behaving the same way it does with a single event…and these subevents should be no different as far as the calendar is concerned, since technically they are the same as single events, just with an event_pid to tie them together.

#8

I think I found the cause of my problem. I was using ev.start_date = xyz instead of scheduler.setEventStartDate(event_id, date). However, I just posted under a different thread, that this is giving me an error in dhtmlxscheduler_debug.js…

#9

I think I found the cause of my problem. I was using ev.start_date = xyz instead of
There are two differencies between direct setting and API method

a) api method correctly set|update multi-day event flag
b) after api call, scheduler repaints whole view, not the updated event only