My favorites | Sign in
Project Home Issues
New issue   Search
for
  Advanced search   Search tips   Subscriptions
Issue 6: Add Event Class Property
2 people starred this issue and may be notified of changes. Back to list
Status:  Done
Owner:  ----
Closed:  May 2009


Sign in to add a comment
 
Reported by shaunpco...@gmail.com, May 4, 2009
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.
May 4, 2009
Project Member #1 adamrs...@gmail.com
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.
May 4, 2009
Project Member #4 adamrs...@gmail.com
(No comment was entered for this change.)
Status: Done
May 4, 2009
#5 shaunpco...@gmail.com
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.
May 4, 2009
Project Member #6 adamrs...@gmail.com
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');
	}
}

May 4, 2009
#7 shaunpco...@gmail.com
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?
May 4, 2009
Project Member #8 adamrs...@gmail.com
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');
	}
}

May 4, 2009
#9 shaunpco...@gmail.com
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;
    }
},	
May 5, 2009
Project Member #10 adamrs...@gmail.com
cool, glad you got it to work
Sign in to add a comment

Powered by Google Project Hosting