Calendar list view

Test first

api/functions/homepage-functions.php

@@ -335,6 +335,10 @@ function getHomepageList()
         array(
             'name' => 'Week',
             'value' => 'basicWeek'
+        ),
+        array(
+            'name' => 'List',
+            'value' => 'list'
         )
     );
     $timeFormat = array(

api/pages/homepage.php

@@ -23,22 +23,24 @@ $pageHomepage = '
         var y = date.getFullYear();
         var form = "";
         var today = new Date($.now());
+
         var $this = this;
         $this.$calendarObj = $this.$calendar.fullCalendar({
-            defaultView: (activeInfo.mobile) ? "basicDay" : "'.$GLOBALS['calendarDefault'].'",
+            defaultView: (activeInfo.mobile) ? "list" : "'.$GLOBALS['calendarDefault'].'",
             firstDay: "'.$GLOBALS['calendarFirstDay'].'",
             timeFormat: "'.$GLOBALS['calendarTimeFormat'].'",
             handleWindowResize: true,
             header: {
                left: "prev,next",
                center: "title",
-               right: (activeInfo.mobile) ? "" : "month,basicWeek,basicDay",
+               right: (activeInfo.mobile) ? "" : "month,basicWeek,basicDay,list",
             },
             views: {
                basicDay: { buttonText: window.lang.translate("Day"), eventLimit: '.$GLOBALS['calendarLimit'].' },
                basicWeek: { buttonText: window.lang.translate("Week"), eventLimit: '.$GLOBALS['calendarLimit'].' },
                month: { buttonText: window.lang.translate("Month"), eventLimit: '.$GLOBALS['calendarLimit'].' },
                today: { buttonText: window.lang.translate("Today") },
+               list: { buttonText: window.lang.translate("List"), duration: {months: 1} },
             },
             timezone: "local",
             editable: false,
@@ -46,18 +48,18 @@ $pageHomepage = '
             selectable: false,
             height: "auto",
             eventRender: function eventRender( event, element, view ) {
-            	if (typeof filter !== "undefined") {
-            		if(filter === "all"){
-            			return event.imagetype === event.imagetype;
-            		}else if(filter !== "all"){
-            			return filter === event.imagetype;
-            		}
-            		if(filter === null){
-            			return event.imagetype === event.imagetype;
-            		}
-            	}else {
-            		return event.imagetype === event.imagetype;
-            	}
+                if (typeof filter !== "undefined") {
+                    if(filter === "all"){
+                        return event.imagetype === event.imagetype;
+                    }else if(filter !== "all"){
+                        return filter === event.imagetype;
+                    }
+                    if(filter === null){
+                        return event.imagetype === event.imagetype;
+                    }
+                }else {
+                    return event.imagetype === event.imagetype;
+                }
             },
         });
     },
@@ -74,7 +76,7 @@ function($) {
     '.buildHomepage().'
 </div>
 <div id="open-youtube" class="white-popup mfp-with-anim mfp-hide">
-	<div class="col-md-8 col-md-offset-2 youtube-div">	</div>
+    <div class="col-md-8 col-md-offset-2 youtube-div">  </div>
 </div>
 <!-- /.container-fluid -->
 ';

css/organizr.css

@@ -345,6 +345,14 @@ td span.label.label-info {
     background: #2cabe3;
 }
 
+th.fc-list-header {
+  text-align: left;
+}
+
+th.fc-list-header > .fc-list-heading-alt {
+  margin-left: 10px;
+}
+
 .bg-calendar {
     background: transparent;
     color: inherit;

js/custom.js

@@ -329,6 +329,14 @@ function pageLoad(){
     $('.simple-ajax-popup').magnificPopup({
         type: 'ajax'
     });
+
+    //limit height of calendar list view
+    $('.fc-scroller').slimScroll({
+        height: '400px',
+        position: 'right',
+        size: "5px",
+        color: '#dcdcdc'
+    });
 }
 /* ===== Sidebar ===== */
 

plugins/bower_components/calendar/dist/fullcalendar.js

@@ -14508,7 +14508,7 @@ var ListViewGrid = Grid.extend({
 		var altFormat = view.opt('listDayAltFormat');
 
 		return '<tr class="fc-list-heading" data-date="' + dayDate.format('YYYY-MM-DD') + ' ">' +
-			'<td class="' + view.widgetHeaderClass + '" colspan="3">' +
+			'<th class="fc-list-header ' + view.widgetHeaderClass + '" colspan="3">' +
 				(mainFormat ?
 					view.buildGotoAnchorHtml(
 						dayDate,
@@ -14523,51 +14523,96 @@ var ListViewGrid = Grid.extend({
 						htmlEscape(dayDate.format(altFormat)) // inner HTML
 					) :
 					'') +
-			'</td>' +
+			'</th>' +
 		'</tr>';
 	},
 
 	// generates the HTML for a single event row
-	fgSegHtml: function(seg) {
+	fgSegHtml: function(seg, disableResizing) {
 		var view = this.view;
-		var classes = [ 'fc-list-item' ].concat(this.getSegCustomClasses(seg));
-		var bgColor = this.getSegBackgroundColor(seg);
 		var event = seg.event;
-		var url = event.url;
-		var timeHtml;
-
-		if (event.allDay) {
-			timeHtml = view.getAllDayHtml();
-		}
-		else if (view.isMultiDayEvent(event)) { // if the event appears to span more than one day
-			if (seg.isStart || seg.isEnd) { // outer segment that probably lasts part of the day
-				timeHtml = htmlEscape(this.getEventTimeText(seg));
-			}
-			else { // inner segment that lasts the whole day
-				timeHtml = view.getAllDayHtml();
-			}
-		}
-		else {
-			// Display the normal time text for the *event's* times
-			timeHtml = htmlEscape(this.getEventTimeText(event));
-		}
+		var isDraggable = view.isEventDraggable(event);
+		var isResizableFromStart = !disableResizing && event.allDay &&
+			seg.isStart && view.isEventResizableFromStart(event);
+		var isResizableFromEnd = !disableResizing && event.allDay &&
+			seg.isEnd && view.isEventResizableFromEnd(event);
+		var classes = this.getSegClasses(seg, isDraggable, isResizableFromStart || isResizableFromEnd);
+		var skinCss = cssToStr(this.getSegSkinCss(seg));
+		var timeHtml = '';
+		var timeText;
+		var titleHtml;
+		var urlMeta = event.id ? htmlEscape(event.id) : 'none';
+		var metadata = `
+		<div id="`+urlMeta+`" class="white-popup mfp-with-anim mfp-hide">
+	        <div class="col-md-8 col-md-offset-2 `+urlMeta+`-metadata-info"></div>
+	    </div>
+		<script>
+		$('.inline-popups').magnificPopup({
+	      removalDelay: 500, //delay removal by X to allow out-animation
+	      closeOnBgClick: true,
+	      //closeOnContentClick: true,
+	      callbacks: {
+	        beforeOpen: function() {
+	           this.st.mainClass = this.st.el.attr('data-effect');
+	           this.st.focus = '#request-input';
+	       },
+	       close: function() {
+	          if(typeof player !== 'undefined'){
+	              console.log('STOP STOP STOP')
+	              player.destroy();
+	          }
+	        }
+	      },
+	      midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
+	    });
+		</script>
+		`;
+		var detailsJSON = JSON.stringify(event.details);
+		classes.unshift('fc-day-grid-event', 'fc-h-event');
 
-		if (url) {
-			classes.push('fc-has-url');
+		// Only display a timed events time if it is the starting segment
+		if (seg.isStart) {
+			timeText = this.getEventTimeText(event);
+			if (timeText) {
+				timeHtml = '<span class="fc-time '+(htmlEscape(event.imagetype || '') || '&nbsp;')+'">' + htmlEscape(timeText) + '</span><br/>';
+			}else{
+       			timeHtml = '<br/>';
+   			}
 		}
+		titleHtml =
+			'<span class="fc-title">' +
+				(htmlEscape(event.title || '') || '&nbsp;') + // we always want one line of height
+			'</span>';
+        imageHtml =
+			'<span class="fc-image"><i class="fa fa-' +
+				(htmlEscape(event.imagetype || '') || '&nbsp;') + // we always want one line of height
+			'"></i></span>';
 
-		return '<div class="' + classes.join(' ') + '">' +
-			(this.displayEventTime ?
-				'<p class="fc-list-item-time ' + view.widgetContentClass + '">' +
-					(timeHtml || '') +
-				'</p>' :
-				'') +
-			'<p class="fc-list-item-title ' + view.widgetContentClass + '">' +
-				'<list' + (url ? ' href="' + htmlEscape(url) + '"' : '') + '>' +
-					htmlEscape(seg.event.title || '') +
-				'</list>' +
-			'</p>' +
-		'</div>';
+		return '<a class="inline-popups ' + classes.join(' ') + '"' +
+				(event.id ?
+					' data-effect="mfp-zoom-out" data-target="'+ htmlEscape(event.id) +'" data-details="'+htmlEscape(detailsJSON) +'" data-mfp-src="#' + htmlEscape(event.id) + '"' :
+					''
+					) +
+				(skinCss ?
+					' style="' + skinCss + '"' :
+					''
+					) +
+			'>' +
+				'<div class="fc-content">' +
+					(this.isRTL ?
+						titleHtml + ' ' + timeHtml : // put a natural space in between
+						imageHtml + ' ' + timeHtml + ' ' + titleHtml   //
+						) +
+				'</div>' +
+				(isResizableFromStart ?
+					'<div class="fc-resizer fc-start-resizer" />' :
+					''
+					) +
+				(isResizableFromEnd ?
+					'<div class="fc-resizer fc-end-resizer" />' :
+					''
+				) +metadata+
+			'</a>';
 	}
 
 });