Event colours on page change

Scheduler Javascript
#1

Hi all.

I’ve created a number of conditions based on temporal dates, ie startdate & enddates and relative relationships with today. If end date is less than a do colour a, if b do colour b etc.

I have added css styling in the scheduler_ext.css and on init load the colour formatting is applied successfully however when clicking the next or previous view on the month view the default yellow re-appears. I have seen that the scheduler.css file has a reference to the yellow colour used but want the _ext.css file to take precedence.

Could you tell me how to force reload of the colour formatting please as the colour scheme is used as an important way to see at a glance the status/urgency of an event! I have put the style calls inside the init() so on page changes should refer to this but alas its not working.
Thanks in advance!

#2

Hello,

Please provide your code.

Could you tell me how to force reload of the colour formatting please as the colour scheme is used as an important way to see at a glance the status/urgency of an event!

event_class template should do the trick. If it doesn’t work for you please provide link to your page or complete demo where we could reproduce this issue.

Best regards,
Ilya

#3

The init function contains the following:

[code]var week = new Date();
week.setDate(week.getDate()+7);

// Make event grey
scheduler.templates.event_class=function(start,end,event){
    if (start && end < (new Date())) //if start and end dates are before the date now
        return "past_event"; //then set past_event css class for it

    else
        // Make event red if due within a week
        scheduler.templates.event_class=function(start,end,event){
            if (end > (new Date()) && end < (week)) // if task is due within a week
                return "urgent_event"; //then set urgent_event css class for it
    
            else
                // Make event green!
                scheduler.templates.event_class=function(start,end,event){
                    return "future_event"; //then set future_event css class for it
                }
        }
}[/code]

The page loads like this:

1024×640 65.6 KB

As you can see the first task for urgent events appears white and the first future event shows the yellow instead of green!

When any other view is selected (day, week, fullscreen) the colours go haywire and past events become coloured as green as if it is in the future etc or the yellow.

1024×566 111 KB

Another issue is that if browser in full-screen view drops down the tabs in firefox 4 the colours reset, as do they when clicking the previous or next tabs.

Hope there is some way to overcome this as the use of colours by task properties is essential!

Thanks in advance!!

#4

Hello,

I believe you are using templates.event_class function incorrectly: you are redefining it during execution but you simply need make some checks on date and return correct class.

[code]scheduler.templates.event_class = function(start, end, event) {
var week = new Date();
week.setDate(week.getDate() + 7);
if (start && end < (new Date())) //if start and end dates are before the date now
return “past_event”; //then set past_event css class for it

else {
// Make event red if due within a week
    if (end > (new Date()) && end < (week)) // if task is due within a week
        return "urgent_event"; //then set urgent_event css class for it
    else
    // Make event green!
        return "future_event"; //then set future_event css class for it
}

};[/code]
Best regards,
Ilya