temporarily change single events css style

Scheduler Javascript
#1

Hi.
I upload changed event data to the database in background (ajax).
I would love to visualize the success of that operation to the user.
So when the ajax is done, according to the response I would like to either flash the event in question green vor half a second or red in case of an error.

How can I set the attributes of a single event?
More to the point: How do I identify that div-element.
Firebug does not show an id in the element, just an event-id attribute.
Is there a better way than to cursor over all the events to find that attribute?

Regards,
Gerrit

#2

Hello,

All rendered events (their divs) are in the

scheduler._rendered

collection.

So you can find your element based on the event_id property and change it’s CSS.
For example:

for(var i=0; i<scheduler._rendered.length; i++) { if(scheduler._rendered[i].getAttribute('event_id') == eventIdYouAreLookingFor) { var event = scheduler._rendered[i]; event.style.backgroundColor = 'green'; } }

Edit:
Or, even better, you can use scheduler.for_rendered:

function updateCSS(event_div) { event_div.style.backgroundColor = 'green'; } scheduler.for_rendered(yourEventId, updateCSS);

Best regards,
Ilya

#3

Thank you.
This is how I do it now:

    var rule = {'id':event_id, 'delay':500, 'cssclass':'errorclass'};
    scheduler.for_rendered(rule.id, function (el) {
      addClass(el, rule.cssclass);
      setTimeout(function() {removeClass(el, rule.cssclass);}, rule.delay);
    });

Where can I find out about
scheduler.for_rendered() and others?
As its not in the API-Documentation…

#4

Hello,

These functions were not intended for the public API and that is why they are missing in the documentation.
Same thing could be achieved using only public API as well by setting custom CSS classes for events through a template with the help of some sort of flags.
For example:

scheduler.templates.event_class = function(start, end, event) { if(isAjaxInProgress) return 'ajax_loading'; } ... // your Ajax function isAjaxInProgress = true; scheduler.updateEvent("event_id"); ... // Ajax callback isAjaxInProgress = false; scheduler.updateEvent("event_id");

Best regards,
Ilya

#5

Thanks for the reply, but my solution is not for the ejax but to visualize the result.
It changes the class and changes it back half a second later (the event-title is flashing red if some error occured on saving that event or green if the changes where successfully written).

It works well, so all is good. :wink:

#6

Does this code still work in the current version of Scheduler? It was working for us earlier, but recently noticed it’s no longer working.

I use this code:

function updateCSS(event_div) {
    event_div.style.backgroundColor = '#6464FF';
}
scheduler.for_rendered(yourEventId, updateCSS);

And I get:

#7

oops - never mind. Just a transcription error.