Is it possible to style calendarevent cells dynamically?

[mathias]

In many of your calendar examples, you have some events in a different color, by setting the style of the event. However, those styles are hard-coded in the testdata, which would mean that it would be up to the server-side to decide on styles.

What i'm after is a way to set the cell visual parameters dynamically somehow, for example using the same type of process as the "EventBodyHTMLCustomizer", where i set the event cell body based on the data coming from the server. I want to for example inspect an attribute, and if it's "1", render the background of that cell black.

Is this possible? I have poked around in timeline class for customizers etc. but if it's there i managed to miss it.

[Isomorphic]

It's not clear what you're trying to style here - when you talk about styling "cells", do you just mean as already discussed here, ie, the body of some EventCanvas? So, the only difference is that you don't want to use a CSS styleName?

If so, you can call event.setBackgroundColor() and related APIS, from the same customizer, based on whatever you like. See the documentation for CalendarEvent.

If you mean something else, please clarify.

[mathias]

Yes, i want to at least change the cell background color to distinguish it depending on a field in the record coming from the server. I have no problem using stylenames i define, but i need a hook to set the style for the individual cells when they are to be rendered.

OK, i looked at the CalendarEvent parameter in the htmlcustomizer, and you're right that there's a "setBackgroundColor" on the calendarevent. I tried it however, and get kind of strange results.

In my timeline, i call setEventStyleName for the style i want generally. I then, in my HTMLCustomizer tried to just set the background to green like this:

setEventBodyHTMLCustomizer(new EventBodyHTMLCustomizer() {    
@Override    
public String getEventBodyHTML(CalendarEvent calendarEvent, CalendarView calendarView) {        
 calendarEvent.setBackgroundColor("green");                          
   return    timeFormat.format(calendarEvent.getAttributeAsDate(NubaClientServerConstants.FIELD_INTIME)) + " - " + timeFormat.format(calendarEvent.getAttributeAsDate(NubaClientServerConstants.FIELD_OUTTIME));    
 }

First of all, it only sets the lower part of the even t. Then i tried to resize the event, and then it changed the middle part of the eventbox - for all events in the timeline! I made a video to illustrate but i can't seem to upload it. Instead, see the images that show before and after i dragged the rightmost event.

I'll try to set the style dynamically rather than setting the background color to see if it works better, but if you can see anything i need to do differently, i'm all ears.

(firefox and smartgwt 6.0)

[Isomorphic]

Your description isn't very clear, here, but there are several problems from the images.

Firstly, of course the events will all turn green, because you're always setting the backgroundColor to green. There's no conditional to limit that call.

Secondly, the "bottom part" that you're talking about is the body of the eventCanvas, and the "top part" is the header of that eventCanvas. They have different styles...

As we noted earlier, as well as event.setBackgroundColor(), there are related APIs - you should read the documentation for CalendarEvent, to discover the other settings that control styling in this area.

But note that using CSS classes is a cleaner mechanism and offers more control.

If you still have issues getting the effect you need, please provide a standalone test-case we can run to see the problem.

[mathias]

Hey thanks for quick response!

1. OK, regarding "all events" i was a bit unclear. Yes naturally they are all redrawn, but i meant that also the event i didn't drag was redrawn when i resized one event.

2. I tried changing all "background colors" i could find, both on the calendarevent and the "calendarView" but i couldn't get the top half to change color. Surely i missed something.


Now, some followup regarding CSS:

I added a new style in my skin_styles, "repEventWindow" and set it in the customizer like this:

 calendarEvent.setStyleName("repEventWindow");

What i am noticing is that it does not get the new style initially, it must be redrawn in some way. Either by me doing a drag, which now only changes the event being dragged, or by doing something else in the browser. For firefox, when i show/hide the developerwindow, the event becomes changed to the new style.

It seems strange that i'd have to trigger some extra redraw-event manually, or is there something else i'm missing?

[Isomorphic]

Did you try setHeaderBackgroundColor()?

Anyway- if you only want to set the style for each event once, but you don't know what it is in advance, then you can either set it on your event-data at the server before you it, or loop over your client-data/use transformResponse() to set the styleName once on each event.

If, however, you want to change the style of a single event at runtime, in the same CalendarView, then that isn't a specific builtin feature of our SGWT Calendars - the styleName is applied before the bodyHTML customizer fires, so, really, it isn't strange that you might not see the styling until a refresh.

[mathias]

If, however, you want to change the style of a single event at runtime, in the same CalendarView, then that isn't a specific builtin feature of our SGWT Calendars

Yes, yes. That is indeed what this entire thread has been about. Changing the calendarevent dynamically when it is loaded, from within those customizers you provide or otherwise.

It was actually you that suggested in the beginning that i call the color-methods on the CalendarEvent object in your first response. :) If it's now "expected" that you can't change the objects being sent in to the html customizer, it might be a good idea to mention that in the documentation for the different HTML Customizer classes, and on the methods for the Timeline class.

(Again, SOME of the styling does get applied!! calling the 'setBackgroundColor' on the calendarevent from within the customizer works, it changes the color of the bottom half. The 'setHeaderBackgroundColor' or changing the styleName does not, until you refresh the screen. As i mentioned above, i tried calling all "setcolor" methods i could find in both the parameters of the HTMLCustomizer. So i can't see why this functionality *couldn't* be made to work for all parts of the event box)


I suppose i'll take a look at how transformresponse works then. thanks.

[Isomorphic]

That isn't quite what we said, which was that what you're trying to do isn't specifically a feature of our SGWT Calendars. As we noted, your initial descriptions weren't clear and we were offering possibilities.

That aside - the reason you're not seeing header-styling change is the timing of the customizer you're hooking - it runs after the header is set up, so header color wouldn't take effect until eventCanvas.getInnerHTML() runs again.

Changing the header colors in a separate EventHeaderHTMLCustomizer, which runs at the right time, would likely address that.

Again, note that this is not a specific, intended feature - we're just trying to offer you a way of doing it - so, we agree, their might be issues.

If there are, please do provide a test-case so we can look into your issues.

[mathias]

OK, i did as you suggested, creating both a "EventHTMLCustomizer" and an "EventHeaderHTMLCustomizer", in my TimeLine class changing the header background in one, and the body background in the other... like this:

setEventBodyHTMLCustomizer(new EventBodyHTMLCustomizer() {
    @Override
    public String getEventBodyHTML(CalendarEvent calendarEvent, CalendarView calendarView) {
        if(calendarEvent.getAttribute(ClientServerConstants.FIELD_REPID) != null){
            calendarEvent.setBackgroundColor("#33A0B9");
        }
        return timeFormat.format(calendarEvent.getAttributeAsDate(ClientServerConstants.FIELD_INTIME)) + " - " + timeFormat.format(calendarEvent.getAttributeAsDate(ClientServerConstants.FIELD_OUTTIME));

    }
});

setEventHeaderHTMLCustomizer(new EventHeaderHTMLCustomizer() {
    @Override
    public String getEventHeaderHTML(CalendarEvent calendarEvent, CalendarView calendarView) {
        if(calendarEvent.getAttribute(ClientServerConstants.FIELD_REPID) != null){
            calendarEvent.setHeaderBackgroundColor("#33A0B9");
        }
        return calendarEvent.getAttribute(ClientServerConstants.FIELD_LOCNAME);
    }
});

(As you can see in the code, i want a different color in the box when a Record from the server has a certain attribute set.)

What happens is that when the timeline loads, the box colors are applied are just as i would like.

However, just as before as soon as i "do" something in the timeline, for example move an event, the white background of the description text gets overwritten by the background color.

Attached you can see two screenshots depicting it, before and after i extend an event.

[Isomorphic]

Ok, that's a specific bad behavior we can check on - however, improving this flow will likely involve dedicated APIs/customizers, and new APIs like that won't be ported back as far as 6.0, to support what would essentially be a new public feature.

In any case, since you *are* only trying to set the styles once, and since there is already a working codepath for that, the best approach remains the one we suggested in post #6; set either the styleName or the styling properties on the event-records up-front, at the server before you send the data, or via a method like transformResponse() as they arrive at the client, where you just loop over the data and update record-values accordingly.

[mathias]

Yeah, it seems i have to look into how to do a transformresponse then. Thanks for your input! Looking forward to some structured way of doing this if/when we upgrade.