My favorites | Sign in
Project Home Issues
New issue   Search
for
  Advanced search   Search tips   Subscriptions
Issue 1350: Truncate the title text
1 person starred this issue and may be notified of changes. Back to list
Status:  Invalid
Owner:  ----
Closed:  Aug 2013


Sign in to add a comment
 
Reported by adi.shou...@gmail.com, Mar 24, 2012
When the title of an event is very long. The text goes out of the boundaries of the event.

I want the text to best fit the event area and truncate the rest of the text. May be add '...' at the end to show that the text was truncated.
Jun 26, 2012
#1 zhaoyuan...@gmail.com
Have you got an answer?

Thanks,
Albert
Jun 27, 2012
#3 adi.shou...@gmail.com
I am using the following function. It obviously not a very good solution. But it works for me for now:

function truncateText(){
		$(".fc-event-inner.fc-event-skin").each(function(){
			//var contentContainer1 = this.find('div.fc-event-content');
			var curEventHead = $(this).children('div.fc-event-head');
			var curEventContent = $(this).children('div.fc-event-content');
			var curEventBg = $(this).children('div.fc-event-bg');
			var content = $(curEventContent).text();
			
			if($(curEventContent).text() != "")
			{
				while( ($(curEventBg).height() - $(curEventHead).height()) < $(curEventContent)[0].scrollHeight ){
					content = content.replace(/\s+\S*$/, "");
					curEventContent.text(content + " ...");
				}
			}
			else{
				//var content = $(this).children('span.fc-event-title').text();
//				if(content.length > 12){
//					content = content.substring(0,12) + '...';
//				}
//				$(this).children('span.fc-event-title').text(content);
			}
		});
	}


Call this method from "eventAfterRender" callback.
Aug 15, 2013
Project Member #4 adamrs...@gmail.com
you could write CSS for the '.fc-event-inner' div, and use the new overflow ellipsis property. beyond this, i can't help
Status: Invalid
Sign in to add a comment

Powered by Google Project Hosting