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{