Added 15-minute slot selection to 1.5.1

demos/selectable.html

@@ -22,6 +22,8 @@
 			},
 			selectable: true,
 			selectHelper: true,
+			slotMinutes: 30, // update eventRender below when slotMinutes is changed
+			selectionSlotMinutes: 15, // this is the size of steps that events will be drawn, dragged and resized in
 			select: function(start, end, allDay) {
 				var title = prompt('Event Title:');
 				if (title) {

src/agenda/AgendaEventRenderer.js

@@ -47,6 +47,7 @@ function AgendaEventRenderer() {
 	var calendar = t.calendar;
 	var formatDate = calendar.formatDate;
 	var formatDates = calendar.formatDates;
+	var getSelectionSlotRatio = t.getSelectionSlotRatio; // read selection slot ratio
 	
 	
 	
@@ -463,7 +464,7 @@ function AgendaEventRenderer() {
 		var hoverListener = getHoverListener();
 		var colCnt = getColCnt();
 		var colWidth = getColWidth();
-		var slotHeight = getSlotHeight();
+		var slotHeight = getSlotHeight() / getSelectionSlotRatio();		// calculate height depending on selection slot ratio
 		eventElement.draggable({
 			zIndex: 9,
 			scroll: false,
@@ -501,7 +502,7 @@ function AgendaEventRenderer() {
 				}, ev, 'drag');
 			},
 			drag: function(ev, ui) {
-				minuteDelta = Math.round((ui.position.top - origPosition.top) / slotHeight) * opt('slotMinutes');
+				minuteDelta = Math.round((ui.position.top - origPosition.top) / slotHeight) * opt('selectionSlotMinutes');
 				if (minuteDelta != prevMinuteDelta) {
 					if (!allDay) {
 						updateTimeText(minuteDelta);
@@ -552,7 +553,7 @@ function AgendaEventRenderer() {
 	
 	function resizableSlotEvent(event, eventElement, timeElement) {
 		var slotDelta, prevSlotDelta;
-		var slotHeight = getSlotHeight();
+		var slotHeight = getSlotHeight() / getSelectionSlotRatio();		// calculate height depending on selection slot ratio
 		eventElement.resizable({
 			handles: {
 				s: 'div.ui-resizable-s'
@@ -561,7 +562,7 @@ function AgendaEventRenderer() {
 			start: function(ev, ui) {
 				slotDelta = prevSlotDelta = 0;
 				hideEvents(event, eventElement);
-				eventElement.css('z-index', 9);
+				eventElement.css('z-index', 10);
 				trigger('eventResizeStart', this, event, ev, ui);
 			},
 			resize: function(ev, ui) {
@@ -572,7 +573,7 @@ function AgendaEventRenderer() {
 						formatDates(
 							event.start,
 							(!slotDelta && !event.end) ? null : // no change, so don't display time range
-								addMinutes(eventEnd(event), opt('slotMinutes')*slotDelta),
+								addMinutes(eventEnd(event), opt('selectionSlotMinutes')*slotDelta),
 							opt('timeFormat')
 						)
 					);
@@ -582,7 +583,7 @@ function AgendaEventRenderer() {
 			stop: function(ev, ui) {
 				trigger('eventResizeStop', this, event, ev, ui);
 				if (slotDelta) {
-					eventResize(this, event, 0, opt('slotMinutes')*slotDelta, ev, ui);
+					eventResize(this, event, 0, opt('selectionSlotMinutes')*slotDelta, ev, ui);
 				}else{
 					eventElement.css('z-index', 8);
 					showEvents(event, eventElement);

src/agenda/AgendaView.js

@@ -4,6 +4,7 @@ setDefaults({
 	allDayText: 'all-day',
 	firstHour: 6,
 	slotMinutes: 30,
+	selectionSlotMinutes: 30, // Set default selection slot size to default slot size
 	defaultEventMinutes: 120,
 	axisFormat: 'h(:mm)tt',
 	timeFormat: {
@@ -58,6 +59,7 @@ function AgendaView(element, calendar, viewName) {
 	t.reportDayClick = reportDayClick; // selection mousedown hack
 	t.dragStart = dragStart;
 	t.dragStop = dragStop;
+	t.getSelectionSlotRatio = function() { return selectionSlotRatio }; // make selectionSlotRatio readable
 	
 	
 	// imports
@@ -106,6 +108,8 @@ function AgendaView(element, calendar, viewName) {
 	var colWidth;
 	var gutterWidth;
 	var slotHeight; // TODO: what if slotHeight changes? (see issue 650)
+	var selectionSlotHeight;	// holds the hight of a selection slot in px
+	var selectionSlotRatio;		// holds the relationship between standard slot size and selection slot size
 	var savedScrollTop;
 	
 	var colCnt;
@@ -380,6 +384,9 @@ function AgendaView(element, calendar, viewName) {
 		slotScroller.height(bodyHeight - allDayHeight - 1);
 		
 		slotHeight = slotTableFirstInner.height() + 1; // +1 for border
+
+		selectionSlotRatio = opt('slotMinutes') / opt('selectionSlotMinutes');
+		selectionSlotHeight = slotHeight / selectionSlotRatio;
 		
 		if (dateChanged) {
 			resetScroll();
@@ -568,10 +575,10 @@ function AgendaView(element, calendar, viewName) {
 		function constrain(n) {
 			return Math.max(slotScrollerTop, Math.min(slotScrollerBottom, n));
 		}
-		for (var i=0; i<slotCnt; i++) {
+		for (var i=0; i<slotCnt*selectionSlotRatio; i++) { // adapt slot count to increased/decreased selection slot count
 			rows.push([
-				constrain(slotTableTop + slotHeight*i),
-				constrain(slotTableTop + slotHeight*(i+1))
+				constrain(slotTableTop + selectionSlotHeight*i),
+				constrain(slotTableTop + selectionSlotHeight*(i+1))
 			]);
 		}
 	});
@@ -612,7 +619,7 @@ function AgendaView(element, calendar, viewName) {
 			slotIndex--;
 		}
 		if (slotIndex >= 0) {
-			addMinutes(d, minMinute + slotIndex * opt('slotMinutes'));
+			addMinutes(d, minMinute + slotIndex * opt('selectionSlotMinutes'));
 		}
 		return d;
 	}
@@ -775,9 +782,9 @@ function AgendaView(element, calendar, viewName) {
 					var d2 = cellDate(cell);
 					dates = [
 						d1,
-						addMinutes(cloneDate(d1), opt('slotMinutes')),
+						addMinutes(cloneDate(d1), opt('selectionSlotMinutes')), // calculate minutes depending on selection slot minutes 
 						d2,
-						addMinutes(cloneDate(d2), opt('slotMinutes'))
+						addMinutes(cloneDate(d2), opt('selectionSlotMinutes'))
 					].sort(cmp);
 					renderSlotSelection(dates[0], dates[3]);
 				}else{