p:schedule with icons for events

[Dsleeper]

We've been evaluating JSF schedule components for some time now. I have tried both Myfaces Tomahawk and the Richfaces schedule components, but they are either to limited or too difficult to use properly. We've also tried to implement our own, but after working on it for some time it became clear that making it production ready would cost too much time.

I was therefore very happy to see that after a couple of hours work today, I have successfully implemented a working schedule using the Primefaces p:schedule component. It's by far the easiest and best JSF schedule component I've come across.

I need help with two things:
1. A Norwegian locale for the component. I have provided code to have that implemented in a new release: http://primefaces.prime.com.tr/forum/vi ... f=3&t=3607
2. I've been working with CSS to have different event types show different background colors and I found a working solution here: http://primefaces.prime.com.tr/forum/vi ... nts#p12440

However, I now have a requirement to put icons on the different event types that are supposed to show up in the schedule. So far I have created this styleclass and assigned it to DefaultScheduleEvent via setStyleClass("myEventClass"):

Code: Select all

.myEventClass a {
	background: transparent url(/bd/resources/images/xml_icon.png) scroll
		no-repeat left center;	
	padding: 2px 0px 2px 18px;	
}

With this class in place the icon is shown for every event with the styleclass association. My problem is that the padding for the icon pads the enclosing span outside of the day column in monthview.
See example:


I am no CSS guru so I have not been able to fix this problem. Have anybody successfully implemented icons for events on the p:schedule component? A working example would be great!

Running JSF 1.2 (Myfaces 1.2.8) with Primfaces 1.1 on Tomcat 6.0

[Dsleeper]

Found a solution to this. The enclosing div needs to have overflow: hidden.

I now use this CSS styleclass in addition the above definition:

Code: Select all

.fc-event {	
	overflow: hidden;
}

This simply adds the overflow hidden to the existing fc-event styleclass