fix [unreleased] bug with event text overflow

jmirmina · Mar 18, 2013 · 05a8a23 · 05a8a23
1 parent 8398608
commit 05a8a23
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 5 deletions.
diff --git a/src/agenda/AgendaEventRenderer.js b/src/agenda/AgendaEventRenderer.js
@@ -303,12 +303,14 @@ function AgendaEventRenderer() {
 			" class='" + classes.join(' ') + "'" +
 			" style='position:absolute;z-index:8;top:" + seg.top + "px;left:" + seg.left + "px;" + skinCss + "'" +
 			">" +
+			"<div class='fc-event-inner'>" +
 			"<div class='fc-event-time'>" +
 			htmlEscape(formatDates(event.start, event.end, opt('timeFormat'))) +
 			"</div>" +
 			"<div class='fc-event-title'>" +
 			htmlEscape(event.title) +
 			"</div>" +
+			"</div>" +
 			"<div class='fc-event-bg'></div>";
 		if (seg.isEnd && isEventResizable(event)) {
 			html +=

diff --git a/src/agenda/agenda.css b/src/agenda/agenda.css
@@ -114,8 +114,7 @@
 	font-size: 10px;
 	}
 
-.fc-event-vert .fc-event-time,
-.fc-event-vert .fc-event-title {
+.fc-event-vert .fc-event-inner {
 	position: relative;
 	z-index: 2;
 	}

diff --git a/src/common/DayEventRenderer.js b/src/common/DayEventRenderer.js
@@ -171,15 +171,17 @@ function DayEventRenderer() {
 			html +=
 				" class='" + classes.join(' ') + "'" +
 				" style='position:absolute;z-index:8;left:"+left+"px;" + skinCss + "'" +
-				">";
+				">" +
+				"<div class='fc-event-inner'>";
 			if (!event.allDay && seg.isStart) {
 				html +=
 					"<span class='fc-event-time'>" +
 					htmlEscape(formatDates(event.start, event.end, opt('timeFormat'))) +
 					"</span>";
 			}
 			html +=
-				"<span class='fc-event-title'>" + htmlEscape(event.title) + "</span>";
+				"<span class='fc-event-title'>" + htmlEscape(event.title) + "</span>" +
+				"</div>";
 			if (seg.isEnd && isEventResizable(event)) {
 				html +=
 					"<div class='ui-resizable-handle ui-resizable-" + (rtl ? 'w' : 'e') + "'>" +

diff --git a/src/common/common.css b/src/common/common.css
@@ -140,7 +140,6 @@
 ------------------------------------------------------------------------*/
 
 .fc-event {
-	overflow: hidden;
 	border: 1px solid #3a87ad; /* default BORDER color */
 	background-color: #3a87ad; /* default BACKGROUND color */
 	color: #fff;               /* default TEXT color */
@@ -161,6 +160,11 @@ a.fc-event,
 .fc-rtl .fc-event {
 	text-align: right;
 	}
+
+.fc-event-inner {
+	width: 100%;
+	overflow: hidden;
+	}
 
 .fc-event-time,
 .fc-event-title {

diff --git a/tests/long_event_titles.html b/tests/long_event_titles.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link href='../build/out/fullcalendar.css' rel='stylesheet' />
+<link href='../build/out/fullcalendar.print.css' rel='stylesheet' media='print' />
+<script src='../build/out/jquery.js'></script>
+<script src='../build/out/jquery-ui.js'></script>
+<script src='../build/out/fullcalendar.js'></script>
+<script>
+
+	$(document).ready(function() {
+
+		var date = new Date();
+		var d = date.getDate();
+		var m = date.getMonth();
+		var y = date.getFullYear();
+
+		$('#calendar').fullCalendar({
+			header: {
+				left: 'prev,next today',
+				center: 'title',
+				right: 'month,agendaWeek,basicWeek,agendaDay,basicDay'
+			},
+			editable: true,
+			events: [
+				{
+					title: 'Allllllllllllllllll Day Event',
+					start: new Date(y, m, 1)
+				},
+				{
+					title: 'Longggggggggggggggg Event',
+					start: new Date(y, m, d-5),
+					end: new Date(y, m, d-2)
+				},
+				{
+					id: 999,
+					title: 'Repeatinggggggggggggggggg Event',
+					start: new Date(y, m, d-3, 16, 0),
+					allDay: false
+				},
+				{
+					id: 999,
+					title: 'Repeating Eventtttttttttttttttttttttttttttttttttttt',
+					start: new Date(y, m, d+4, 16, 0),
+					allDay: false
+				}
+			]
+		});
+
+	});
+
+</script>
+<style>
+
+	body {
+		margin-top: 40px;
+		text-align: center;
+		font-size: 13px;
+		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
+		}
+
+	#calendar {
+		width: 900px;
+		margin: 0 auto;
+		}
+
+	.fc-event {
+		color: red;
+		}
+
+</style>
+</head>
+<body>
+<div id='calendar'></div>
+</body>
+</html>