My favorites | Sign in
Project Home Issues
New issue   Search
for
  Advanced search   Search tips   Subscriptions
Issue 900: Word wrap for calendar text
3 people starred this issue and may be notified of changes. Back to list
Status:  Done
Owner:  ----
Closed:  May 2011


Sign in to add a comment
 
Reported by djordjev...@gmail.com, Apr 11, 2011
I think there should be added word-wrap attribute for fc-event-inner class ( word-wrap: break-word;) This way it can handle much more longer words. This is how it's implemented with google calendar.

CalendarScreen.png
27.9 KB   View   Download
Apr 13, 2011
#1 p.stud...@gmail.com
I had the same issue on mine. Long words do not fit properly in the month view.
The only thing was to set overflow to hidden in CSS2
or use 

.fc-event-title { text-wrap: unrestricted; word-wrap: break-word} /*If text does not fit in event then hide it. CSS3 Only  */

If the browser is not CSS3 compatible then it will overflow till the end of the word.
Apr 13, 2011
#2 djordjev...@gmail.com
Yes, it's better to put this in class fc-event-title. I know that word-wrap is only supported in css3, but to be honest, this property is invented from Microsoft, and it's supported from IE6 - IE9. All new browsers support this property, and I think safe to use it. People usually have issues with ie. I've tested this in new Opera,Safari, FF, Chrome and thre were no problems.
Apr 13, 2011
#3 p.stud...@gmail.com
do you know the IE specific calls for word-wrap? break-word? for IE < 9
Apr 13, 2011
#4 djordjev...@gmail.com
CSS word-wrap property is Microsoft invention and is supported since version 5.5.
Now it's just implemented in CSS3 standard.
May 8, 2011
Project Member #5 adamrs...@gmail.com
since the browser support of word-wrap is somewhat questionable, i'd prefer to leave it out of the fullcalendar release, so that things look consistent across browsers by default.

developers can always add their own css rules to customize, like what p.stud wrote
Status: Done
Jun 9, 2011
#7 cal...@gmail.com
for me to work ok was: 

.fc-event-title {
	padding: 0 1px;
	white-space:nowrap; 
	overflow: hidden;
	}
Sign in to add a comment

Powered by Google Project Hosting