Calendar display issues

- Give owner name / calendar label its own space to avoid colliding with first day header
- Full day non-blocking now have their own dedicated space

calendar/js/app.js

@@ -641,7 +641,8 @@ app.classes.calendar = AppJS.extend(
 
 					return false;
 				}
-			)
+			);
+		jQuery(framework.applications.calendar.tab.contentDiv).swipe('destroy')
 			.swipe({
 				//Generic swipe handler for all directions
 				swipe:function(event, direction, distance, duration, fingerCount) {
@@ -667,7 +668,10 @@ app.classes.calendar = AppJS.extend(
 					scroll_animate.call($j(event.target).closest('.calendar_calTimeGrid, .calendar_plannerWidget')[0], direction, delta)
 					return false;
 				},
-				allowPageScroll: jQuery.fn.swipe.pageScroll.VERTICAL
+				allowPageScroll: jQuery.fn.swipe.pageScroll.VERTICAL,
+				threshold: 100,
+				fallbackToMouseEvents: false,
+				triggerOnTouchEnd: false
 			});
 
 		// Page up & page down

calendar/js/et2_widget_daycol.js

@@ -72,6 +72,9 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
 			.css('left', this.options.left);
 		this.title = $j(document.createElement('div'))
 			.appendTo(this.header);
+		this.all_day = $j(document.createElement('div'))
+			.addClass("calendar_calDayColAllDay")
+			.appendTo(this.header);
 		
 		this.setDOMNode(this.div[0]);
 
@@ -320,7 +323,8 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
 			if(this.div)
 			{
 				this.div.css('left',left);
-				this.header.css('left',left);
+				// Headers are positioned relative
+				//this.header.css('left',left);
 			}
 		},this),1);
 		
@@ -330,8 +334,8 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
 		window.setTimeout(jQuery.proxy(function() {
 			if(this.div)
 			{
-				this.div.width(this.options.width);
+				this.div.outerWidth(this.options.width);
-				this.header.width(this.options.width);
+				this.header.outerWidth(this.options.width);
 			}
 		},this),1);
 	},
@@ -557,7 +561,7 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
 				if(columns[c][i].options.value.whole_day_on_top)
 				{
 					columns[c][i].div
-						.appendTo(this.header);
+						.appendTo(this.all_day);
 					continue;
 				}
 				else

calendar/js/et2_widget_timegrid.js

@@ -501,25 +501,24 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
 		var wd_end = 60*this.options.day_end;
 		var granularity = this.options.granularity;
 		var totalDisplayMinutes	= wd_end - wd_start;
-		var rowsToDisplay	= (totalDisplayMinutes/granularity) + (60 / granularity);
+		var rowsToDisplay	= (totalDisplayMinutes + 60)/granularity;
 		// Percent
 		var rowHeight = (100/rowsToDisplay).toFixed(1);
-		// Pixels - add 1 for room for header
+		// Pixels
-		this.rowHeight = this.div.height() / (rowsToDisplay + 1);
+		this.rowHeight = this.div.height() / rowsToDisplay;
-
+debugger;
 		this.gridHeader
 			.empty()
-			.css('height', this.rowHeight+'px')
 			.attr('data-date', this.options.start_date)
 			.attr('data-owner', this.options.owner)
-			.append(this.options.label)
+			.append(this._labelContainer)
 			.append(this.owner.getDOMNode())
 			.append(this.dayHeader)
 			.appendTo(this.div);
 
+		var header_height = this.gridHeader.height();
 		this.scrolling
-			.css('top', this.rowHeight+'px')
+			.css('height', (this.options.height - header_height)+'px')
-			.css('height', (this.options.height - this.rowHeight)+'px')
 			.appendTo(this.div)
 			.empty();
 
@@ -577,8 +576,7 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
 		{
 			this.day_list = this._calculate_day_list(this.options.start_date, this.options.end_date, this.options.show_weekend);
 		}
-
+		var day_width = ( this.days.width()/this.day_list.length);
-		var day_width = (100/this.day_list.length).toFixed(2);
 
 		// Create any needed widgets - otherwise, we'll just recycle
 		// Add any needed day widgets (now showing more days)
@@ -591,7 +589,7 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
 			
 			var day = et2_createWidget('calendar-daycol',{
 				owner: this.options.owner,
-				width: (before ? 0 : day_width) + "%"
+				width: (before ? 0 : day_width) + "px"
 			},this);
 			if(this.isInTree())
 			{
@@ -638,12 +636,12 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
 			day = this.day_widgets[i];
 			
 			// Position
-			day.set_left((day_width * i) + '%');
+			day.set_left((day_width * i) + 'px');
 			
 			day.set_date(this.day_list[i], this.value[this.day_list[i]] || false);
 			day.set_owner(this.options.owner);
 			day.set_id(this.day_list[i]);
-			day.set_width(day_width + '%');
+			day.set_width(day_width + 'px');
 		}
 		
 		// Don't hold on to value any longer, use the data cache for best info
@@ -1142,10 +1140,8 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
 	set_label: function(label)
 	{
 		this.options.label = label;
-		this.gridHeader.contents().filter(function() {
+		this._labelContainer.html(label);
-			return (this.nodeType == 3);
+		this.gridHeader.prepend(this._labelContainer);
-		}).remove();
-		this.gridHeader.append(label);
 
 		// If it's a short label (eg week number), don't give it an extra line
 		// but is empty, but give extra space for a single owner name

calendar/templates/default/app.css

@@ -137,7 +137,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	position: relative;
 	top: 0px;
 	left: 0px;
-	border:1px solid silver;
 	-webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
@@ -151,19 +150,12 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 }
 
 .calendar_calTimeGrid .calendar_calTimeGridScroll {
-	position: absolute;
+	position: relative;
 	bottom: 0px;
 	width: 100%;
 	overflow-y: auto;
 	overflow-x: hidden;
 }
-.calendar_calTimeGrid.calendar_TimeGridNoLabel > .calendar_calDayCols {
-	top: 0em;
-}
-
-.calendar_calTimeGrid.calendar_TimeGridNoLabel > .calendar_calGridHeader {
-	top: 0em;
-}
 
 /* single row in the time-line you dont need to set a bgcolor, but you can
  */
@@ -230,36 +222,45 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 /* header for the dayCol
  */
 .calendar_calDayColHeader,.calendar_calGridHeader,.calendar_calGridHeader > div {
-	position: absolute;
-	top: 0px;
-	left: 0px;
-	width: 100%;
-	right: 0px;	/* does not work in IE, but looks better in other browsers then width:100% */
-	text-align: center;
 	font-size: 100%;
-	white-space: nowrap;
-	border-bottom: 1px solid silver;
-	border-right: 1px solid silver;
-	height: 16px;
 	line-height: 16px;
 }
 .calendar_calDayColHeader {
+	display: inline-block;
+	position: relative;
 	vertical-align: top;
-	height: 100%;
+	border-right: 1px solid silver;
+	height: initial;
+	min-height: 4em;
 	/* Nice transition when changing days in a week */
 	transition: width 1s ease-in-out;
 	z-index:30;
+	white-space: initial;
 }
 .calendar_calDayColHeader > div[data-date] {
 	height: 16px;
+	text-align: center;
+	border-bottom: 1px solid silver;
+}
+.calendar_calDayColAllDay {
+	display: flex;
+	flex-wrap: wrap;
+	width: 100%;
+	height: 100%
 }
 .calendar_calGridHeader > div {
-	position: absolute;
+	position: relative;
-	left: 45px;
+	height: 100%;
-	right: 15px;
+	margin-left: 43px;
 	width: initial;
 	white-space: nowrap;
 }
+.calendar_calGridHeader > label {
+	float: left;
+}
+.calendar_TimeGridNoLabel > .calendar_calGridHeader > ul {
+    display: none;
+}
 .calendar_calDayColHeader img {
 	vertical-align: middle;
 }
@@ -312,6 +313,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	text-align: left;
 	padding-left: 3px;
 	z-index: 29;
+	border-bottom: 1px solid silver;
 }
 #calendar-view_view tbody.ui-sortable {
 	cursor: default;
@@ -412,6 +414,9 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 .calendar_calDayColHeader .calendar_calEvent {
 	position: static;
 	display: inline-block;
+	white-space: nowrap;
+	/* This determines how many per line */
+	flex: 1 1 6ex;
 }
 .calendar_calEventTooltip{
 	border-radius: 6px;

calendar/templates/pixelegg/app.css

@@ -690,7 +690,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 /* timeGridWidget, contains timeRow's and dayCol's
  */
 .calendar_calTimeGrid {
-  border: 1px solid silver;
   background-color: #f0f0f0;
   /* set via inline style on runtime:
      *  height:
@@ -716,19 +715,11 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 }
 /* header for the dayCol
  */
-.calendar_calDayColHeader,
-.calendar_calGridHeader {
-  border-bottom: 1px solid silver;
-  border-right: 1px solid silver;
-}
 .calendar_calDayColHeader a img,
 .calendar_calGridHeader a img {
   position: relative;
   top: 0px;
 }
-.calendar_calGridHeader {
-  border: none;
-}
 /*header for the weekCol*/
 .calendar_calWeekNavHeader,
 .calendar_calMonthNavHeader {

calendar/templates/pixelegg/app.less

@@ -802,7 +802,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 /* timeGridWidget, contains timeRow's and dayCol's
  */
 .calendar_calTimeGrid{
-    border:1px solid silver;
     .background_color_10_gray;
     /* set via inline style on runtime:
      *  height:
@@ -832,9 +831,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 /* header for the dayCol
  */
 .calendar_calDayColHeader,.calendar_calGridHeader{
-    border-bottom: 1px solid silver;
-    border-right: 1px solid silver;
-
         a {
         img {
             position: relative;
@@ -844,9 +840,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 
 }
 
-.calendar_calGridHeader{ border: none; }
-
-
  /*header for the weekCol*/
 
 .calendar_calWeekNavHeader,.calendar_calMonthNavHeader{