Add Event Class Property

[GoogleCodeExporter]

Would need to be able to have styling option per event to signify event
types or calendar group. Assigning a class per element would be perfect.

Great work to this point.

Original issue reported on code.google.com by shaunpco...@gmail.com on 5 May 2009 at 2:30

[GoogleCodeExporter]

hi Shaun,
You can effectively do this by using the 'eventRender' triggered event. It is 
passed
the 'CalEvent' as well as the element it will subsequently add to the dom. You 
can
.addClass() to the element based on the info in the CalEvent object.

Original comment by adamrs...@gmail.com on 5 May 2009 at 3:03

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Original comment by adamrs...@gmail.com on 5 May 2009 at 3:07

• Changed state: Done

[GoogleCodeExporter]

Can you explain how I can identify the element that is going to be added to the 
DOM?
I cannot locate anything about it in the documntation.

Original comment by shaunpco...@gmail.com on 5 May 2009 at 4:21

[GoogleCodeExporter]

the element that is going to be added to the dom is *passed* into the function. 
heres
an example of what you might want to do:

eventRender: function(event, element) {
    if (event.type == 'meeting') {
        element.addClass('meeting');
    }
}

Original comment by adamrs...@gmail.com on 5 May 2009 at 4:33

[GoogleCodeExporter]

This is close to what would work, but ideally I would want to update the 
follwing
style call based on 'type' :  .full-calendar-month .event td

Is this possible?

Original comment by shaunpco...@gmail.com on 5 May 2009 at 4:48

[GoogleCodeExporter]

in the context of my previous example, you could have the following line in a 
stylesheet:

.full-calendar-month .meeting td { background: red }

OR, you could change the javascript to do the same things:

eventRender: function(event, element) {
    if (event.type == 'meeting') {
        element.find('td').css('background', 'red');
    }
}

Original comment by adamrs...@gmail.com on 5 May 2009 at 4:57

[GoogleCodeExporter]

Great! Thanks for the help. I ended up searching out certain styles so I could
maintain the rounded look:
eventRender: function(event, element) {
switch (event.type){
    case 'event' :
        element.find('.n, .w, .c, .e, .s').css('background-color', '#00cc33');
    break;
    case 'project' :
        element.find('.n, .w, .c, .e, .s').css('background-color', 'red');
    break;
    default :
        break;
    }
},  

Original comment by shaunpco...@gmail.com on 5 May 2009 at 5:34

[GoogleCodeExporter]

cool, glad you got it to work

Original comment by adamrs...@gmail.com on 5 May 2009 at 2:40