diff --git a/demos/selectable.html b/demos/selectable.html index 9ee0863..674c550 100644 --- a/demos/selectable.html +++ b/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) { diff --git a/src/agenda/AgendaEventRenderer.js b/src/agenda/AgendaEventRenderer.js index 9e7243b..391a888 100644 --- a/src/agenda/AgendaEventRenderer.js +++ b/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); diff --git a/src/agenda/AgendaView.js b/src/agenda/AgendaView.js index 484088c..183d151 100644 --- a/src/agenda/AgendaView.js +++ b/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= 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{