My favorites | Sign in
Project Home Issues
New issue   Search
for
  Advanced search   Search tips   Subscriptions
Issue 708: Unique styling of matching events - enhancement
2 people starred this issue and may be notified of changes. Back to list
Status:  Done
Owner:  ----
Closed:  Nov 2010


Sign in to add a comment
 
Reported by xxxmicro...@gmail.com, Nov 10, 2010
I have made my calendar so that dropped events have a unique colour.

This may not be suitable for most people as this is for a roster of 7 people where I give each person a different colour for visual clarity.

In fullcalendar.js in two places I changed

"<span class='fc-event-title'>" + htmlEscape(event.title) + "</span>"

to 

"<span class='fc-event-title " + htmlEscape(event.title).toLowerCase() + "'>" + htmlEscape(event.title) + "</span>"

adding the title of the event (in my case a single word, the person's name) as a class.

I then embedded styles matching the names e.g.

	.steve{
		background:#360;	
	}
	.debra{
		background:#FF0;	
	}

I also added the class to the external-event divs e.g.

<div class='external-event debra'>Debra</div>
<div class='external-event steve'>Steve</div>

I had to do some tweaks to make the background colour stretch the width of the title, which in fact was the trickiest part and isn't perfect yet.

See it in action at http://hinternet.com.au/projects/fullcalendar-1.4.8/

Hope that helps someone

Nov 10, 2010
#1 xxxmicro...@gmail.com
sheesh...google code...please delete this one, it didn't seem to submit so I had to reload the page and...well...sorry.
Nov 11, 2010
Project Member #2 althaus.it
You should be able to do that without changing any calendar code with setting "className" in the event source on the server:

http://arshaw.com/fullcalendar/docs/event_data/Event_Object/

and then just adding your CSS.
Nov 11, 2010
#3 xxxmicro...@gmail.com
Aha.  THanks yet again.

I think that what is missing and needed in the documentation is some examples or maybe more thorough demos.

This is such a complex plugin that it is difficult to go through the documentation and try to find things like "className".

I might add that this is one of the better jquery plugins I have used - congrats to those who are involved in developing it.
Nov 15, 2010
#4 geeky....@gmail.com
Haven't been able to get it to work.  My solution does though :P
Nov 21, 2010
Project Member #5 adamrs...@gmail.com
(No comment was entered for this change.)
Status: Done
Sign in to add a comment

Powered by Google Project Hosting