/*!
* FullCalendar v2.5.0
* Docs & License: http://fullcalendar.io/
* (c) 2015 Adam Shaw
*/
(function(factory) {
if (typeof define === 'function' && define.amd) {
define([ 'jquery', 'moment' ], factory);
}
else if (typeof exports === 'object') { // Node/CommonJS
module.exports = factory(require('jquery'), require('moment'));
}
else {
factory(jQuery, moment);
}
})(function($, moment) {
;;
var FC = $.fullCalendar = {
version: "2.5.0",
internalApiVersion: 1
};
var fcViews = FC.views = {};
$.fn.fullCalendar = function(options) {
var args = Array.prototype.slice.call(arguments, 1); // for a possible method call
var res = this; // what this function will return (this jQuery object by default)
this.each(function(i, _element) { // loop each DOM element involved
var element = $(_element);
var calendar = element.data('fullCalendar'); // get the existing calendar object (if any)
var singleRes; // the returned value of this single method call
// a method call
if (typeof options === 'string') {
if (calendar && $.isFunction(calendar[options])) {
singleRes = calendar[options].apply(calendar, args);
if (!i) {
res = singleRes; // record the first method call result
}
if (options === 'destroy') { // for the destroy method, must remove Calendar object data
element.removeData('fullCalendar');
}
}
}
// a new calendar initialization
else if (!calendar) { // don't initialize twice
calendar = new Calendar(element, options);
element.data('fullCalendar', calendar);
calendar.render();
}
});
return res;
};
var complexOptions = [ // names of options that are objects whose properties should be combined
'header',
'buttonText',
'buttonIcons',
'themeButtonIcons'
];
// Merges an array of option objects into a single object
function mergeOptions(optionObjs) {
return mergeProps(optionObjs, complexOptions);
}
// Given options specified for the calendar's constructor, massages any legacy options into a non-legacy form.
// Converts View-Option-Hashes into the View-Specific-Options format.
function massageOverrides(input) {
var overrides = { views: input.views || {} }; // the output. ensure a `views` hash
var subObj;
// iterate through all option override properties (except `views`)
$.each(input, function(name, val) {
if (name != 'views') {
// could the value be a legacy View-Option-Hash?
if (
$.isPlainObject(val) &&
!/(time|duration|interval)$/i.test(name) && // exclude duration options. might be given as objects
$.inArray(name, complexOptions) == -1 // complex options aren't allowed to be View-Option-Hashes
) {
subObj = null;
// iterate through the properties of this possible View-Option-Hash value
$.each(val, function(subName, subVal) {
// is the property targeting a view?
if (/^(month|week|day|default|basic(Week|Day)?|agenda(Week|Day)?)$/.test(subName)) {
if (!overrides.views[subName]) { // ensure the view-target entry exists
overrides.views[subName] = {};
}
overrides.views[subName][name] = subVal; // record the value in the `views` object
}
else { // a non-View-Option-Hash property
if (!subObj) {
subObj = {};
}
subObj[subName] = subVal; // accumulate these unrelated values for later
}
});
if (subObj) { // non-View-Option-Hash properties? transfer them as-is
overrides[name] = subObj;
}
}
else {
overrides[name] = val; // transfer normal options as-is
}
}
});
return overrides;
}
;;
// exports
FC.intersectRanges = intersectRanges;
FC.applyAll = applyAll;
FC.debounce = debounce;
FC.isInt = isInt;
FC.htmlEscape = htmlEscape;
FC.cssToStr = cssToStr;
FC.proxy = proxy;
FC.capitaliseFirstLetter = capitaliseFirstLetter;
/* FullCalendar-specific DOM Utilities
----------------------------------------------------------------------------------------------------------------------*/
// Given the scrollbar widths of some other container, create borders/margins on rowEls in order to match the left
// and right space that was offset by the scrollbars. A 1-pixel border first, then margin beyond that.
function compensateScroll(rowEls, scrollbarWidths) {
if (scrollbarWidths.left) {
rowEls.css({
'border-left-width': 1,
'margin-left': scrollbarWidths.left - 1
});
}
if (scrollbarWidths.right) {
rowEls.css({
'border-right-width': 1,
'margin-right': scrollbarWidths.right - 1
});
}
}
// Undoes compensateScroll and restores all borders/margins
function uncompensateScroll(rowEls) {
rowEls.css({
'margin-left': '',
'margin-right': '',
'border-left-width': '',
'border-right-width': ''
});
}
// Make the mouse cursor express that an event is not allowed in the current area
function disableCursor() {
$('body').addClass('fc-not-allowed');
}
// Returns the mouse cursor to its original look
function enableCursor() {
$('body').removeClass('fc-not-allowed');
}
// Given a total available height to fill, have `els` (essentially child rows) expand to accomodate.
// By default, all elements that are shorter than the recommended height are expanded uniformly, not considering
// any other els that are already too tall. if `shouldRedistribute` is on, it considers these tall rows and
// reduces the available height.
function distributeHeight(els, availableHeight, shouldRedistribute) {
// *FLOORING NOTE*: we floor in certain places because zoom can give inaccurate floating-point dimensions,
// and it is better to be shorter than taller, to avoid creating unnecessary scrollbars.
var minOffset1 = Math.floor(availableHeight / els.length); // for non-last element
var minOffset2 = Math.floor(availableHeight - minOffset1 * (els.length - 1)); // for last element *FLOORING NOTE*
var flexEls = []; // elements that are allowed to expand. array of DOM nodes
var flexOffsets = []; // amount of vertical space it takes up
var flexHeights = []; // actual css height
var usedHeight = 0;
undistributeHeight(els); // give all elements their natural height
// find elements that are below the recommended height (expandable).
// important to query for heights in a single first pass (to avoid reflow oscillation).
els.each(function(i, el) {
var minOffset = i === els.length - 1 ? minOffset2 : minOffset1;
var naturalOffset = $(el).outerHeight(true);
if (naturalOffset < minOffset) {
flexEls.push(el);
flexOffsets.push(naturalOffset);
flexHeights.push($(el).height());
}
else {
// this element stretches past recommended height (non-expandable). mark the space as occupied.
usedHeight += naturalOffset;
}
});
// readjust the recommended height to only consider the height available to non-maxed-out rows.
if (shouldRedistribute) {
availableHeight -= usedHeight;
minOffset1 = Math.floor(availableHeight / flexEls.length);
minOffset2 = Math.floor(availableHeight - minOffset1 * (flexEls.length - 1)); // *FLOORING NOTE*
}
// assign heights to all expandable elements
$(flexEls).each(function(i, el) {
var minOffset = i === flexEls.length - 1 ? minOffset2 : minOffset1;
var naturalOffset = flexOffsets[i];
var naturalHeight = flexHeights[i];
var newHeight = minOffset - (naturalOffset - naturalHeight); // subtract the margin/padding
if (naturalOffset < minOffset) { // we check this again because redistribution might have changed things
$(el).height(newHeight);
}
});
}
// Undoes distrubuteHeight, restoring all els to their natural height
function undistributeHeight(els) {
els.height('');
}
// Given `els`, a jQuery set of
cells, find the cell with the largest natural width and set the widths of all the
// cells to be that width.
// PREREQUISITE: if you want a cell to take up width, it needs to have a single inner element w/ display:inline
function matchCellWidths(els) {
var maxInnerWidth = 0;
els.find('> *').each(function(i, innerEl) {
var innerWidth = $(innerEl).outerWidth();
if (innerWidth > maxInnerWidth) {
maxInnerWidth = innerWidth;
}
});
maxInnerWidth++; // sometimes not accurate of width the text needs to stay on one line. insurance
els.width(maxInnerWidth);
return maxInnerWidth;
}
// Turns a container element into a scroller if its contents is taller than the allotted height.
// Returns true if the element is now a scroller, false otherwise.
// NOTE: this method is best because it takes weird zooming dimensions into account
function setPotentialScroller(containerEl, height) {
containerEl.height(height).addClass('fc-scroller');
// are scrollbars needed?
if (containerEl[0].scrollHeight - 1 > containerEl[0].clientHeight) { // !!! -1 because IE is often off-by-one :(
return true;
}
unsetScroller(containerEl); // undo
return false;
}
// Takes an element that might have been a scroller, and turns it back into a normal element.
function unsetScroller(containerEl) {
containerEl.height('').removeClass('fc-scroller');
}
/* General DOM Utilities
----------------------------------------------------------------------------------------------------------------------*/
FC.getOuterRect = getOuterRect;
FC.getClientRect = getClientRect;
FC.getContentRect = getContentRect;
FC.getScrollbarWidths = getScrollbarWidths;
// borrowed from https://github.com/jquery/jquery-ui/blob/1.11.0/ui/core.js#L51
function getScrollParent(el) {
var position = el.css('position'),
scrollParent = el.parents().filter(function() {
var parent = $(this);
return (/(auto|scroll)/).test(
parent.css('overflow') + parent.css('overflow-y') + parent.css('overflow-x')
);
}).eq(0);
return position === 'fixed' || !scrollParent.length ? $(el[0].ownerDocument || document) : scrollParent;
}
// Queries the outer bounding area of a jQuery element.
// Returns a rectangle with absolute coordinates: left, right (exclusive), top, bottom (exclusive).
function getOuterRect(el) {
var offset = el.offset();
return {
left: offset.left,
right: offset.left + el.outerWidth(),
top: offset.top,
bottom: offset.top + el.outerHeight()
};
}
// Queries the area within the margin/border/scrollbars of a jQuery element. Does not go within the padding.
// Returns a rectangle with absolute coordinates: left, right (exclusive), top, bottom (exclusive).
// NOTE: should use clientLeft/clientTop, but very unreliable cross-browser.
function getClientRect(el) {
var offset = el.offset();
var scrollbarWidths = getScrollbarWidths(el);
var left = offset.left + getCssFloat(el, 'border-left-width') + scrollbarWidths.left;
var top = offset.top + getCssFloat(el, 'border-top-width') + scrollbarWidths.top;
return {
left: left,
right: left + el[0].clientWidth, // clientWidth includes padding but NOT scrollbars
top: top,
bottom: top + el[0].clientHeight // clientHeight includes padding but NOT scrollbars
};
}
// Queries the area within the margin/border/padding of a jQuery element. Assumed not to have scrollbars.
// Returns a rectangle with absolute coordinates: left, right (exclusive), top, bottom (exclusive).
function getContentRect(el) {
var offset = el.offset(); // just outside of border, margin not included
var left = offset.left + getCssFloat(el, 'border-left-width') + getCssFloat(el, 'padding-left');
var top = offset.top + getCssFloat(el, 'border-top-width') + getCssFloat(el, 'padding-top');
return {
left: left,
right: left + el.width(),
top: top,
bottom: top + el.height()
};
}
// Returns the computed left/right/top/bottom scrollbar widths for the given jQuery element.
// NOTE: should use clientLeft/clientTop, but very unreliable cross-browser.
function getScrollbarWidths(el) {
var leftRightWidth = el.innerWidth() - el[0].clientWidth; // the paddings cancel out, leaving the scrollbars
var widths = {
left: 0,
right: 0,
top: 0,
bottom: el.innerHeight() - el[0].clientHeight // the paddings cancel out, leaving the bottom scrollbar
};
if (getIsLeftRtlScrollbars() && el.css('direction') == 'rtl') { // is the scrollbar on the left side?
widths.left = leftRightWidth;
}
else {
widths.right = leftRightWidth;
}
return widths;
}
// Logic for determining if, when the element is right-to-left, the scrollbar appears on the left side
var _isLeftRtlScrollbars = null;
function getIsLeftRtlScrollbars() { // responsible for caching the computation
if (_isLeftRtlScrollbars === null) {
_isLeftRtlScrollbars = computeIsLeftRtlScrollbars();
}
return _isLeftRtlScrollbars;
}
function computeIsLeftRtlScrollbars() { // creates an offscreen test element, then removes it
var el = $('
';
},
renderBgIntroHtml: function(row) {
return this.renderIntroHtml(); // fall back to generic
},
renderBgCellsHtml: function(row) {
var htmls = [];
var col, date;
for (col = 0; col < this.colCnt; col++) {
date = this.getCellDate(row, col);
htmls.push(this.renderBgCellHtml(date));
}
return htmls.join('');
},
renderBgCellHtml: function(date) {
var view = this.view;
var classes = this.getDayClasses(date);
classes.unshift('fc-day', view.widgetContentClass);
return '
';
},
/* Generic
------------------------------------------------------------------------------------------------------------------*/
// Generates the default HTML intro for any row. User classes should override
renderIntroHtml: function() {
},
/* Utils
------------------------------------------------------------------------------------------------------------------*/
// Applies the generic "intro" and "outro" HTML to the given cells.
// Intro means the leftmost cell when the calendar is LTR and the rightmost cell when RTL. Vice-versa for outro.
bookendCells: function(trEl) {
var introHtml = this.renderIntroHtml();
if (introHtml) {
if (this.isRTL) {
trEl.append(introHtml);
}
else {
trEl.prepend(introHtml);
}
}
}
};
;;
/* A component that renders a grid of whole-days that runs horizontally. There can be multiple rows, one per week.
----------------------------------------------------------------------------------------------------------------------*/
var DayGrid = FC.DayGrid = Grid.extend(DayTableMixin, {
numbersVisible: false, // should render a row for day/week numbers? set by outside view. TODO: make internal
bottomCoordPadding: 0, // hack for extending the hit area for the last row of the coordinate grid
rowEls: null, // set of fake row elements
cellEls: null, // set of whole-day elements comprising the row's background
helperEls: null, // set of cell skeleton elements for rendering the mock event "helper"
rowCoordCache: null,
colCoordCache: null,
// Renders the rows and columns into the component's `this.el`, which should already be assigned.
// isRigid determins whether the individual rows should ignore the contents and be a constant height.
// Relies on the view's colCnt and rowCnt. In the future, this component should probably be self-sufficient.
renderDates: function(isRigid) {
var view = this.view;
var rowCnt = this.rowCnt;
var colCnt = this.colCnt;
var html = '';
var row;
var col;
for (row = 0; row < rowCnt; row++) {
html += this.renderDayRowHtml(row, isRigid);
}
this.el.html(html);
this.rowEls = this.el.find('.fc-row');
this.cellEls = this.el.find('.fc-day');
this.rowCoordCache = new CoordCache({
els: this.rowEls,
isVertical: true
});
this.colCoordCache = new CoordCache({
els: this.cellEls.slice(0, this.colCnt), // only the first row
isHorizontal: true
});
// trigger dayRender with each cell's element
for (row = 0; row < rowCnt; row++) {
for (col = 0; col < colCnt; col++) {
view.trigger(
'dayRender',
null,
this.getCellDate(row, col),
this.getCellEl(row, col)
);
}
}
},
unrenderDates: function() {
this.removeSegPopover();
},
renderBusinessHours: function() {
var events = this.view.calendar.getBusinessHoursEvents(true); // wholeDay=true
var segs = this.eventsToSegs(events);
this.renderFill('businessHours', segs, 'bgevent');
},
// Generates the HTML for a single row, which is a div that wraps a table.
// `row` is the row number.
renderDayRowHtml: function(row, isRigid) {
var view = this.view;
var classes = [ 'fc-row', 'fc-week', view.widgetContentClass ];
if (isRigid) {
classes.push('fc-rigid');
}
return '' +
'
';
},
renderNumberIntroHtml: function(row) {
return this.renderIntroHtml();
},
renderNumberCellsHtml: function(row) {
var htmls = [];
var col, date;
for (col = 0; col < this.colCnt; col++) {
date = this.getCellDate(row, col);
htmls.push(this.renderNumberCellHtml(date));
}
return htmls.join('');
},
// Generates the HTML for the
s of the "number" row in the DayGrid's content skeleton.
// The number row will only exist if either day numbers or week numbers are turned on.
renderNumberCellHtml: function(date) {
var classes;
if (!this.view.dayNumbersVisible) { // if there are week numbers but not day numbers
return '
'; // will create an empty space above events :(
}
classes = this.getDayClasses(date);
classes.unshift('fc-day-number');
return '' +
'
' +
date.date() +
'
';
},
/* Options
------------------------------------------------------------------------------------------------------------------*/
// Computes a default event time formatting string if `timeFormat` is not explicitly defined
computeEventTimeFormat: function() {
return this.view.opt('extraSmallTimeFormat'); // like "6p" or "6:30p"
},
// Computes a default `displayEventEnd` value if one is not expliclty defined
computeDisplayEventEnd: function() {
return this.colCnt == 1; // we'll likely have space if there's only one day
},
/* Dates
------------------------------------------------------------------------------------------------------------------*/
rangeUpdated: function() {
this.updateDayTable();
},
// Slices up the given span (unzoned start/end with other misc data) into an array of segments
spanToSegs: function(span) {
var segs = this.sliceRangeByRow(span);
var i, seg;
for (i = 0; i < segs.length; i++) {
seg = segs[i];
if (this.isRTL) {
seg.leftCol = this.daysPerRow - 1 - seg.lastRowDayIndex;
seg.rightCol = this.daysPerRow - 1 - seg.firstRowDayIndex;
}
else {
seg.leftCol = seg.firstRowDayIndex;
seg.rightCol = seg.lastRowDayIndex;
}
}
return segs;
},
/* Hit System
------------------------------------------------------------------------------------------------------------------*/
prepareHits: function() {
this.colCoordCache.build();
this.rowCoordCache.build();
this.rowCoordCache.bottoms[this.rowCnt - 1] += this.bottomCoordPadding; // hack
},
releaseHits: function() {
this.colCoordCache.clear();
this.rowCoordCache.clear();
},
queryHit: function(leftOffset, topOffset) {
var col = this.colCoordCache.getHorizontalIndex(leftOffset);
var row = this.rowCoordCache.getVerticalIndex(topOffset);
if (row != null && col != null) {
return this.getCellHit(row, col);
}
},
getHitSpan: function(hit) {
return this.getCellRange(hit.row, hit.col);
},
getHitEl: function(hit) {
return this.getCellEl(hit.row, hit.col);
},
/* Cell System
------------------------------------------------------------------------------------------------------------------*/
// FYI: the first column is the leftmost column, regardless of date
getCellHit: function(row, col) {
return {
row: row,
col: col,
component: this, // needed unfortunately :(
left: this.colCoordCache.getLeftOffset(col),
right: this.colCoordCache.getRightOffset(col),
top: this.rowCoordCache.getTopOffset(row),
bottom: this.rowCoordCache.getBottomOffset(row)
};
},
getCellEl: function(row, col) {
return this.cellEls.eq(row * this.colCnt + col);
},
/* Event Drag Visualization
------------------------------------------------------------------------------------------------------------------*/
// TODO: move to DayGrid.event, similar to what we did with Grid's drag methods
// Renders a visual indication of an event or external element being dragged.
// `eventLocation` has zoned start and end (optional)
renderDrag: function(eventLocation, seg) {
// always render a highlight underneath
this.renderHighlight(this.eventToSpan(eventLocation));
// if a segment from the same calendar but another component is being dragged, render a helper event
if (seg && !seg.el.closest(this.el).length) {
this.renderEventLocationHelper(eventLocation, seg);
this.applyDragOpacity(this.helperEls);
return true; // a helper has been rendered
}
},
// Unrenders any visual indication of a hovering event
unrenderDrag: function() {
this.unrenderHighlight();
this.unrenderHelper();
},
/* Event Resize Visualization
------------------------------------------------------------------------------------------------------------------*/
// Renders a visual indication of an event being resized
renderEventResize: function(eventLocation, seg) {
this.renderHighlight(this.eventToSpan(eventLocation));
this.renderEventLocationHelper(eventLocation, seg);
},
// Unrenders a visual indication of an event being resized
unrenderEventResize: function() {
this.unrenderHighlight();
this.unrenderHelper();
},
/* Event Helper
------------------------------------------------------------------------------------------------------------------*/
// Renders a mock "helper" event. `sourceSeg` is the associated internal segment object. It can be null.
renderHelper: function(event, sourceSeg) {
var helperNodes = [];
var segs = this.eventToSegs(event);
var rowStructs;
segs = this.renderFgSegEls(segs); // assigns each seg's el and returns a subset of segs that were rendered
rowStructs = this.renderSegRows(segs);
// inject each new event skeleton into each associated row
this.rowEls.each(function(row, rowNode) {
var rowEl = $(rowNode); // the .fc-row
var skeletonEl = $('
'); // will be absolutely positioned
var skeletonTop;
// If there is an original segment, match the top position. Otherwise, put it at the row's top level
if (sourceSeg && sourceSeg.row === row) {
skeletonTop = sourceSeg.el.position().top;
}
else {
skeletonTop = rowEl.find('.fc-content-skeleton tbody').position().top;
}
skeletonEl.css('top', skeletonTop)
.find('table')
.append(rowStructs[row].tbodyEl);
rowEl.append(skeletonEl);
helperNodes.push(skeletonEl[0]);
});
this.helperEls = $(helperNodes); // array -> jQuery set
},
// Unrenders any visual indication of a mock helper event
unrenderHelper: function() {
if (this.helperEls) {
this.helperEls.remove();
this.helperEls = null;
}
},
/* Fill System (highlight, background events, business hours)
------------------------------------------------------------------------------------------------------------------*/
fillSegTag: 'td', // override the default tag name
// Renders a set of rectangles over the given segments of days.
// Only returns segments that successfully rendered.
renderFill: function(type, segs, className) {
var nodes = [];
var i, seg;
var skeletonEl;
segs = this.renderFillSegEls(type, segs); // assignes `.el` to each seg. returns successfully rendered segs
for (i = 0; i < segs.length; i++) {
seg = segs[i];
skeletonEl = this.renderFillRow(type, seg, className);
this.rowEls.eq(seg.row).append(skeletonEl);
nodes.push(skeletonEl[0]);
}
this.elsByFill[type] = $(nodes);
return segs;
},
// Generates the HTML needed for one row of a fill. Requires the seg's el to be rendered.
renderFillRow: function(type, seg, className) {
var colCnt = this.colCnt;
var startCol = seg.leftCol;
var endCol = seg.rightCol + 1;
var skeletonEl;
var trEl;
className = className || type.toLowerCase();
skeletonEl = $(
'
');
}
this.bookendCells(trEl);
return skeletonEl;
}
});
;;
/* Event-rendering methods for the DayGrid class
----------------------------------------------------------------------------------------------------------------------*/
DayGrid.mixin({
rowStructs: null, // an array of objects, each holding information about a row's foreground event-rendering
// Unrenders all events currently rendered on the grid
unrenderEvents: function() {
this.removeSegPopover(); // removes the "more.." events popover
Grid.prototype.unrenderEvents.apply(this, arguments); // calls the super-method
},
// Retrieves all rendered segment objects currently rendered on the grid
getEventSegs: function() {
return Grid.prototype.getEventSegs.call(this) // get the segments from the super-method
.concat(this.popoverSegs || []); // append the segments from the "more..." popover
},
// Renders the given background event segments onto the grid
renderBgSegs: function(segs) {
// don't render timed background events
var allDaySegs = $.grep(segs, function(seg) {
return seg.event.allDay;
});
return Grid.prototype.renderBgSegs.call(this, allDaySegs); // call the super-method
},
// Renders the given foreground event segments onto the grid
renderFgSegs: function(segs) {
var rowStructs;
// render an `.el` on each seg
// returns a subset of the segs. segs that were actually rendered
segs = this.renderFgSegEls(segs);
rowStructs = this.rowStructs = this.renderSegRows(segs);
// append to each row's content skeleton
this.rowEls.each(function(i, rowNode) {
$(rowNode).find('.fc-content-skeleton > table').append(
rowStructs[i].tbodyEl
);
});
return segs; // return only the segs that were actually rendered
},
// Unrenders all currently rendered foreground event segments
unrenderFgSegs: function() {
var rowStructs = this.rowStructs || [];
var rowStruct;
while ((rowStruct = rowStructs.pop())) {
rowStruct.tbodyEl.remove();
}
this.rowStructs = null;
},
// Uses the given events array to generate elements that should be appended to each row's content skeleton.
// Returns an array of rowStruct objects (see the bottom of `renderSegRow`).
// PRECONDITION: each segment shoud already have a rendered and assigned `.el`
renderSegRows: function(segs) {
var rowStructs = [];
var segRows;
var row;
segRows = this.groupSegRows(segs); // group into nested arrays
// iterate each row of segment groupings
for (row = 0; row < segRows.length; row++) {
rowStructs.push(
this.renderSegRow(row, segRows[row])
);
}
return rowStructs;
},
// Builds the HTML to be used for the default element for an individual segment
fgSegHtml: function(seg, disableResizing) {
var view = this.view;
var event = seg.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.getEventSkinCss(event));
var timeHtml = '';
var timeText;
var titleHtml;
classes.unshift('fc-day-grid-event', 'fc-h-event');
// Only display a timed events time if it is the starting segment
if (seg.isStart) {
timeText = this.getEventTimeText(event);
if (timeText) {
timeHtml = '' + htmlEscape(timeText) + '';
}
}
titleHtml =
'' +
(htmlEscape(event.title || '') || ' ') + // we always want one line of height
'';
return '' +
'
' +
(isResizableFromStart ?
'' :
''
) +
(isResizableFromEnd ?
'' :
''
) +
'';
},
// Given a row # and an array of segments all in the same row, render a element, a skeleton that contains
// the segments. Returns object with a bunch of internal data about how the render was calculated.
// NOTE: modifies rowSegs
renderSegRow: function(row, rowSegs) {
var colCnt = this.colCnt;
var segLevels = this.buildSegLevels(rowSegs); // group into sub-arrays of levels
var levelCnt = Math.max(1, segLevels.length); // ensure at least one level
var tbody = $('');
var segMatrix = []; // lookup for which segments are rendered into which level+col cells
var cellMatrix = []; // lookup for all
elements of the level+col matrix
var loneCellMatrix = []; // lookup for
elements that only take up a single column
var i, levelSegs;
var col;
var tr;
var j, seg;
var td;
// populates empty cells from the current column (`col`) to `endCol`
function emptyCellsUntil(endCol) {
while (col < endCol) {
// try to grab a cell from the level above and extend its rowspan. otherwise, create a fresh cell
td = (loneCellMatrix[i - 1] || [])[col];
if (td) {
td.attr(
'rowspan',
parseInt(td.attr('rowspan') || 1, 10) + 1
);
}
else {
td = $('
');
tr.append(td);
}
cellMatrix[i][col] = td;
loneCellMatrix[i][col] = td;
col++;
}
}
for (i = 0; i < levelCnt; i++) { // iterate through all levels
levelSegs = segLevels[i];
col = 0;
tr = $('
');
segMatrix.push([]);
cellMatrix.push([]);
loneCellMatrix.push([]);
// levelCnt might be 1 even though there are no actual levels. protect against this.
// this single empty row is useful for styling.
if (levelSegs) {
for (j = 0; j < levelSegs.length; j++) { // iterate through segments in level
seg = levelSegs[j];
emptyCellsUntil(seg.leftCol);
// create a container that occupies or more columns. append the event element.
td = $('
').append(seg.el);
if (seg.leftCol != seg.rightCol) {
td.attr('colspan', seg.rightCol - seg.leftCol + 1);
}
else { // a single-column segment
loneCellMatrix[i][col] = td;
}
while (col <= seg.rightCol) {
cellMatrix[i][col] = td;
segMatrix[i][col] = seg;
col++;
}
tr.append(td);
}
}
emptyCellsUntil(colCnt); // finish off the row
this.bookendCells(tr);
tbody.append(tr);
}
return { // a "rowStruct"
row: row, // the row number
tbodyEl: tbody,
cellMatrix: cellMatrix,
segMatrix: segMatrix,
segLevels: segLevels,
segs: rowSegs
};
},
// Stacks a flat array of segments, which are all assumed to be in the same row, into subarrays of vertical levels.
// NOTE: modifies segs
buildSegLevels: function(segs) {
var levels = [];
var i, seg;
var j;
// Give preference to elements with certain criteria, so they have
// a chance to be closer to the top.
this.sortEventSegs(segs);
for (i = 0; i < segs.length; i++) {
seg = segs[i];
// loop through levels, starting with the topmost, until the segment doesn't collide with other segments
for (j = 0; j < levels.length; j++) {
if (!isDaySegCollision(seg, levels[j])) {
break;
}
}
// `j` now holds the desired subrow index
seg.level = j;
// create new level array if needed and append segment
(levels[j] || (levels[j] = [])).push(seg);
}
// order segments left-to-right. very important if calendar is RTL
for (j = 0; j < levels.length; j++) {
levels[j].sort(compareDaySegCols);
}
return levels;
},
// Given a flat array of segments, return an array of sub-arrays, grouped by each segment's row
groupSegRows: function(segs) {
var segRows = [];
var i;
for (i = 0; i < this.rowCnt; i++) {
segRows.push([]);
}
for (i = 0; i < segs.length; i++) {
segRows[segs[i].row].push(segs[i]);
}
return segRows;
}
});
// Computes whether two segments' columns collide. They are assumed to be in the same row.
function isDaySegCollision(seg, otherSegs) {
var i, otherSeg;
for (i = 0; i < otherSegs.length; i++) {
otherSeg = otherSegs[i];
if (
otherSeg.leftCol <= seg.rightCol &&
otherSeg.rightCol >= seg.leftCol
) {
return true;
}
}
return false;
}
// A cmp function for determining the leftmost event
function compareDaySegCols(a, b) {
return a.leftCol - b.leftCol;
}
;;
/* Methods relate to limiting the number events for a given day on a DayGrid
----------------------------------------------------------------------------------------------------------------------*/
// NOTE: all the segs being passed around in here are foreground segs
DayGrid.mixin({
segPopover: null, // the Popover that holds events that can't fit in a cell. null when not visible
popoverSegs: null, // an array of segment objects that the segPopover holds. null when not visible
removeSegPopover: function() {
if (this.segPopover) {
this.segPopover.hide(); // in handler, will call segPopover's removeElement
}
},
// Limits the number of "levels" (vertically stacking layers of events) for each row of the grid.
// `levelLimit` can be false (don't limit), a number, or true (should be computed).
limitRows: function(levelLimit) {
var rowStructs = this.rowStructs || [];
var row; // row #
var rowLevelLimit;
for (row = 0; row < rowStructs.length; row++) {
this.unlimitRow(row);
if (!levelLimit) {
rowLevelLimit = false;
}
else if (typeof levelLimit === 'number') {
rowLevelLimit = levelLimit;
}
else {
rowLevelLimit = this.computeRowLevelLimit(row);
}
if (rowLevelLimit !== false) {
this.limitRow(row, rowLevelLimit);
}
}
},
// Computes the number of levels a row will accomodate without going outside its bounds.
// Assumes the row is "rigid" (maintains a constant height regardless of what is inside).
// `row` is the row number.
computeRowLevelLimit: function(row) {
var rowEl = this.rowEls.eq(row); // the containing "fake" row div
var rowHeight = rowEl.height(); // TODO: cache somehow?
var trEls = this.rowStructs[row].tbodyEl.children();
var i, trEl;
var trHeight;
function iterInnerHeights(i, childNode) {
trHeight = Math.max(trHeight, $(childNode).outerHeight());
}
// Reveal one level
at a time and stop when we find one out of bounds
for (i = 0; i < trEls.length; i++) {
trEl = trEls.eq(i).removeClass('fc-limited'); // reset to original state (reveal)
// with rowspans>1 and IE8, trEl.outerHeight() would return the height of the largest cell,
// so instead, find the tallest inner content element.
trHeight = 0;
trEl.find('> td > :first-child').each(iterInnerHeights);
if (trEl.position().top + trHeight > rowHeight) {
return i;
}
}
return false; // should not limit at all
},
// Limits the given grid row to the maximum number of levels and injects "more" links if necessary.
// `row` is the row number.
// `levelLimit` is a number for the maximum (inclusive) number of levels allowed.
limitRow: function(row, levelLimit) {
var _this = this;
var rowStruct = this.rowStructs[row];
var moreNodes = []; // array of "more" links and
DOM nodes
var col = 0; // col #, left-to-right (not chronologically)
var levelSegs; // array of segment objects in the last allowable level, ordered left-to-right
var cellMatrix; // a matrix (by level, then column) of all
jQuery elements in the row
var limitedNodes; // array of temporarily hidden level
and segment
DOM nodes
var i, seg;
var segsBelow; // array of segment objects below `seg` in the current `col`
var totalSegsBelow; // total number of segments below `seg` in any of the columns `seg` occupies
var colSegsBelow; // array of segment arrays, below seg, one for each column (offset from segs's first column)
var td, rowspan;
var segMoreNodes; // array of "more"
cells that will stand-in for the current seg's cell
var j;
var moreTd, moreWrap, moreLink;
// Iterates through empty level cells and places "more" links inside if need be
function emptyCellsUntil(endCol) { // goes from current `col` to `endCol`
while (col < endCol) {
segsBelow = _this.getCellSegs(row, col, levelLimit);
if (segsBelow.length) {
td = cellMatrix[levelLimit - 1][col];
moreLink = _this.renderMoreLink(row, col, segsBelow);
moreWrap = $('').append(moreLink);
td.append(moreWrap);
moreNodes.push(moreWrap[0]);
}
col++;
}
}
if (levelLimit && levelLimit < rowStruct.segLevels.length) { // is it actually over the limit?
levelSegs = rowStruct.segLevels[levelLimit - 1];
cellMatrix = rowStruct.cellMatrix;
limitedNodes = rowStruct.tbodyEl.children().slice(levelLimit) // get level
elements past the limit
.addClass('fc-limited').get(); // hide elements and get a simple DOM-nodes array
// iterate though segments in the last allowable level
for (i = 0; i < levelSegs.length; i++) {
seg = levelSegs[i];
emptyCellsUntil(seg.leftCol); // process empty cells before the segment
// determine *all* segments below `seg` that occupy the same columns
colSegsBelow = [];
totalSegsBelow = 0;
while (col <= seg.rightCol) {
segsBelow = this.getCellSegs(row, col, levelLimit);
colSegsBelow.push(segsBelow);
totalSegsBelow += segsBelow.length;
col++;
}
if (totalSegsBelow) { // do we need to replace this segment with one or many "more" links?
td = cellMatrix[levelLimit - 1][seg.leftCol]; // the segment's parent cell
rowspan = td.attr('rowspan') || 1;
segMoreNodes = [];
// make a replacement
for each column the segment occupies. will be one for each colspan
for (j = 0; j < colSegsBelow.length; j++) {
moreTd = $('
').attr('rowspan', rowspan);
segsBelow = colSegsBelow[j];
moreLink = this.renderMoreLink(
row,
seg.leftCol + j,
[ seg ].concat(segsBelow) // count seg as hidden too
);
moreWrap = $('').append(moreLink);
moreTd.append(moreWrap);
segMoreNodes.push(moreTd[0]);
moreNodes.push(moreTd[0]);
}
td.addClass('fc-limited').after($(segMoreNodes)); // hide original
and inject replacements
limitedNodes.push(td[0]);
}
}
emptyCellsUntil(this.colCnt); // finish off the level
rowStruct.moreEls = $(moreNodes); // for easy undoing later
rowStruct.limitedEls = $(limitedNodes); // for easy undoing later
}
},
// Reveals all levels and removes all "more"-related elements for a grid's row.
// `row` is a row number.
unlimitRow: function(row) {
var rowStruct = this.rowStructs[row];
if (rowStruct.moreEls) {
rowStruct.moreEls.remove();
rowStruct.moreEls = null;
}
if (rowStruct.limitedEls) {
rowStruct.limitedEls.removeClass('fc-limited');
rowStruct.limitedEls = null;
}
},
// Renders an element that represents hidden event element for a cell.
// Responsible for attaching click handler as well.
renderMoreLink: function(row, col, hiddenSegs) {
var _this = this;
var view = this.view;
return $('')
.text(
this.getMoreLinkText(hiddenSegs.length)
)
.on('click', function(ev) {
var clickOption = view.opt('eventLimitClick');
var date = _this.getCellDate(row, col);
var moreEl = $(this);
var dayEl = _this.getCellEl(row, col);
var allSegs = _this.getCellSegs(row, col);
// rescope the segments to be within the cell's date
var reslicedAllSegs = _this.resliceDaySegs(allSegs, date);
var reslicedHiddenSegs = _this.resliceDaySegs(hiddenSegs, date);
if (typeof clickOption === 'function') {
// the returned value can be an atomic option
clickOption = view.trigger('eventLimitClick', null, {
date: date,
dayEl: dayEl,
moreEl: moreEl,
segs: reslicedAllSegs,
hiddenSegs: reslicedHiddenSegs
}, ev);
}
if (clickOption === 'popover') {
_this.showSegPopover(row, col, moreEl, reslicedAllSegs);
}
else if (typeof clickOption === 'string') { // a view name
view.calendar.zoomTo(date, clickOption);
}
});
},
// Reveals the popover that displays all events within a cell
showSegPopover: function(row, col, moreLink, segs) {
var _this = this;
var view = this.view;
var moreWrap = moreLink.parent(); // the
to avoid border confusion.
if (this.isRTL) {
options.right = moreWrap.offset().left + moreWrap.outerWidth() + 1; // +1 to be over cell border
}
else {
options.left = moreWrap.offset().left - 1; // -1 to be over cell border
}
this.segPopover = new Popover(options);
this.segPopover.show();
},
// Builds the inner DOM contents of the segment popover
renderSegPopoverContent: function(row, col, segs) {
var view = this.view;
var isTheme = view.opt('theme');
var title = this.getCellDate(row, col).format(view.opt('dayPopoverFormat'));
var content = $(
'
' +
'' +
'' +
htmlEscape(title) +
'' +
'' +
'
' +
'
' +
'' +
'
'
);
var segContainer = content.find('.fc-event-container');
var i;
// render each seg's `el` and only return the visible segs
segs = this.renderFgSegEls(segs, true); // disableResizing=true
this.popoverSegs = segs;
for (i = 0; i < segs.length; i++) {
// because segments in the popover are not part of a grid coordinate system, provide a hint to any
// grids that want to do drag-n-drop about which cell it came from
this.prepareHits();
segs[i].hit = this.getCellHit(row, col);
this.releaseHits();
segContainer.append(segs[i].el);
}
return content;
},
// Given the events within an array of segment objects, reslice them to be in a single day
resliceDaySegs: function(segs, dayDate) {
// build an array of the original events
var events = $.map(segs, function(seg) {
return seg.event;
});
var dayStart = dayDate.clone();
var dayEnd = dayStart.clone().add(1, 'days');
var dayRange = { start: dayStart, end: dayEnd };
// slice the events with a custom slicing function
segs = this.eventsToSegs(
events,
function(range) {
var seg = intersectRanges(range, dayRange); // undefind if no intersection
return seg ? [ seg ] : []; // must return an array of segments
}
);
// force an order because eventsToSegs doesn't guarantee one
this.sortEventSegs(segs);
return segs;
},
// Generates the text that should be inside a "more" link, given the number of events it represents
getMoreLinkText: function(num) {
var opt = this.view.opt('eventLimitText');
if (typeof opt === 'function') {
return opt(num);
}
else {
return '+' + num + ' ' + opt;
}
},
// Returns segments within a given cell.
// If `startLevel` is specified, returns only events including and below that level. Otherwise returns all segs.
getCellSegs: function(row, col, startLevel) {
var segMatrix = this.rowStructs[row].segMatrix;
var level = startLevel || 0;
var segs = [];
var seg;
while (level < segMatrix.length) {
seg = segMatrix[level][col];
if (seg) {
segs.push(seg);
}
level++;
}
return segs;
}
});
;;
/* A component that renders one or more columns of vertical time slots
----------------------------------------------------------------------------------------------------------------------*/
// We mixin DayTable, even though there is only a single row of days
var TimeGrid = FC.TimeGrid = Grid.extend(DayTableMixin, {
slotDuration: null, // duration of a "slot", a distinct time segment on given day, visualized by lines
snapDuration: null, // granularity of time for dragging and selecting
snapsPerSlot: null,
minTime: null, // Duration object that denotes the first visible time of any given day
maxTime: null, // Duration object that denotes the exclusive visible end time of any given day
labelFormat: null, // formatting string for times running along vertical axis
labelInterval: null, // duration of how often a label should be displayed for a slot
colEls: null, // cells elements in the day-row background
slatEls: null, // elements running horizontally across all columns
helperEl: null, // cell skeleton element for rendering the mock event "helper"
colCoordCache: null,
slatCoordCache: null,
businessHourSegs: null,
constructor: function() {
Grid.apply(this, arguments); // call the super-constructor
this.processOptions();
},
// Renders the time grid into `this.el`, which should already be assigned.
// Relies on the view's colCnt. In the future, this component should probably be self-sufficient.
renderDates: function() {
this.el.html(this.renderHtml());
this.colEls = this.el.find('.fc-day');
this.slatEls = this.el.find('.fc-slats tr');
this.colCoordCache = new CoordCache({
els: this.colEls,
isHorizontal: true
});
this.slatCoordCache = new CoordCache({
els: this.slatEls,
isVertical: true
});
},
renderBusinessHours: function() {
var events = this.view.calendar.getBusinessHoursEvents();
this.businessHourSegs = this.renderFill('businessHours', this.eventsToSegs(events), 'bgevent');
},
// Renders the basic HTML skeleton for the grid
renderHtml: function() {
return '' +
'
' +
'
' +
this.renderBgTrHtml(0) + // row=0
'
' +
'
' +
'
' +
'
' +
this.renderSlatRowHtml() +
'
' +
'
';
},
// Generates the HTML for the horizontal "slats" that run width-wise. Has a time axis on a side. Depends on RTL.
renderSlatRowHtml: function() {
var view = this.view;
var isRTL = this.isRTL;
var html = '';
var slotTime = moment.duration(+this.minTime); // wish there was .clone() for durations
var slotDate; // will be on the view's first day, but we only care about its time
var isLabeled;
var axisHtml;
// Calculate the time for each slot
while (slotTime < this.maxTime) {
slotDate = this.start.clone().time(slotTime);
isLabeled = isInt(divideDurationByDuration(slotTime, this.labelInterval));
axisHtml =
'
";
slotTime.add(this.slotDuration);
}
return html;
},
/* Options
------------------------------------------------------------------------------------------------------------------*/
// Parses various options into properties of this object
processOptions: function() {
var view = this.view;
var slotDuration = view.opt('slotDuration');
var snapDuration = view.opt('snapDuration');
var input;
slotDuration = moment.duration(slotDuration);
snapDuration = snapDuration ? moment.duration(snapDuration) : slotDuration;
this.slotDuration = slotDuration;
this.snapDuration = snapDuration;
this.snapsPerSlot = slotDuration / snapDuration; // TODO: ensure an integer multiple?
this.minResizeDuration = snapDuration; // hack
this.minTime = moment.duration(view.opt('minTime'));
this.maxTime = moment.duration(view.opt('maxTime'));
// might be an array value (for TimelineView).
// if so, getting the most granular entry (the last one probably).
input = view.opt('slotLabelFormat');
if ($.isArray(input)) {
input = input[input.length - 1];
}
this.labelFormat =
input ||
view.opt('axisFormat') || // deprecated
view.opt('smallTimeFormat'); // the computed default
input = view.opt('slotLabelInterval');
this.labelInterval = input ?
moment.duration(input) :
this.computeLabelInterval(slotDuration);
},
// Computes an automatic value for slotLabelInterval
computeLabelInterval: function(slotDuration) {
var i;
var labelInterval;
var slotsPerLabel;
// find the smallest stock label interval that results in more than one slots-per-label
for (i = AGENDA_STOCK_SUB_DURATIONS.length - 1; i >= 0; i--) {
labelInterval = moment.duration(AGENDA_STOCK_SUB_DURATIONS[i]);
slotsPerLabel = divideDurationByDuration(labelInterval, slotDuration);
if (isInt(slotsPerLabel) && slotsPerLabel > 1) {
return labelInterval;
}
}
return moment.duration(slotDuration); // fall back. clone
},
// Computes a default event time formatting string if `timeFormat` is not explicitly defined
computeEventTimeFormat: function() {
return this.view.opt('noMeridiemTimeFormat'); // like "6:30" (no AM/PM)
},
// Computes a default `displayEventEnd` value if one is not expliclty defined
computeDisplayEventEnd: function() {
return true;
},
/* Hit System
------------------------------------------------------------------------------------------------------------------*/
prepareHits: function() {
this.colCoordCache.build();
this.slatCoordCache.build();
},
releaseHits: function() {
this.colCoordCache.clear();
// NOTE: don't clear slatCoordCache because we rely on it for computeTimeTop
},
queryHit: function(leftOffset, topOffset) {
var snapsPerSlot = this.snapsPerSlot;
var colCoordCache = this.colCoordCache;
var slatCoordCache = this.slatCoordCache;
var colIndex = colCoordCache.getHorizontalIndex(leftOffset);
var slatIndex = slatCoordCache.getVerticalIndex(topOffset);
if (colIndex != null && slatIndex != null) {
var slatTop = slatCoordCache.getTopOffset(slatIndex);
var slatHeight = slatCoordCache.getHeight(slatIndex);
var partial = (topOffset - slatTop) / slatHeight; // floating point number between 0 and 1
var localSnapIndex = Math.floor(partial * snapsPerSlot); // the snap # relative to start of slat
var snapIndex = slatIndex * snapsPerSlot + localSnapIndex;
var snapTop = slatTop + (localSnapIndex / snapsPerSlot) * slatHeight;
var snapBottom = slatTop + ((localSnapIndex + 1) / snapsPerSlot) * slatHeight;
return {
col: colIndex,
snap: snapIndex,
component: this, // needed unfortunately :(
left: colCoordCache.getLeftOffset(colIndex),
right: colCoordCache.getRightOffset(colIndex),
top: snapTop,
bottom: snapBottom
};
}
},
getHitSpan: function(hit) {
var start = this.getCellDate(0, hit.col); // row=0
var time = this.computeSnapTime(hit.snap); // pass in the snap-index
var end;
start.time(time);
end = start.clone().add(this.snapDuration);
return { start: start, end: end };
},
getHitEl: function(hit) {
return this.colEls.eq(hit.col);
},
/* Dates
------------------------------------------------------------------------------------------------------------------*/
rangeUpdated: function() {
this.updateDayTable();
},
// Given a row number of the grid, representing a "snap", returns a time (Duration) from its start-of-day
computeSnapTime: function(snapIndex) {
return moment.duration(this.minTime + this.snapDuration * snapIndex);
},
// Slices up the given span (unzoned start/end with other misc data) into an array of segments
spanToSegs: function(span) {
var segs = this.sliceRangeByTimes(span);
var i;
for (i = 0; i < segs.length; i++) {
if (this.isRTL) {
segs[i].col = this.daysPerRow - 1 - segs[i].dayIndex;
}
else {
segs[i].col = segs[i].dayIndex;
}
}
return segs;
},
sliceRangeByTimes: function(range) {
var segs = [];
var seg;
var dayIndex;
var dayDate;
var dayRange;
for (dayIndex = 0; dayIndex < this.daysPerRow; dayIndex++) {
dayDate = this.dayDates[dayIndex].clone(); // TODO: better API for this?
dayRange = {
start: dayDate.clone().time(this.minTime),
end: dayDate.clone().time(this.maxTime)
};
seg = intersectRanges(range, dayRange); // both will be ambig timezone
if (seg) {
seg.dayIndex = dayIndex;
segs.push(seg);
}
}
return segs;
},
/* Coordinates
------------------------------------------------------------------------------------------------------------------*/
updateSize: function(isResize) { // NOT a standard Grid method
this.slatCoordCache.build();
if (isResize) {
this.updateSegVerticals();
}
},
// Computes the top coordinate, relative to the bounds of the grid, of the given date.
// A `startOfDayDate` must be given for avoiding ambiguity over how to treat midnight.
computeDateTop: function(date, startOfDayDate) {
return this.computeTimeTop(
moment.duration(
date - startOfDayDate.clone().stripTime()
)
);
},
// Computes the top coordinate, relative to the bounds of the grid, of the given time (a Duration).
computeTimeTop: function(time) {
var len = this.slatEls.length;
var slatCoverage = (time - this.minTime) / this.slotDuration; // floating-point value of # of slots covered
var slatIndex;
var slatRemainder;
// compute a floating-point number for how many slats should be progressed through.
// from 0 to number of slats (inclusive)
// constrained because minTime/maxTime might be customized.
slatCoverage = Math.max(0, slatCoverage);
slatCoverage = Math.min(len, slatCoverage);
// an integer index of the furthest whole slat
// from 0 to number slats (*exclusive*, so len-1)
slatIndex = Math.floor(slatCoverage);
slatIndex = Math.min(slatIndex, len - 1);
// how much further through the slatIndex slat (from 0.0-1.0) must be covered in addition.
// could be 1.0 if slatCoverage is covering *all* the slots
slatRemainder = slatCoverage - slatIndex;
return this.slatCoordCache.getTopPosition(slatIndex) +
this.slatCoordCache.getHeight(slatIndex) * slatRemainder;
},
/* Event Drag Visualization
------------------------------------------------------------------------------------------------------------------*/
// Renders a visual indication of an event being dragged over the specified date(s).
// A returned value of `true` signals that a mock "helper" event has been rendered.
renderDrag: function(eventLocation, seg) {
if (seg) { // if there is event information for this drag, render a helper event
this.renderEventLocationHelper(eventLocation, seg);
this.applyDragOpacity(this.helperEl);
return true; // signal that a helper has been rendered
}
else {
// otherwise, just render a highlight
this.renderHighlight(this.eventToSpan(eventLocation));
}
},
// Unrenders any visual indication of an event being dragged
unrenderDrag: function() {
this.unrenderHelper();
this.unrenderHighlight();
},
/* Event Resize Visualization
------------------------------------------------------------------------------------------------------------------*/
// Renders a visual indication of an event being resized
renderEventResize: function(eventLocation, seg) {
this.renderEventLocationHelper(eventLocation, seg);
},
// Unrenders any visual indication of an event being resized
unrenderEventResize: function() {
this.unrenderHelper();
},
/* Event Helper
------------------------------------------------------------------------------------------------------------------*/
// Renders a mock "helper" event. `sourceSeg` is the original segment object and might be null (an external drag)
renderHelper: function(event, sourceSeg) {
var segs = this.eventToSegs(event);
var tableEl;
var i, seg;
var sourceEl;
segs = this.renderFgSegEls(segs); // assigns each seg's el and returns a subset of segs that were rendered
tableEl = this.renderSegTable(segs);
// Try to make the segment that is in the same row as sourceSeg look the same
for (i = 0; i < segs.length; i++) {
seg = segs[i];
if (sourceSeg && sourceSeg.col === seg.col) {
sourceEl = sourceSeg.el;
seg.el.css({
left: sourceEl.css('left'),
right: sourceEl.css('right'),
'margin-left': sourceEl.css('margin-left'),
'margin-right': sourceEl.css('margin-right')
});
}
}
this.helperEl = $('')
.append(tableEl)
.appendTo(this.el);
},
// Unrenders any mock helper event
unrenderHelper: function() {
if (this.helperEl) {
this.helperEl.remove();
this.helperEl = null;
}
},
/* Selection
------------------------------------------------------------------------------------------------------------------*/
// Renders a visual indication of a selection. Overrides the default, which was to simply render a highlight.
renderSelection: function(span) {
if (this.view.opt('selectHelper')) { // this setting signals that a mock helper event should be rendered
// normally acceps an eventLocation, span has a start/end, which is good enough
this.renderEventLocationHelper(span);
}
else {
this.renderHighlight(span);
}
},
// Unrenders any visual indication of a selection
unrenderSelection: function() {
this.unrenderHelper();
this.unrenderHighlight();
},
/* Fill System (highlight, background events, business hours)
------------------------------------------------------------------------------------------------------------------*/
// Renders a set of rectangles over the given time segments.
// Only returns segments that successfully rendered.
renderFill: function(type, segs, className) {
var segCols;
var skeletonEl;
var trEl;
var col, colSegs;
var tdEl;
var containerEl;
var dayDate;
var i, seg;
if (segs.length) {
segs = this.renderFillSegEls(type, segs); // assignes `.el` to each seg. returns successfully rendered segs
segCols = this.groupSegCols(segs); // group into sub-arrays, and assigns 'col' to each seg
className = className || type.toLowerCase();
skeletonEl = $(
'
' +
'
' +
'
'
);
trEl = skeletonEl.find('tr');
for (col = 0; col < segCols.length; col++) {
colSegs = segCols[col];
tdEl = $('
').appendTo(trEl);
if (colSegs.length) {
containerEl = $('').appendTo(tdEl);
dayDate = this.getCellDate(0, col); // row=0
for (i = 0; i < colSegs.length; i++) {
seg = colSegs[i];
containerEl.append(
seg.el.css({
top: this.computeDateTop(seg.start, dayDate),
bottom: -this.computeDateTop(seg.end, dayDate) // the y position of the bottom edge
})
);
}
}
}
this.bookendCells(trEl);
this.el.append(skeletonEl);
this.elsByFill[type] = skeletonEl;
}
return segs;
}
});
;;
/* Event-rendering methods for the TimeGrid class
----------------------------------------------------------------------------------------------------------------------*/
TimeGrid.mixin({
eventSkeletonEl: null, // has cells with event-containers, which contain absolutely positioned event elements
// Renders the given foreground event segments onto the grid
renderFgSegs: function(segs) {
segs = this.renderFgSegEls(segs); // returns a subset of the segs. segs that were actually rendered
this.el.append(
this.eventSkeletonEl = $('')
.append(this.renderSegTable(segs))
);
return segs; // return only the segs that were actually rendered
},
// Unrenders all currently rendered foreground event segments
unrenderFgSegs: function(segs) {
if (this.eventSkeletonEl) {
this.eventSkeletonEl.remove();
this.eventSkeletonEl = null;
}
},
// Renders and returns the
portion of the event-skeleton.
// Returns an object with properties 'tbodyEl' and 'segs'.
renderSegTable: function(segs) {
var tableEl = $('
');
var trEl = tableEl.find('tr');
var segCols;
var i, seg;
var col, colSegs;
var containerEl;
segCols = this.groupSegCols(segs); // group into sub-arrays, and assigns 'col' to each seg
this.computeSegVerticals(segs); // compute and assign top/bottom
for (col = 0; col < segCols.length; col++) { // iterate each column grouping
colSegs = segCols[col];
this.placeSlotSegs(colSegs); // compute horizontal coordinates, z-index's, and reorder the array
containerEl = $('');
// assign positioning CSS and insert into container
for (i = 0; i < colSegs.length; i++) {
seg = colSegs[i];
seg.el.css(this.generateSegPositionCss(seg));
// if the height is short, add a className for alternate styling
if (seg.bottom - seg.top < 30) {
seg.el.addClass('fc-short');
}
containerEl.append(seg.el);
}
trEl.append($('
').append(containerEl));
}
this.bookendCells(trEl);
return tableEl;
},
// Given an array of segments that are all in the same column, sets the backwardCoord and forwardCoord on each.
// NOTE: Also reorders the given array by date!
placeSlotSegs: function(segs) {
var levels;
var level0;
var i;
this.sortEventSegs(segs); // order by certain criteria
levels = buildSlotSegLevels(segs);
computeForwardSlotSegs(levels);
if ((level0 = levels[0])) {
for (i = 0; i < level0.length; i++) {
computeSlotSegPressures(level0[i]);
}
for (i = 0; i < level0.length; i++) {
this.computeSlotSegCoords(level0[i], 0, 0);
}
}
},
// Calculate seg.forwardCoord and seg.backwardCoord for the segment, where both values range
// from 0 to 1. If the calendar is left-to-right, the seg.backwardCoord maps to "left" and
// seg.forwardCoord maps to "right" (via percentage). Vice-versa if the calendar is right-to-left.
//
// The segment might be part of a "series", which means consecutive segments with the same pressure
// who's width is unknown until an edge has been hit. `seriesBackwardPressure` is the number of
// segments behind this one in the current series, and `seriesBackwardCoord` is the starting
// coordinate of the first segment in the series.
computeSlotSegCoords: function(seg, seriesBackwardPressure, seriesBackwardCoord) {
var forwardSegs = seg.forwardSegs;
var i;
if (seg.forwardCoord === undefined) { // not already computed
if (!forwardSegs.length) {
// if there are no forward segments, this segment should butt up against the edge
seg.forwardCoord = 1;
}
else {
// sort highest pressure first
this.sortForwardSlotSegs(forwardSegs);
// this segment's forwardCoord will be calculated from the backwardCoord of the
// highest-pressure forward segment.
this.computeSlotSegCoords(forwardSegs[0], seriesBackwardPressure + 1, seriesBackwardCoord);
seg.forwardCoord = forwardSegs[0].backwardCoord;
}
// calculate the backwardCoord from the forwardCoord. consider the series
seg.backwardCoord = seg.forwardCoord -
(seg.forwardCoord - seriesBackwardCoord) / // available width for series
(seriesBackwardPressure + 1); // # of segments in the series
// use this segment's coordinates to computed the coordinates of the less-pressurized
// forward segments
for (i=0; i' +
'
' +
(timeText ?
'
' +
'' + htmlEscape(timeText) + '' +
'
' :
''
) +
(event.title ?
'
' +
htmlEscape(event.title) +
'
' :
''
) +
'
' +
'' +
/* TODO: write CSS for this
(isResizableFromStart ?
'' :
''
) +
*/
(isResizableFromEnd ?
'' :
''
) +
'';
},
// Generates an object with CSS properties/values that should be applied to an event segment element.
// Contains important positioning-related properties that should be applied to any event element, customized or not.
generateSegPositionCss: function(seg) {
var shouldOverlap = this.view.opt('slotEventOverlap');
var backwardCoord = seg.backwardCoord; // the left side if LTR. the right side if RTL. floating-point
var forwardCoord = seg.forwardCoord; // the right side if LTR. the left side if RTL. floating-point
var props = this.generateSegVerticalCss(seg); // get top/bottom first
var left; // amount of space from left edge, a fraction of the total width
var right; // amount of space from right edge, a fraction of the total width
if (shouldOverlap) {
// double the width, but don't go beyond the maximum forward coordinate (1.0)
forwardCoord = Math.min(1, backwardCoord + (forwardCoord - backwardCoord) * 2);
}
if (this.isRTL) {
left = 1 - forwardCoord;
right = backwardCoord;
}
else {
left = backwardCoord;
right = 1 - forwardCoord;
}
props.zIndex = seg.level + 1; // convert from 0-base to 1-based
props.left = left * 100 + '%';
props.right = right * 100 + '%';
if (shouldOverlap && seg.forwardPressure) {
// add padding to the edge so that forward stacked events don't cover the resizer's icon
props[this.isRTL ? 'marginLeft' : 'marginRight'] = 10 * 2; // 10 is a guesstimate of the icon's width
}
return props;
},
// Generates an object with CSS properties for the top/bottom coordinates of a segment element
generateSegVerticalCss: function(seg) {
return {
top: seg.top,
bottom: -seg.bottom // flipped because needs to be space beyond bottom edge of event container
};
},
// Given a flat array of segments, return an array of sub-arrays, grouped by each segment's col
groupSegCols: function(segs) {
var segCols = [];
var i;
for (i = 0; i < this.colCnt; i++) {
segCols.push([]);
}
for (i = 0; i < segs.length; i++) {
segCols[segs[i].col].push(segs[i]);
}
return segCols;
},
sortForwardSlotSegs: function(forwardSegs) {
forwardSegs.sort(proxy(this, 'compareForwardSlotSegs'));
},
// A cmp function for determining which forward segment to rely on more when computing coordinates.
compareForwardSlotSegs: function(seg1, seg2) {
// put higher-pressure first
return seg2.forwardPressure - seg1.forwardPressure ||
// put segments that are closer to initial edge first (and favor ones with no coords yet)
(seg1.backwardCoord || 0) - (seg2.backwardCoord || 0) ||
// do normal sorting...
this.compareEventSegs(seg1, seg2);
}
});
// Builds an array of segments "levels". The first level will be the leftmost tier of segments if the calendar is
// left-to-right, or the rightmost if the calendar is right-to-left. Assumes the segments are already ordered by date.
function buildSlotSegLevels(segs) {
var levels = [];
var i, seg;
var j;
for (i=0; i seg2.top && seg1.top < seg2.bottom;
}
;;
/* An abstract class from which other views inherit from
----------------------------------------------------------------------------------------------------------------------*/
var View = FC.View = Class.extend({
type: null, // subclass' view name (string)
name: null, // deprecated. use `type` instead
title: null, // the text that will be displayed in the header's title
calendar: null, // owner Calendar object
options: null, // hash containing all options. already merged with view-specific-options
el: null, // the view's containing element. set by Calendar
displaying: null, // a promise representing the state of rendering. null if no render requested
isSkeletonRendered: false,
isEventsRendered: false,
// range the view is actually displaying (moments)
start: null,
end: null, // exclusive
// range the view is formally responsible for (moments)
// may be different from start/end. for example, a month view might have 1st-31st, excluding padded dates
intervalStart: null,
intervalEnd: null, // exclusive
intervalDuration: null,
intervalUnit: null, // name of largest unit being displayed, like "month" or "week"
isRTL: false,
isSelected: false, // boolean whether a range of time is user-selected or not
eventOrderSpecs: null, // criteria for ordering events when they have same date/time
// subclasses can optionally use a scroll container
scrollerEl: null, // the element that will most likely scroll when content is too tall
scrollTop: null, // cached vertical scroll value
// classNames styled by jqui themes
widgetHeaderClass: null,
widgetContentClass: null,
highlightStateClass: null,
// for date utils, computed from options
nextDayThreshold: null,
isHiddenDayHash: null,
// document handlers, bound to `this` object
documentMousedownProxy: null, // TODO: doesn't work with touch
constructor: function(calendar, type, options, intervalDuration) {
this.calendar = calendar;
this.type = this.name = type; // .name is deprecated
this.options = options;
this.intervalDuration = intervalDuration || moment.duration(1, 'day');
this.nextDayThreshold = moment.duration(this.opt('nextDayThreshold'));
this.initThemingProps();
this.initHiddenDays();
this.isRTL = this.opt('isRTL');
this.eventOrderSpecs = parseFieldSpecs(this.opt('eventOrder'));
this.documentMousedownProxy = proxy(this, 'documentMousedown');
this.initialize();
},
// A good place for subclasses to initialize member variables
initialize: function() {
// subclasses can implement
},
// Retrieves an option with the given name
opt: function(name) {
return this.options[name];
},
// Triggers handlers that are view-related. Modifies args before passing to calendar.
trigger: function(name, thisObj) { // arguments beyond thisObj are passed along
var calendar = this.calendar;
return calendar.trigger.apply(
calendar,
[name, thisObj || this].concat(
Array.prototype.slice.call(arguments, 2), // arguments beyond thisObj
[ this ] // always make the last argument a reference to the view. TODO: deprecate
)
);
},
/* Dates
------------------------------------------------------------------------------------------------------------------*/
// Updates all internal dates to center around the given current unzoned date.
setDate: function(date) {
this.setRange(this.computeRange(date));
},
// Updates all internal dates for displaying the given unzoned range.
setRange: function(range) {
$.extend(this, range); // assigns every property to this object's member variables
this.updateTitle();
},
// Given a single current unzoned date, produce information about what range to display.
// Subclasses can override. Must return all properties.
computeRange: function(date) {
var intervalUnit = computeIntervalUnit(this.intervalDuration);
var intervalStart = date.clone().startOf(intervalUnit);
var intervalEnd = intervalStart.clone().add(this.intervalDuration);
var start, end;
// normalize the range's time-ambiguity
if (/year|month|week|day/.test(intervalUnit)) { // whole-days?
intervalStart.stripTime();
intervalEnd.stripTime();
}
else { // needs to have a time?
if (!intervalStart.hasTime()) {
intervalStart = this.calendar.time(0); // give 00:00 time
}
if (!intervalEnd.hasTime()) {
intervalEnd = this.calendar.time(0); // give 00:00 time
}
}
start = intervalStart.clone();
start = this.skipHiddenDays(start);
end = intervalEnd.clone();
end = this.skipHiddenDays(end, -1, true); // exclusively move backwards
return {
intervalUnit: intervalUnit,
intervalStart: intervalStart,
intervalEnd: intervalEnd,
start: start,
end: end
};
},
// Computes the new date when the user hits the prev button, given the current date
computePrevDate: function(date) {
return this.massageCurrentDate(
date.clone().startOf(this.intervalUnit).subtract(this.intervalDuration), -1
);
},
// Computes the new date when the user hits the next button, given the current date
computeNextDate: function(date) {
return this.massageCurrentDate(
date.clone().startOf(this.intervalUnit).add(this.intervalDuration)
);
},
// Given an arbitrarily calculated current date of the calendar, returns a date that is ensured to be completely
// visible. `direction` is optional and indicates which direction the current date was being
// incremented or decremented (1 or -1).
massageCurrentDate: function(date, direction) {
if (this.intervalDuration.as('days') <= 1) { // if the view displays a single day or smaller
if (this.isHiddenDay(date)) {
date = this.skipHiddenDays(date, direction);
date.startOf('day');
}
}
return date;
},
/* Title and Date Formatting
------------------------------------------------------------------------------------------------------------------*/
// Sets the view's title property to the most updated computed value
updateTitle: function() {
this.title = this.computeTitle();
},
// Computes what the title at the top of the calendar should be for this view
computeTitle: function() {
return this.formatRange(
{
// in case intervalStart/End has a time, make sure timezone is correct
start: this.calendar.applyTimezone(this.intervalStart),
end: this.calendar.applyTimezone(this.intervalEnd)
},
this.opt('titleFormat') || this.computeTitleFormat(),
this.opt('titleRangeSeparator')
);
},
// Generates the format string that should be used to generate the title for the current date range.
// Attempts to compute the most appropriate format if not explicitly specified with `titleFormat`.
computeTitleFormat: function() {
if (this.intervalUnit == 'year') {
return 'YYYY';
}
else if (this.intervalUnit == 'month') {
return this.opt('monthYearFormat'); // like "September 2014"
}
else if (this.intervalDuration.as('days') > 1) {
return 'll'; // multi-day range. shorter, like "Sep 9 - 10 2014"
}
else {
return 'LL'; // one day. longer, like "September 9 2014"
}
},
// Utility for formatting a range. Accepts a range object, formatting string, and optional separator.
// Displays all-day ranges naturally, with an inclusive end. Takes the current isRTL into account.
// The timezones of the dates within `range` will be respected.
formatRange: function(range, formatStr, separator) {
var end = range.end;
if (!end.hasTime()) { // all-day?
end = end.clone().subtract(1); // convert to inclusive. last ms of previous day
}
return formatRange(range.start, end, formatStr, separator, this.opt('isRTL'));
},
/* Rendering
------------------------------------------------------------------------------------------------------------------*/
// Sets the container element that the view should render inside of.
// Does other DOM-related initializations.
setElement: function(el) {
this.el = el;
this.bindGlobalHandlers();
},
// Removes the view's container element from the DOM, clearing any content beforehand.
// Undoes any other DOM-related attachments.
removeElement: function() {
this.clear(); // clears all content
// clean up the skeleton
if (this.isSkeletonRendered) {
this.unrenderSkeleton();
this.isSkeletonRendered = false;
}
this.unbindGlobalHandlers();
this.el.remove();
// NOTE: don't null-out this.el in case the View was destroyed within an API callback.
// We don't null-out the View's other jQuery element references upon destroy,
// so we shouldn't kill this.el either.
},
// Does everything necessary to display the view centered around the given unzoned date.
// Does every type of rendering EXCEPT rendering events.
// Is asychronous and returns a promise.
display: function(date) {
var _this = this;
var scrollState = null;
if (this.displaying) {
scrollState = this.queryScroll();
}
this.calendar.freezeContentHeight();
return this.clear().then(function() { // clear the content first (async)
return (
_this.displaying =
$.when(_this.displayView(date)) // displayView might return a promise
.then(function() {
_this.forceScroll(_this.computeInitialScroll(scrollState));
_this.calendar.unfreezeContentHeight();
_this.triggerRender();
})
);
});
},
// Does everything necessary to clear the content of the view.
// Clears dates and events. Does not clear the skeleton.
// Is asychronous and returns a promise.
clear: function() {
var _this = this;
var displaying = this.displaying;
if (displaying) { // previously displayed, or in the process of being displayed?
return displaying.then(function() { // wait for the display to finish
_this.displaying = null;
_this.clearEvents();
return _this.clearView(); // might return a promise. chain it
});
}
else {
return $.when(); // an immediately-resolved promise
}
},
// If the view has already been displayed, tears it down and displays it again.
// Will re-render the events if necessary, which display/clear DO NOT do.
// TODO: make behavior more consistent.
redisplay: function() {
if (this.isSkeletonRendered) {
var wasEventsRendered = this.isEventsRendered;
this.clearEvents(); // won't trigger handlers if events never rendered
this.clearView();
this.displayView();
if (wasEventsRendered) { // only render and trigger handlers if events previously rendered
this.displayEvents();
}
}
},
// Displays the view's non-event content, such as date-related content or anything required by events.
// Renders the view's non-content skeleton if necessary.
// Can be asynchronous and return a promise.
displayView: function(date) {
if (!this.isSkeletonRendered) {
this.renderSkeleton();
this.isSkeletonRendered = true;
}
if (date) {
this.setDate(date);
}
if (this.render) {
this.render(); // TODO: deprecate
}
this.renderDates();
this.updateSize();
this.renderBusinessHours(); // might need coordinates, so should go after updateSize()
},
// Unrenders the view content that was rendered in displayView.
// Can be asynchronous and return a promise.
clearView: function() {
this.unselect();
this.triggerUnrender();
this.unrenderBusinessHours();
this.unrenderDates();
if (this.destroy) {
this.destroy(); // TODO: deprecate
}
},
// Renders the basic structure of the view before any content is rendered
renderSkeleton: function() {
// subclasses should implement
},
// Unrenders the basic structure of the view
unrenderSkeleton: function() {
// subclasses should implement
},
// Renders the view's date-related content.
// Assumes setRange has already been called and the skeleton has already been rendered.
renderDates: function() {
// subclasses should implement
},
// Unrenders the view's date-related content
unrenderDates: function() {
// subclasses should override
},
// Renders business-hours onto the view. Assumes updateSize has already been called.
renderBusinessHours: function() {
// subclasses should implement
},
// Unrenders previously-rendered business-hours
unrenderBusinessHours: function() {
// subclasses should implement
},
// Signals that the view's content has been rendered
triggerRender: function() {
this.trigger('viewRender', this, this, this.el);
},
// Signals that the view's content is about to be unrendered
triggerUnrender: function() {
this.trigger('viewDestroy', this, this, this.el);
},
// Binds DOM handlers to elements that reside outside the view container, such as the document
bindGlobalHandlers: function() {
$(document).on('mousedown', this.documentMousedownProxy);
},
// Unbinds DOM handlers from elements that reside outside the view container
unbindGlobalHandlers: function() {
$(document).off('mousedown', this.documentMousedownProxy);
},
// Initializes internal variables related to theming
initThemingProps: function() {
var tm = this.opt('theme') ? 'ui' : 'fc';
this.widgetHeaderClass = tm + '-widget-header';
this.widgetContentClass = tm + '-widget-content';
this.highlightStateClass = tm + '-state-highlight';
},
/* Dimensions
------------------------------------------------------------------------------------------------------------------*/
// Refreshes anything dependant upon sizing of the container element of the grid
updateSize: function(isResize) {
var scrollState;
if (isResize) {
scrollState = this.queryScroll();
}
this.updateHeight(isResize);
this.updateWidth(isResize);
if (isResize) {
this.setScroll(scrollState);
}
},
// Refreshes the horizontal dimensions of the calendar
updateWidth: function(isResize) {
// subclasses should implement
},
// Refreshes the vertical dimensions of the calendar
updateHeight: function(isResize) {
var calendar = this.calendar; // we poll the calendar for height information
this.setHeight(
calendar.getSuggestedViewHeight(),
calendar.isHeightAuto()
);
},
// Updates the vertical dimensions of the calendar to the specified height.
// if `isAuto` is set to true, height becomes merely a suggestion and the view should use its "natural" height.
setHeight: function(height, isAuto) {
// subclasses should implement
},
/* Scroller
------------------------------------------------------------------------------------------------------------------*/
// Given the total height of the view, return the number of pixels that should be used for the scroller.
// Utility for subclasses.
computeScrollerHeight: function(totalHeight) {
var scrollerEl = this.scrollerEl;
var both;
var otherHeight; // cumulative height of everything that is not the scrollerEl in the view (header+borders)
both = this.el.add(scrollerEl);
// fuckin IE8/9/10/11 sometimes returns 0 for dimensions. this weird hack was the only thing that worked
both.css({
position: 'relative', // cause a reflow, which will force fresh dimension recalculation
left: -1 // ensure reflow in case the el was already relative. negative is less likely to cause new scroll
});
otherHeight = this.el.outerHeight() - scrollerEl.height(); // grab the dimensions
both.css({ position: '', left: '' }); // undo hack
return totalHeight - otherHeight;
},
// Computes the initial pre-configured scroll state prior to allowing the user to change it.
// Given the scroll state from the previous rendering. If first time rendering, given null.
computeInitialScroll: function(previousScrollState) {
return 0;
},
// Retrieves the view's current natural scroll state. Can return an arbitrary format.
queryScroll: function() {
if (this.scrollerEl) {
return this.scrollerEl.scrollTop(); // operates on scrollerEl by default
}
},
// Sets the view's scroll state. Will accept the same format computeInitialScroll and queryScroll produce.
setScroll: function(scrollState) {
if (this.scrollerEl) {
return this.scrollerEl.scrollTop(scrollState); // operates on scrollerEl by default
}
},
// Sets the scroll state, making sure to overcome any predefined scroll value the browser has in mind
forceScroll: function(scrollState) {
var _this = this;
this.setScroll(scrollState);
setTimeout(function() {
_this.setScroll(scrollState);
}, 0);
},
/* Event Elements / Segments
------------------------------------------------------------------------------------------------------------------*/
// Does everything necessary to display the given events onto the current view
displayEvents: function(events) {
var scrollState = this.queryScroll();
this.clearEvents();
this.renderEvents(events);
this.isEventsRendered = true;
this.setScroll(scrollState);
this.triggerEventRender();
},
// Does everything necessary to clear the view's currently-rendered events
clearEvents: function() {
if (this.isEventsRendered) {
this.triggerEventUnrender();
if (this.destroyEvents) {
this.destroyEvents(); // TODO: deprecate
}
this.unrenderEvents();
this.isEventsRendered = false;
}
},
// Renders the events onto the view.
renderEvents: function(events) {
// subclasses should implement
},
// Removes event elements from the view.
unrenderEvents: function() {
// subclasses should implement
},
// Signals that all events have been rendered
triggerEventRender: function() {
this.renderedEventSegEach(function(seg) {
this.trigger('eventAfterRender', seg.event, seg.event, seg.el);
});
this.trigger('eventAfterAllRender');
},
// Signals that all event elements are about to be removed
triggerEventUnrender: function() {
this.renderedEventSegEach(function(seg) {
this.trigger('eventDestroy', seg.event, seg.event, seg.el);
});
},
// Given an event and the default element used for rendering, returns the element that should actually be used.
// Basically runs events and elements through the eventRender hook.
resolveEventEl: function(event, el) {
var custom = this.trigger('eventRender', event, event, el);
if (custom === false) { // means don't render at all
el = null;
}
else if (custom && custom !== true) {
el = $(custom);
}
return el;
},
// Hides all rendered event segments linked to the given event
showEvent: function(event) {
this.renderedEventSegEach(function(seg) {
seg.el.css('visibility', '');
}, event);
},
// Shows all rendered event segments linked to the given event
hideEvent: function(event) {
this.renderedEventSegEach(function(seg) {
seg.el.css('visibility', 'hidden');
}, event);
},
// Iterates through event segments that have been rendered (have an el). Goes through all by default.
// If the optional `event` argument is specified, only iterates through segments linked to that event.
// The `this` value of the callback function will be the view.
renderedEventSegEach: function(func, event) {
var segs = this.getEventSegs();
var i;
for (i = 0; i < segs.length; i++) {
if (!event || segs[i].event._id === event._id) {
if (segs[i].el) {
func.call(this, segs[i]);
}
}
}
},
// Retrieves all the rendered segment objects for the view
getEventSegs: function() {
// subclasses must implement
return [];
},
/* Event Drag-n-Drop
------------------------------------------------------------------------------------------------------------------*/
// Computes if the given event is allowed to be dragged by the user
isEventDraggable: function(event) {
var source = event.source || {};
return firstDefined(
event.startEditable,
source.startEditable,
this.opt('eventStartEditable'),
event.editable,
source.editable,
this.opt('editable')
);
},
// Must be called when an event in the view is dropped onto new location.
// `dropLocation` is an object that contains the new zoned start/end/allDay values for the event.
reportEventDrop: function(event, dropLocation, largeUnit, el, ev) {
var calendar = this.calendar;
var mutateResult = calendar.mutateEvent(event, dropLocation, largeUnit);
var undoFunc = function() {
mutateResult.undo();
calendar.reportEventChange();
};
this.triggerEventDrop(event, mutateResult.dateDelta, undoFunc, el, ev);
calendar.reportEventChange(); // will rerender events
},
// Triggers event-drop handlers that have subscribed via the API
triggerEventDrop: function(event, dateDelta, undoFunc, el, ev) {
this.trigger('eventDrop', el[0], event, dateDelta, undoFunc, ev, {}); // {} = jqui dummy
},
/* External Element Drag-n-Drop
------------------------------------------------------------------------------------------------------------------*/
// Must be called when an external element, via jQuery UI, has been dropped onto the calendar.
// `meta` is the parsed data that has been embedded into the dragging event.
// `dropLocation` is an object that contains the new zoned start/end/allDay values for the event.
reportExternalDrop: function(meta, dropLocation, el, ev, ui) {
var eventProps = meta.eventProps;
var eventInput;
var event;
// Try to build an event object and render it. TODO: decouple the two
if (eventProps) {
eventInput = $.extend({}, eventProps, dropLocation);
event = this.calendar.renderEvent(eventInput, meta.stick)[0]; // renderEvent returns an array
}
this.triggerExternalDrop(event, dropLocation, el, ev, ui);
},
// Triggers external-drop handlers that have subscribed via the API
triggerExternalDrop: function(event, dropLocation, el, ev, ui) {
// trigger 'drop' regardless of whether element represents an event
this.trigger('drop', el[0], dropLocation.start, ev, ui);
if (event) {
this.trigger('eventReceive', null, event); // signal an external event landed
}
},
/* Drag-n-Drop Rendering (for both events and external elements)
------------------------------------------------------------------------------------------------------------------*/
// Renders a visual indication of a event or external-element drag over the given drop zone.
// If an external-element, seg will be `null`
renderDrag: function(dropLocation, seg) {
// subclasses must implement
},
// Unrenders a visual indication of an event or external-element being dragged.
unrenderDrag: function() {
// subclasses must implement
},
/* Event Resizing
------------------------------------------------------------------------------------------------------------------*/
// Computes if the given event is allowed to be resized from its starting edge
isEventResizableFromStart: function(event) {
return this.opt('eventResizableFromStart') && this.isEventResizable(event);
},
// Computes if the given event is allowed to be resized from its ending edge
isEventResizableFromEnd: function(event) {
return this.isEventResizable(event);
},
// Computes if the given event is allowed to be resized by the user at all
isEventResizable: function(event) {
var source = event.source || {};
return firstDefined(
event.durationEditable,
source.durationEditable,
this.opt('eventDurationEditable'),
event.editable,
source.editable,
this.opt('editable')
);
},
// Must be called when an event in the view has been resized to a new length
reportEventResize: function(event, resizeLocation, largeUnit, el, ev) {
var calendar = this.calendar;
var mutateResult = calendar.mutateEvent(event, resizeLocation, largeUnit);
var undoFunc = function() {
mutateResult.undo();
calendar.reportEventChange();
};
this.triggerEventResize(event, mutateResult.durationDelta, undoFunc, el, ev);
calendar.reportEventChange(); // will rerender events
},
// Triggers event-resize handlers that have subscribed via the API
triggerEventResize: function(event, durationDelta, undoFunc, el, ev) {
this.trigger('eventResize', el[0], event, durationDelta, undoFunc, ev, {}); // {} = jqui dummy
},
/* Selection
------------------------------------------------------------------------------------------------------------------*/
// Selects a date span on the view. `start` and `end` are both Moments.
// `ev` is the native mouse event that begin the interaction.
select: function(span, ev) {
this.unselect(ev);
this.renderSelection(span);
this.reportSelection(span, ev);
},
// Renders a visual indication of the selection
renderSelection: function(span) {
// subclasses should implement
},
// Called when a new selection is made. Updates internal state and triggers handlers.
reportSelection: function(span, ev) {
this.isSelected = true;
this.triggerSelect(span, ev);
},
// Triggers handlers to 'select'
triggerSelect: function(span, ev) {
this.trigger(
'select',
null,
this.calendar.applyTimezone(span.start), // convert to calendar's tz for external API
this.calendar.applyTimezone(span.end), // "
ev
);
},
// Undoes a selection. updates in the internal state and triggers handlers.
// `ev` is the native mouse event that began the interaction.
unselect: function(ev) {
if (this.isSelected) {
this.isSelected = false;
if (this.destroySelection) {
this.destroySelection(); // TODO: deprecate
}
this.unrenderSelection();
this.trigger('unselect', null, ev);
}
},
// Unrenders a visual indication of selection
unrenderSelection: function() {
// subclasses should implement
},
// Handler for unselecting when the user clicks something and the 'unselectAuto' setting is on
documentMousedown: function(ev) {
var ignore;
// is there a selection, and has the user made a proper left click?
if (this.isSelected && this.opt('unselectAuto') && isPrimaryMouseButton(ev)) {
// only unselect if the clicked element is not identical to or inside of an 'unselectCancel' element
ignore = this.opt('unselectCancel');
if (!ignore || !$(ev.target).closest(ignore).length) {
this.unselect(ev);
}
}
},
/* Day Click
------------------------------------------------------------------------------------------------------------------*/
// Triggers handlers to 'dayClick'
// Span has start/end of the clicked area. Only the start is useful.
triggerDayClick: function(span, dayEl, ev) {
this.trigger(
'dayClick',
dayEl,
this.calendar.applyTimezone(span.start), // convert to calendar's timezone for external API
ev
);
},
/* Date Utils
------------------------------------------------------------------------------------------------------------------*/
// Initializes internal variables related to calculating hidden days-of-week
initHiddenDays: function() {
var hiddenDays = this.opt('hiddenDays') || []; // array of day-of-week indices that are hidden
var isHiddenDayHash = []; // is the day-of-week hidden? (hash with day-of-week-index -> bool)
var dayCnt = 0;
var i;
if (this.opt('weekends') === false) {
hiddenDays.push(0, 6); // 0=sunday, 6=saturday
}
for (i = 0; i < 7; i++) {
if (
!(isHiddenDayHash[i] = $.inArray(i, hiddenDays) !== -1)
) {
dayCnt++;
}
}
if (!dayCnt) {
throw 'invalid hiddenDays'; // all days were hidden? bad.
}
this.isHiddenDayHash = isHiddenDayHash;
},
// Is the current day hidden?
// `day` is a day-of-week index (0-6), or a Moment
isHiddenDay: function(day) {
if (moment.isMoment(day)) {
day = day.day();
}
return this.isHiddenDayHash[day];
},
// Incrementing the current day until it is no longer a hidden day, returning a copy.
// If the initial value of `date` is not a hidden day, don't do anything.
// Pass `isExclusive` as `true` if you are dealing with an end date.
// `inc` defaults to `1` (increment one day forward each time)
skipHiddenDays: function(date, inc, isExclusive) {
var out = date.clone();
inc = inc || 1;
while (
this.isHiddenDayHash[(out.day() + (isExclusive ? inc : 0) + 7) % 7]
) {
out.add(inc, 'days');
}
return out;
},
// Returns the date range of the full days the given range visually appears to occupy.
// Returns a new range object.
computeDayRange: function(range) {
var startDay = range.start.clone().stripTime(); // the beginning of the day the range starts
var end = range.end;
var endDay = null;
var endTimeMS;
if (end) {
endDay = end.clone().stripTime(); // the beginning of the day the range exclusively ends
endTimeMS = +end.time(); // # of milliseconds into `endDay`
// If the end time is actually inclusively part of the next day and is equal to or
// beyond the next day threshold, adjust the end to be the exclusive end of `endDay`.
// Otherwise, leaving it as inclusive will cause it to exclude `endDay`.
if (endTimeMS && endTimeMS >= this.nextDayThreshold) {
endDay.add(1, 'days');
}
}
// If no end was specified, or if it is within `startDay` but not past nextDayThreshold,
// assign the default duration of one day.
if (!end || endDay <= startDay) {
endDay = startDay.clone().add(1, 'days');
}
return { start: startDay, end: endDay };
},
// Does the given event visually appear to occupy more than one day?
isMultiDayEvent: function(event) {
var range = this.computeDayRange(event); // event is range-ish
return range.end.diff(range.start, 'days') > 1;
}
});
;;
var Calendar = FC.Calendar = Class.extend({
dirDefaults: null, // option defaults related to LTR or RTL
langDefaults: null, // option defaults related to current locale
overrides: null, // option overrides given to the fullCalendar constructor
options: null, // all defaults combined with overrides
viewSpecCache: null, // cache of view definitions
view: null, // current View object
header: null,
loadingLevel: 0, // number of simultaneous loading tasks
// a lot of this class' OOP logic is scoped within this constructor function,
// but in the future, write individual methods on the prototype.
constructor: Calendar_constructor,
// Subclasses can override this for initialization logic after the constructor has been called
initialize: function() {
},
// Initializes `this.options` and other important options-related objects
initOptions: function(overrides) {
var lang, langDefaults;
var isRTL, dirDefaults;
// converts legacy options into non-legacy ones.
// in the future, when this is removed, don't use `overrides` reference. make a copy.
overrides = massageOverrides(overrides);
lang = overrides.lang;
langDefaults = langOptionHash[lang];
if (!langDefaults) {
lang = Calendar.defaults.lang;
langDefaults = langOptionHash[lang] || {};
}
isRTL = firstDefined(
overrides.isRTL,
langDefaults.isRTL,
Calendar.defaults.isRTL
);
dirDefaults = isRTL ? Calendar.rtlDefaults : {};
this.dirDefaults = dirDefaults;
this.langDefaults = langDefaults;
this.overrides = overrides;
this.options = mergeOptions([ // merge defaults and overrides. lowest to highest precedence
Calendar.defaults, // global defaults
dirDefaults,
langDefaults,
overrides
]);
populateInstanceComputableOptions(this.options);
this.viewSpecCache = {}; // somewhat unrelated
},
// Gets information about how to create a view. Will use a cache.
getViewSpec: function(viewType) {
var cache = this.viewSpecCache;
return cache[viewType] || (cache[viewType] = this.buildViewSpec(viewType));
},
// Given a duration singular unit, like "week" or "day", finds a matching view spec.
// Preference is given to views that have corresponding buttons.
getUnitViewSpec: function(unit) {
var viewTypes;
var i;
var spec;
if ($.inArray(unit, intervalUnits) != -1) {
// put views that have buttons first. there will be duplicates, but oh well
viewTypes = this.header.getViewsWithButtons();
$.each(FC.views, function(viewType) { // all views
viewTypes.push(viewType);
});
for (i = 0; i < viewTypes.length; i++) {
spec = this.getViewSpec(viewTypes[i]);
if (spec) {
if (spec.singleUnit == unit) {
return spec;
}
}
}
}
},
// Builds an object with information on how to create a given view
buildViewSpec: function(requestedViewType) {
var viewOverrides = this.overrides.views || {};
var specChain = []; // for the view. lowest to highest priority
var defaultsChain = []; // for the view. lowest to highest priority
var overridesChain = []; // for the view. lowest to highest priority
var viewType = requestedViewType;
var spec; // for the view
var overrides; // for the view
var duration;
var unit;
// iterate from the specific view definition to a more general one until we hit an actual View class
while (viewType) {
spec = fcViews[viewType];
overrides = viewOverrides[viewType];
viewType = null; // clear. might repopulate for another iteration
if (typeof spec === 'function') { // TODO: deprecate
spec = { 'class': spec };
}
if (spec) {
specChain.unshift(spec);
defaultsChain.unshift(spec.defaults || {});
duration = duration || spec.duration;
viewType = viewType || spec.type;
}
if (overrides) {
overridesChain.unshift(overrides); // view-specific option hashes have options at zero-level
duration = duration || overrides.duration;
viewType = viewType || overrides.type;
}
}
spec = mergeProps(specChain);
spec.type = requestedViewType;
if (!spec['class']) {
return false;
}
if (duration) {
duration = moment.duration(duration);
if (duration.valueOf()) { // valid?
spec.duration = duration;
unit = computeIntervalUnit(duration);
// view is a single-unit duration, like "week" or "day"
// incorporate options for this. lowest priority
if (duration.as(unit) === 1) {
spec.singleUnit = unit;
overridesChain.unshift(viewOverrides[unit] || {});
}
}
}
spec.defaults = mergeOptions(defaultsChain);
spec.overrides = mergeOptions(overridesChain);
this.buildViewSpecOptions(spec);
this.buildViewSpecButtonText(spec, requestedViewType);
return spec;
},
// Builds and assigns a view spec's options object from its already-assigned defaults and overrides
buildViewSpecOptions: function(spec) {
spec.options = mergeOptions([ // lowest to highest priority
Calendar.defaults, // global defaults
spec.defaults, // view's defaults (from ViewSubclass.defaults)
this.dirDefaults,
this.langDefaults, // locale and dir take precedence over view's defaults!
this.overrides, // calendar's overrides (options given to constructor)
spec.overrides // view's overrides (view-specific options)
]);
populateInstanceComputableOptions(spec.options);
},
// Computes and assigns a view spec's buttonText-related options
buildViewSpecButtonText: function(spec, requestedViewType) {
// given an options object with a possible `buttonText` hash, lookup the buttonText for the
// requested view, falling back to a generic unit entry like "week" or "day"
function queryButtonText(options) {
var buttonText = options.buttonText || {};
return buttonText[requestedViewType] ||
(spec.singleUnit ? buttonText[spec.singleUnit] : null);
}
// highest to lowest priority
spec.buttonTextOverride =
queryButtonText(this.overrides) || // constructor-specified buttonText lookup hash takes precedence
spec.overrides.buttonText; // `buttonText` for view-specific options is a string
// highest to lowest priority. mirrors buildViewSpecOptions
spec.buttonTextDefault =
queryButtonText(this.langDefaults) ||
queryButtonText(this.dirDefaults) ||
spec.defaults.buttonText || // a single string. from ViewSubclass.defaults
queryButtonText(Calendar.defaults) ||
(spec.duration ? this.humanizeDuration(spec.duration) : null) || // like "3 days"
requestedViewType; // fall back to given view name
},
// Given a view name for a custom view or a standard view, creates a ready-to-go View object
instantiateView: function(viewType) {
var spec = this.getViewSpec(viewType);
return new spec['class'](this, viewType, spec.options, spec.duration);
},
// Returns a boolean about whether the view is okay to instantiate at some point
isValidViewType: function(viewType) {
return Boolean(this.getViewSpec(viewType));
},
// Should be called when any type of async data fetching begins
pushLoading: function() {
if (!(this.loadingLevel++)) {
this.trigger('loading', null, true, this.view);
}
},
// Should be called when any type of async data fetching completes
popLoading: function() {
if (!(--this.loadingLevel)) {
this.trigger('loading', null, false, this.view);
}
},
// Given arguments to the select method in the API, returns a span (unzoned start/end and other info)
buildSelectSpan: function(zonedStartInput, zonedEndInput) {
var start = this.moment(zonedStartInput).stripZone();
var end;
if (zonedEndInput) {
end = this.moment(zonedEndInput).stripZone();
}
else if (start.hasTime()) {
end = start.clone().add(this.defaultTimedEventDuration);
}
else {
end = start.clone().add(this.defaultAllDayEventDuration);
}
return { start: start, end: end };
}
});
Calendar.mixin(Emitter);
function Calendar_constructor(element, overrides) {
var t = this;
t.initOptions(overrides || {});
var options = this.options;
// Exports
// -----------------------------------------------------------------------------------
t.render = render;
t.destroy = destroy;
t.refetchEvents = refetchEvents;
t.reportEvents = reportEvents;
t.reportEventChange = reportEventChange;
t.rerenderEvents = renderEvents; // `renderEvents` serves as a rerender. an API method
t.changeView = renderView; // `renderView` will switch to another view
t.select = select;
t.unselect = unselect;
t.prev = prev;
t.next = next;
t.prevYear = prevYear;
t.nextYear = nextYear;
t.today = today;
t.gotoDate = gotoDate;
t.incrementDate = incrementDate;
t.zoomTo = zoomTo;
t.getDate = getDate;
t.getCalendar = getCalendar;
t.getView = getView;
t.option = option;
t.trigger = trigger;
// Language-data Internals
// -----------------------------------------------------------------------------------
// Apply overrides to the current language's data
var localeData = createObject( // make a cheap copy
getMomentLocaleData(options.lang) // will fall back to en
);
if (options.monthNames) {
localeData._months = options.monthNames;
}
if (options.monthNamesShort) {
localeData._monthsShort = options.monthNamesShort;
}
if (options.dayNames) {
localeData._weekdays = options.dayNames;
}
if (options.dayNamesShort) {
localeData._weekdaysShort = options.dayNamesShort;
}
if (options.firstDay != null) {
var _week = createObject(localeData._week); // _week: { dow: # }
_week.dow = options.firstDay;
localeData._week = _week;
}
// assign a normalized value, to be used by our .week() moment extension
localeData._fullCalendar_weekCalc = (function(weekCalc) {
if (typeof weekCalc === 'function') {
return weekCalc;
}
else if (weekCalc === 'local') {
return weekCalc;
}
else if (weekCalc === 'iso' || weekCalc === 'ISO') {
return 'ISO';
}
})(options.weekNumberCalculation);
// Calendar-specific Date Utilities
// -----------------------------------------------------------------------------------
t.defaultAllDayEventDuration = moment.duration(options.defaultAllDayEventDuration);
t.defaultTimedEventDuration = moment.duration(options.defaultTimedEventDuration);
// Builds a moment using the settings of the current calendar: timezone and language.
// Accepts anything the vanilla moment() constructor accepts.
t.moment = function() {
var mom;
if (options.timezone === 'local') {
mom = FC.moment.apply(null, arguments);
// Force the moment to be local, because FC.moment doesn't guarantee it.
if (mom.hasTime()) { // don't give ambiguously-timed moments a local zone
mom.local();
}
}
else if (options.timezone === 'UTC') {
mom = FC.moment.utc.apply(null, arguments); // process as UTC
}
else {
mom = FC.moment.parseZone.apply(null, arguments); // let the input decide the zone
}
if ('_locale' in mom) { // moment 2.8 and above
mom._locale = localeData;
}
else { // pre-moment-2.8
mom._lang = localeData;
}
return mom;
};
// Returns a boolean about whether or not the calendar knows how to calculate
// the timezone offset of arbitrary dates in the current timezone.
t.getIsAmbigTimezone = function() {
return options.timezone !== 'local' && options.timezone !== 'UTC';
};
// Returns a copy of the given date in the current timezone. Has no effect on dates without times.
t.applyTimezone = function(date) {
if (!date.hasTime()) {
return date.clone();
}
var zonedDate = t.moment(date.toArray());
var timeAdjust = date.time() - zonedDate.time();
var adjustedZonedDate;
// Safari sometimes has problems with this coersion when near DST. Adjust if necessary. (bug #2396)
if (timeAdjust) { // is the time result different than expected?
adjustedZonedDate = zonedDate.clone().add(timeAdjust); // add milliseconds
if (date.time() - adjustedZonedDate.time() === 0) { // does it match perfectly now?
zonedDate = adjustedZonedDate;
}
}
return zonedDate;
};
// Returns a moment for the current date, as defined by the client's computer or from the `now` option.
// Will return an moment with an ambiguous timezone.
t.getNow = function() {
var now = options.now;
if (typeof now === 'function') {
now = now();
}
return t.moment(now).stripZone();
};
// Get an event's normalized end date. If not present, calculate it from the defaults.
t.getEventEnd = function(event) {
if (event.end) {
return event.end.clone();
}
else {
return t.getDefaultEventEnd(event.allDay, event.start);
}
};
// Given an event's allDay status and start date, return what its fallback end date should be.
// TODO: rename to computeDefaultEventEnd
t.getDefaultEventEnd = function(allDay, zonedStart) {
var end = zonedStart.clone();
if (allDay) {
end.stripTime().add(t.defaultAllDayEventDuration);
}
else {
end.add(t.defaultTimedEventDuration);
}
if (t.getIsAmbigTimezone()) {
end.stripZone(); // we don't know what the tzo should be
}
return end;
};
// Produces a human-readable string for the given duration.
// Side-effect: changes the locale of the given duration.
t.humanizeDuration = function(duration) {
return (duration.locale || duration.lang).call(duration, options.lang) // works moment-pre-2.8
.humanize();
};
// Imports
// -----------------------------------------------------------------------------------
EventManager.call(t, options);
var isFetchNeeded = t.isFetchNeeded;
var fetchEvents = t.fetchEvents;
// Locals
// -----------------------------------------------------------------------------------
var _element = element[0];
var header;
var headerElement;
var content;
var tm; // for making theme classes
var currentView; // NOTE: keep this in sync with this.view
var viewsByType = {}; // holds all instantiated view instances, current or not
var suggestedViewHeight;
var windowResizeProxy; // wraps the windowResize function
var ignoreWindowResize = 0;
var events = [];
var date; // unzoned
// Main Rendering
// -----------------------------------------------------------------------------------
// compute the initial ambig-timezone date
if (options.defaultDate != null) {
date = t.moment(options.defaultDate).stripZone();
}
else {
date = t.getNow(); // getNow already returns unzoned
}
function render() {
if (!content) {
initialRender();
}
else if (elementVisible()) {
// mainly for the public API
calcSize();
renderView();
}
}
function initialRender() {
tm = options.theme ? 'ui' : 'fc';
element.addClass('fc');
if (options.isRTL) {
element.addClass('fc-rtl');
}
else {
element.addClass('fc-ltr');
}
if (options.theme) {
element.addClass('ui-widget');
}
else {
element.addClass('fc-unthemed');
}
content = $("").prependTo(element);
header = t.header = new Header(t, options);
headerElement = header.render();
if (headerElement) {
element.prepend(headerElement);
}
renderView(options.defaultView);
if (options.handleWindowResize) {
windowResizeProxy = debounce(windowResize, options.windowResizeDelay); // prevents rapid calls
$(window).resize(windowResizeProxy);
}
}
function destroy() {
if (currentView) {
currentView.removeElement();
// NOTE: don't null-out currentView/t.view in case API methods are called after destroy.
// It is still the "current" view, just not rendered.
}
header.removeElement();
content.remove();
element.removeClass('fc fc-ltr fc-rtl fc-unthemed ui-widget');
if (windowResizeProxy) {
$(window).unbind('resize', windowResizeProxy);
}
}
function elementVisible() {
return element.is(':visible');
}
// View Rendering
// -----------------------------------------------------------------------------------
// Renders a view because of a date change, view-type change, or for the first time.
// If not given a viewType, keep the current view but render different dates.
function renderView(viewType) {
ignoreWindowResize++;
// if viewType is changing, remove the old view's rendering
if (currentView && viewType && currentView.type !== viewType) {
header.deactivateButton(currentView.type);
freezeContentHeight(); // prevent a scroll jump when view element is removed
currentView.removeElement();
currentView = t.view = null;
}
// if viewType changed, or the view was never created, create a fresh view
if (!currentView && viewType) {
currentView = t.view =
viewsByType[viewType] ||
(viewsByType[viewType] = t.instantiateView(viewType));
currentView.setElement(
$("").appendTo(content)
);
header.activateButton(viewType);
}
if (currentView) {
// in case the view should render a period of time that is completely hidden
date = currentView.massageCurrentDate(date);
// render or rerender the view
if (
!currentView.displaying ||
!date.isWithin(currentView.intervalStart, currentView.intervalEnd) // implicit date window change
) {
if (elementVisible()) {
currentView.display(date); // will call freezeContentHeight
unfreezeContentHeight(); // immediately unfreeze regardless of whether display is async
// need to do this after View::render, so dates are calculated
updateHeaderTitle();
updateTodayButton();
getAndRenderEvents();
}
}
}
unfreezeContentHeight(); // undo any lone freezeContentHeight calls
ignoreWindowResize--;
}
// Resizing
// -----------------------------------------------------------------------------------
t.getSuggestedViewHeight = function() {
if (suggestedViewHeight === undefined) {
calcSize();
}
return suggestedViewHeight;
};
t.isHeightAuto = function() {
return options.contentHeight === 'auto' || options.height === 'auto';
};
function updateSize(shouldRecalc) {
if (elementVisible()) {
if (shouldRecalc) {
_calcSize();
}
ignoreWindowResize++;
currentView.updateSize(true); // isResize=true. will poll getSuggestedViewHeight() and isHeightAuto()
ignoreWindowResize--;
return true; // signal success
}
}
function calcSize() {
if (elementVisible()) {
_calcSize();
}
}
function _calcSize() { // assumes elementVisible
if (typeof options.contentHeight === 'number') { // exists and not 'auto'
suggestedViewHeight = options.contentHeight;
}
else if (typeof options.height === 'number') { // exists and not 'auto'
suggestedViewHeight = options.height - (headerElement ? headerElement.outerHeight(true) : 0);
}
else {
suggestedViewHeight = Math.round(content.width() / Math.max(options.aspectRatio, .5));
}
}
function windowResize(ev) {
if (
!ignoreWindowResize &&
ev.target === window && // so we don't process jqui "resize" events that have bubbled up
currentView.start // view has already been rendered
) {
if (updateSize(true)) {
currentView.trigger('windowResize', _element);
}
}
}
/* Event Fetching/Rendering
-----------------------------------------------------------------------------*/
// TODO: going forward, most of this stuff should be directly handled by the view
function refetchEvents() { // can be called as an API method
destroyEvents(); // so that events are cleared before user starts waiting for AJAX
fetchAndRenderEvents();
}
function renderEvents() { // destroys old events if previously rendered
if (elementVisible()) {
freezeContentHeight();
currentView.displayEvents(events);
unfreezeContentHeight();
}
}
function destroyEvents() {
freezeContentHeight();
currentView.clearEvents();
unfreezeContentHeight();
}
function getAndRenderEvents() {
if (!options.lazyFetching || isFetchNeeded(currentView.start, currentView.end)) {
fetchAndRenderEvents();
}
else {
renderEvents();
}
}
function fetchAndRenderEvents() {
fetchEvents(currentView.start, currentView.end);
// ... will call reportEvents
// ... which will call renderEvents
}
// called when event data arrives
function reportEvents(_events) {
events = _events;
renderEvents();
}
// called when a single event's data has been changed
function reportEventChange() {
renderEvents();
}
/* Header Updating
-----------------------------------------------------------------------------*/
function updateHeaderTitle() {
header.updateTitle(currentView.title);
}
function updateTodayButton() {
var now = t.getNow();
if (now.isWithin(currentView.intervalStart, currentView.intervalEnd)) {
header.disableButton('today');
}
else {
header.enableButton('today');
}
}
/* Selection
-----------------------------------------------------------------------------*/
// this public method receives start/end dates in any format, with any timezone
function select(zonedStartInput, zonedEndInput) {
currentView.select(
t.buildSelectSpan.apply(t, arguments)
);
}
function unselect() { // safe to be called before renderView
if (currentView) {
currentView.unselect();
}
}
/* Date
-----------------------------------------------------------------------------*/
function prev() {
date = currentView.computePrevDate(date);
renderView();
}
function next() {
date = currentView.computeNextDate(date);
renderView();
}
function prevYear() {
date.add(-1, 'years');
renderView();
}
function nextYear() {
date.add(1, 'years');
renderView();
}
function today() {
date = t.getNow();
renderView();
}
function gotoDate(zonedDateInput) {
date = t.moment(zonedDateInput).stripZone();
renderView();
}
function incrementDate(delta) {
date.add(moment.duration(delta));
renderView();
}
// Forces navigation to a view for the given date.
// `viewType` can be a specific view name or a generic one like "week" or "day".
function zoomTo(newDate, viewType) {
var spec;
viewType = viewType || 'day'; // day is default zoom
spec = t.getViewSpec(viewType) || t.getUnitViewSpec(viewType);
date = newDate.clone();
renderView(spec ? spec.type : null);
}
// for external API
function getDate() {
return t.applyTimezone(date); // infuse the calendar's timezone
}
/* Height "Freezing"
-----------------------------------------------------------------------------*/
// TODO: move this into the view
t.freezeContentHeight = freezeContentHeight;
t.unfreezeContentHeight = unfreezeContentHeight;
function freezeContentHeight() {
content.css({
width: '100%',
height: content.height(),
overflow: 'hidden'
});
}
function unfreezeContentHeight() {
content.css({
width: '',
height: '',
overflow: ''
});
}
/* Misc
-----------------------------------------------------------------------------*/
function getCalendar() {
return t;
}
function getView() {
return currentView;
}
function option(name, value) {
if (value === undefined) {
return options[name];
}
if (name == 'height' || name == 'contentHeight' || name == 'aspectRatio') {
options[name] = value;
updateSize(true); // true = allow recalculation of height
}
}
function trigger(name, thisObj) { // overrides the Emitter's trigger method :(
var args = Array.prototype.slice.call(arguments, 2);
thisObj = thisObj || _element;
this.triggerWith(name, thisObj, args); // Emitter's method
if (options[name]) {
return options[name].apply(thisObj, args);
}
}
t.initialize();
}
;;
Calendar.defaults = {
titleRangeSeparator: ' \u2014 ', // emphasized dash
monthYearFormat: 'MMMM YYYY', // required for en. other languages rely on datepicker computable option
defaultTimedEventDuration: '02:00:00',
defaultAllDayEventDuration: { days: 1 },
forceEventDuration: false,
nextDayThreshold: '09:00:00', // 9am
// display
defaultView: 'month',
aspectRatio: 1.35,
header: {
left: 'title',
center: '',
right: 'today prev,next'
},
weekends: true,
weekNumbers: false,
weekNumberTitle: 'W',
weekNumberCalculation: 'local',
//editable: false,
scrollTime: '06:00:00',
// event ajax
lazyFetching: true,
startParam: 'start',
endParam: 'end',
timezoneParam: 'timezone',
timezone: false,
//allDayDefault: undefined,
// locale
isRTL: false,
buttonText: {
prev: "prev",
next: "next",
prevYear: "prev year",
nextYear: "next year",
year: 'year', // TODO: locale files need to specify this
today: 'today',
month: 'month',
week: 'week',
day: 'day'
},
buttonIcons: {
prev: 'left-single-arrow',
next: 'right-single-arrow',
prevYear: 'left-double-arrow',
nextYear: 'right-double-arrow'
},
// jquery-ui theming
theme: false,
themeButtonIcons: {
prev: 'circle-triangle-w',
next: 'circle-triangle-e',
prevYear: 'seek-prev',
nextYear: 'seek-next'
},
//eventResizableFromStart: false,
dragOpacity: .75,
dragRevertDuration: 500,
dragScroll: true,
//selectable: false,
unselectAuto: true,
dropAccept: '*',
eventOrder: 'title',
eventLimit: false,
eventLimitText: 'more',
eventLimitClick: 'popover',
dayPopoverFormat: 'LL',
handleWindowResize: true,
windowResizeDelay: 200 // milliseconds before an updateSize happens
};
Calendar.englishDefaults = { // used by lang.js
dayPopoverFormat: 'dddd, MMMM D'
};
Calendar.rtlDefaults = { // right-to-left defaults
header: { // TODO: smarter solution (first/center/last ?)
left: 'next,prev today',
center: '',
right: 'title'
},
buttonIcons: {
prev: 'right-single-arrow',
next: 'left-single-arrow',
prevYear: 'right-double-arrow',
nextYear: 'left-double-arrow'
},
themeButtonIcons: {
prev: 'circle-triangle-e',
next: 'circle-triangle-w',
nextYear: 'seek-prev',
prevYear: 'seek-next'
}
};
;;
var langOptionHash = FC.langs = {}; // initialize and expose
// TODO: document the structure and ordering of a FullCalendar lang file
// TODO: rename everything "lang" to "locale", like what the moment project did
// Initialize jQuery UI datepicker translations while using some of the translations
// Will set this as the default language for datepicker.
FC.datepickerLang = function(langCode, dpLangCode, dpOptions) {
// get the FullCalendar internal option hash for this language. create if necessary
var fcOptions = langOptionHash[langCode] || (langOptionHash[langCode] = {});
// transfer some simple options from datepicker to fc
fcOptions.isRTL = dpOptions.isRTL;
fcOptions.weekNumberTitle = dpOptions.weekHeader;
// compute some more complex options from datepicker
$.each(dpComputableOptions, function(name, func) {
fcOptions[name] = func(dpOptions);
});
// is jQuery UI Datepicker is on the page?
if ($.datepicker) {
// Register the language data.
// FullCalendar and MomentJS use language codes like "pt-br" but Datepicker
// does it like "pt-BR" or if it doesn't have the language, maybe just "pt".
// Make an alias so the language can be referenced either way.
$.datepicker.regional[dpLangCode] =
$.datepicker.regional[langCode] = // alias
dpOptions;
// Alias 'en' to the default language data. Do this every time.
$.datepicker.regional.en = $.datepicker.regional[''];
// Set as Datepicker's global defaults.
$.datepicker.setDefaults(dpOptions);
}
};
// Sets FullCalendar-specific translations. Will set the language as the global default.
FC.lang = function(langCode, newFcOptions) {
var fcOptions;
var momOptions;
// get the FullCalendar internal option hash for this language. create if necessary
fcOptions = langOptionHash[langCode] || (langOptionHash[langCode] = {});
// provided new options for this language? merge them in
if (newFcOptions) {
fcOptions = langOptionHash[langCode] = mergeOptions([ fcOptions, newFcOptions ]);
}
// compute language options that weren't defined.
// always do this. newFcOptions can be undefined when initializing from i18n file,
// so no way to tell if this is an initialization or a default-setting.
momOptions = getMomentLocaleData(langCode); // will fall back to en
$.each(momComputableOptions, function(name, func) {
if (fcOptions[name] == null) {
fcOptions[name] = func(momOptions, fcOptions);
}
});
// set it as the default language for FullCalendar
Calendar.defaults.lang = langCode;
};
// NOTE: can't guarantee any of these computations will run because not every language has datepicker
// configs, so make sure there are English fallbacks for these in the defaults file.
var dpComputableOptions = {
buttonText: function(dpOptions) {
return {
// the translations sometimes wrongly contain HTML entities
prev: stripHtmlEntities(dpOptions.prevText),
next: stripHtmlEntities(dpOptions.nextText),
today: stripHtmlEntities(dpOptions.currentText)
};
},
// Produces format strings like "MMMM YYYY" -> "September 2014"
monthYearFormat: function(dpOptions) {
return dpOptions.showMonthAfterYear ?
'YYYY[' + dpOptions.yearSuffix + '] MMMM' :
'MMMM YYYY[' + dpOptions.yearSuffix + ']';
}
};
var momComputableOptions = {
// Produces format strings like "ddd M/D" -> "Fri 9/15"
dayOfMonthFormat: function(momOptions, fcOptions) {
var format = momOptions.longDateFormat('l'); // for the format like "M/D/YYYY"
// strip the year off the edge, as well as other misc non-whitespace chars
format = format.replace(/^Y+[^\w\s]*|[^\w\s]*Y+$/g, '');
if (fcOptions.isRTL) {
format += ' ddd'; // for RTL, add day-of-week to end
}
else {
format = 'ddd ' + format; // for LTR, add day-of-week to beginning
}
return format;
},
// Produces format strings like "h:mma" -> "6:00pm"
mediumTimeFormat: function(momOptions) { // can't be called `timeFormat` because collides with option
return momOptions.longDateFormat('LT')
.replace(/\s*a$/i, 'a'); // convert AM/PM/am/pm to lowercase. remove any spaces beforehand
},
// Produces format strings like "h(:mm)a" -> "6pm" / "6:30pm"
smallTimeFormat: function(momOptions) {
return momOptions.longDateFormat('LT')
.replace(':mm', '(:mm)')
.replace(/(\Wmm)$/, '($1)') // like above, but for foreign langs
.replace(/\s*a$/i, 'a'); // convert AM/PM/am/pm to lowercase. remove any spaces beforehand
},
// Produces format strings like "h(:mm)t" -> "6p" / "6:30p"
extraSmallTimeFormat: function(momOptions) {
return momOptions.longDateFormat('LT')
.replace(':mm', '(:mm)')
.replace(/(\Wmm)$/, '($1)') // like above, but for foreign langs
.replace(/\s*a$/i, 't'); // convert to AM/PM/am/pm to lowercase one-letter. remove any spaces beforehand
},
// Produces format strings like "ha" / "H" -> "6pm" / "18"
hourFormat: function(momOptions) {
return momOptions.longDateFormat('LT')
.replace(':mm', '')
.replace(/(\Wmm)$/, '') // like above, but for foreign langs
.replace(/\s*a$/i, 'a'); // convert AM/PM/am/pm to lowercase. remove any spaces beforehand
},
// Produces format strings like "h:mm" -> "6:30" (with no AM/PM)
noMeridiemTimeFormat: function(momOptions) {
return momOptions.longDateFormat('LT')
.replace(/\s*a$/i, ''); // remove trailing AM/PM
}
};
// options that should be computed off live calendar options (considers override options)
// TODO: best place for this? related to lang?
// TODO: flipping text based on isRTL is a bad idea because the CSS `direction` might want to handle it
var instanceComputableOptions = {
// Produces format strings for results like "Mo 16"
smallDayDateFormat: function(options) {
return options.isRTL ?
'D dd' :
'dd D';
},
// Produces format strings for results like "Wk 5"
weekFormat: function(options) {
return options.isRTL ?
'w[ ' + options.weekNumberTitle + ']' :
'[' + options.weekNumberTitle + ' ]w';
},
// Produces format strings for results like "Wk5"
smallWeekFormat: function(options) {
return options.isRTL ?
'w[' + options.weekNumberTitle + ']' :
'[' + options.weekNumberTitle + ']w';
}
};
function populateInstanceComputableOptions(options) {
$.each(instanceComputableOptions, function(name, func) {
if (options[name] == null) {
options[name] = func(options);
}
});
}
// Returns moment's internal locale data. If doesn't exist, returns English.
// Works with moment-pre-2.8
function getMomentLocaleData(langCode) {
var func = moment.localeData || moment.langData;
return func.call(moment, langCode) ||
func.call(moment, 'en'); // the newer localData could return null, so fall back to en
}
// Initialize English by forcing computation of moment-derived options.
// Also, sets it as the default.
FC.lang('en', Calendar.englishDefaults);
;;
/* Top toolbar area with buttons and title
----------------------------------------------------------------------------------------------------------------------*/
// TODO: rename all header-related things to "toolbar"
function Header(calendar, options) {
var t = this;
// exports
t.render = render;
t.removeElement = removeElement;
t.updateTitle = updateTitle;
t.activateButton = activateButton;
t.deactivateButton = deactivateButton;
t.disableButton = disableButton;
t.enableButton = enableButton;
t.getViewsWithButtons = getViewsWithButtons;
// locals
var el = $();
var viewsWithButtons = [];
var tm;
function render() {
var sections = options.header;
tm = options.theme ? 'ui' : 'fc';
if (sections) {
el = $("")
.append(renderSection('left'))
.append(renderSection('right'))
.append(renderSection('center'))
.append('');
return el;
}
}
function removeElement() {
el.remove();
el = $();
}
function renderSection(position) {
var sectionEl = $('');
var buttonStr = options.header[position];
if (buttonStr) {
$.each(buttonStr.split(' '), function(i) {
var groupChildren = $();
var isOnlyButtons = true;
var groupEl;
$.each(this.split(','), function(j, buttonName) {
var customButtonProps;
var viewSpec;
var buttonClick;
var overrideText; // text explicitly set by calendar's constructor options. overcomes icons
var defaultText;
var themeIcon;
var normalIcon;
var innerHtml;
var classes;
var button; // the element
if (buttonName == 'title') {
groupChildren = groupChildren.add($('
')); // we always want it to take up height
isOnlyButtons = false;
}
else {
if ((customButtonProps = (calendar.options.customButtons || {})[buttonName])) {
buttonClick = function(ev) {
if (customButtonProps.click) {
customButtonProps.click.call(button[0], ev);
}
};
overrideText = ''; // icons will override text
defaultText = customButtonProps.text;
}
else if ((viewSpec = calendar.getViewSpec(buttonName))) {
buttonClick = function() {
calendar.changeView(buttonName);
};
viewsWithButtons.push(buttonName);
overrideText = viewSpec.buttonTextOverride;
defaultText = viewSpec.buttonTextDefault;
}
else if (calendar[buttonName]) { // a calendar method
buttonClick = function() {
calendar[buttonName]();
};
overrideText = (calendar.overrides.buttonText || {})[buttonName];
defaultText = options.buttonText[buttonName]; // everything else is considered default
}
if (buttonClick) {
themeIcon =
customButtonProps ?
customButtonProps.themeIcon :
options.themeButtonIcons[buttonName];
normalIcon =
customButtonProps ?
customButtonProps.icon :
options.buttonIcons[buttonName];
if (overrideText) {
innerHtml = htmlEscape(overrideText);
}
else if (themeIcon && options.theme) {
innerHtml = "";
}
else if (normalIcon && !options.theme) {
innerHtml = "";
}
else {
innerHtml = htmlEscape(defaultText);
}
classes = [
'fc-' + buttonName + '-button',
tm + '-button',
tm + '-state-default'
];
button = $( // type="button" so that it doesn't submit a form
''
)
.click(function(ev) {
// don't process clicks for disabled buttons
if (!button.hasClass(tm + '-state-disabled')) {
buttonClick(ev);
// after the click action, if the button becomes the "active" tab, or disabled,
// it should never have a hover class, so remove it now.
if (
button.hasClass(tm + '-state-active') ||
button.hasClass(tm + '-state-disabled')
) {
button.removeClass(tm + '-state-hover');
}
}
})
.mousedown(function() {
// the *down* effect (mouse pressed in).
// only on buttons that are not the "active" tab, or disabled
button
.not('.' + tm + '-state-active')
.not('.' + tm + '-state-disabled')
.addClass(tm + '-state-down');
})
.mouseup(function() {
// undo the *down* effect
button.removeClass(tm + '-state-down');
})
.hover(
function() {
// the *hover* effect.
// only on buttons that are not the "active" tab, or disabled
button
.not('.' + tm + '-state-active')
.not('.' + tm + '-state-disabled')
.addClass(tm + '-state-hover');
},
function() {
// undo the *hover* effect
button
.removeClass(tm + '-state-hover')
.removeClass(tm + '-state-down'); // if mouseleave happens before mouseup
}
);
groupChildren = groupChildren.add(button);
}
}
});
if (isOnlyButtons) {
groupChildren
.first().addClass(tm + '-corner-left').end()
.last().addClass(tm + '-corner-right').end();
}
if (groupChildren.length > 1) {
groupEl = $('');
if (isOnlyButtons) {
groupEl.addClass('fc-button-group');
}
groupEl.append(groupChildren);
sectionEl.append(groupEl);
}
else {
sectionEl.append(groupChildren); // 1 or 0 children
}
});
}
return sectionEl;
}
function updateTitle(text) {
el.find('h2').text(text);
}
function activateButton(buttonName) {
el.find('.fc-' + buttonName + '-button')
.addClass(tm + '-state-active');
}
function deactivateButton(buttonName) {
el.find('.fc-' + buttonName + '-button')
.removeClass(tm + '-state-active');
}
function disableButton(buttonName) {
el.find('.fc-' + buttonName + '-button')
.attr('disabled', 'disabled')
.addClass(tm + '-state-disabled');
}
function enableButton(buttonName) {
el.find('.fc-' + buttonName + '-button')
.removeAttr('disabled')
.removeClass(tm + '-state-disabled');
}
function getViewsWithButtons() {
return viewsWithButtons;
}
}
;;
FC.sourceNormalizers = [];
FC.sourceFetchers = [];
var ajaxDefaults = {
dataType: 'json',
cache: false
};
var eventGUID = 1;
function EventManager(options) { // assumed to be a calendar
var t = this;
// exports
t.isFetchNeeded = isFetchNeeded;
t.fetchEvents = fetchEvents;
t.addEventSource = addEventSource;
t.removeEventSource = removeEventSource;
t.updateEvent = updateEvent;
t.renderEvent = renderEvent;
t.removeEvents = removeEvents;
t.clientEvents = clientEvents;
t.mutateEvent = mutateEvent;
t.normalizeEventDates = normalizeEventDates;
t.normalizeEventTimes = normalizeEventTimes;
// imports
var reportEvents = t.reportEvents;
// locals
var stickySource = { events: [] };
var sources = [ stickySource ];
var rangeStart, rangeEnd;
var currentFetchID = 0;
var pendingSourceCnt = 0;
var cache = []; // holds events that have already been expanded
$.each(
(options.events ? [ options.events ] : []).concat(options.eventSources || []),
function(i, sourceInput) {
var source = buildEventSource(sourceInput);
if (source) {
sources.push(source);
}
}
);
/* Fetching
-----------------------------------------------------------------------------*/
// start and end are assumed to be unzoned
function isFetchNeeded(start, end) {
return !rangeStart || // nothing has been fetched yet?
start < rangeStart || end > rangeEnd; // is part of the new range outside of the old range?
}
function fetchEvents(start, end) {
rangeStart = start;
rangeEnd = end;
cache = [];
var fetchID = ++currentFetchID;
var len = sources.length;
pendingSourceCnt = len;
for (var i=0; i= eventStart && range.end <= eventEnd;
}
// Does the event's date range intersect with the given range?
// start/end already assumed to have stripped zones :(
function eventIntersectsRange(event, range) {
var eventStart = event.start.clone().stripZone();
var eventEnd = t.getEventEnd(event).stripZone();
return range.start < eventEnd && range.end > eventStart;
}
t.getEventCache = function() {
return cache;
};
}
// Returns a list of events that the given event should be compared against when being considered for a move to
// the specified span. Attached to the Calendar's prototype because EventManager is a mixin for a Calendar.
Calendar.prototype.getPeerEvents = function(span, event) {
var cache = this.getEventCache();
var peerEvents = [];
var i, otherEvent;
for (i = 0; i < cache.length; i++) {
otherEvent = cache[i];
if (
!event ||
event._id !== otherEvent._id // don't compare the event to itself or other related [repeating] events
) {
peerEvents.push(otherEvent);
}
}
return peerEvents;
};
// updates the "backup" properties, which are preserved in order to compute diffs later on.
function backupEventDates(event) {
event._allDay = event.allDay;
event._start = event.start.clone();
event._end = event.end ? event.end.clone() : null;
}
;;
/* An abstract class for the "basic" views, as well as month view. Renders one or more rows of day cells.
----------------------------------------------------------------------------------------------------------------------*/
// It is a manager for a DayGrid subcomponent, which does most of the heavy lifting.
// It is responsible for managing width/height.
var BasicView = FC.BasicView = View.extend({
dayGridClass: DayGrid, // class the dayGrid will be instantiated from (overridable by subclasses)
dayGrid: null, // the main subcomponent that does most of the heavy lifting
dayNumbersVisible: false, // display day numbers on each day cell?
weekNumbersVisible: false, // display week numbers along the side?
weekNumberWidth: null, // width of all the week-number cells running down the side
headContainerEl: null, // div that hold's the dayGrid's rendered date header
headRowEl: null, // the fake row element of the day-of-week header
initialize: function() {
this.dayGrid = this.instantiateDayGrid();
},
// Generates the DayGrid object this view needs. Draws from this.dayGridClass
instantiateDayGrid: function() {
// generate a subclass on the fly with BasicView-specific behavior
// TODO: cache this subclass
var subclass = this.dayGridClass.extend(basicDayGridMethods);
return new subclass(this);
},
// Sets the display range and computes all necessary dates
setRange: function(range) {
View.prototype.setRange.call(this, range); // call the super-method
this.dayGrid.breakOnWeeks = /year|month|week/.test(this.intervalUnit); // do before setRange
this.dayGrid.setRange(range);
},
// Compute the value to feed into setRange. Overrides superclass.
computeRange: function(date) {
var range = View.prototype.computeRange.call(this, date); // get value from the super-method
// year and month views should be aligned with weeks. this is already done for week
if (/year|month/.test(range.intervalUnit)) {
range.start.startOf('week');
range.start = this.skipHiddenDays(range.start);
// make end-of-week if not already
if (range.end.weekday()) {
range.end.add(1, 'week').startOf('week');
range.end = this.skipHiddenDays(range.end, -1, true); // exclusively move backwards
}
}
return range;
},
// Renders the view into `this.el`, which should already be assigned
renderDates: function() {
this.dayNumbersVisible = this.dayGrid.rowCnt > 1; // TODO: make grid responsible
this.weekNumbersVisible = this.opt('weekNumbers');
this.dayGrid.numbersVisible = this.dayNumbersVisible || this.weekNumbersVisible;
this.el.addClass('fc-basic-view').html(this.renderSkeletonHtml());
this.renderHead();
this.scrollerEl = this.el.find('.fc-day-grid-container');
this.dayGrid.setElement(this.el.find('.fc-day-grid'));
this.dayGrid.renderDates(this.hasRigidRows());
},
// render the day-of-week headers
renderHead: function() {
this.headContainerEl =
this.el.find('.fc-head-container')
.html(this.dayGrid.renderHeadHtml());
this.headRowEl = this.headContainerEl.find('.fc-row');
},
// Unrenders the content of the view. Since we haven't separated skeleton rendering from date rendering,
// always completely kill the dayGrid's rendering.
unrenderDates: function() {
this.dayGrid.unrenderDates();
this.dayGrid.removeElement();
},
renderBusinessHours: function() {
this.dayGrid.renderBusinessHours();
},
// Builds the HTML skeleton for the view.
// The day-grid component will render inside of a container defined by this HTML.
renderSkeletonHtml: function() {
return '' +
'
' +
'' +
'
' +
'
' +
'
' +
'' +
'' +
'
' +
'
' +
'
' +
'' +
'
' +
'
' +
'
' +
'' +
'
';
},
// Generates an HTML attribute string for setting the width of the week number column, if it is known
weekNumberStyleAttr: function() {
if (this.weekNumberWidth !== null) {
return 'style="width:' + this.weekNumberWidth + 'px"';
}
return '';
},
// Determines whether each row should have a constant height
hasRigidRows: function() {
var eventLimit = this.opt('eventLimit');
return eventLimit && typeof eventLimit !== 'number';
},
/* Dimensions
------------------------------------------------------------------------------------------------------------------*/
// Refreshes the horizontal dimensions of the view
updateWidth: function() {
if (this.weekNumbersVisible) {
// Make sure all week number cells running down the side have the same width.
// Record the width for cells created later.
this.weekNumberWidth = matchCellWidths(
this.el.find('.fc-week-number')
);
}
},
// Adjusts the vertical dimensions of the view to the specified values
setHeight: function(totalHeight, isAuto) {
var eventLimit = this.opt('eventLimit');
var scrollerHeight;
// reset all heights to be natural
unsetScroller(this.scrollerEl);
uncompensateScroll(this.headRowEl);
this.dayGrid.removeSegPopover(); // kill the "more" popover if displayed
// is the event limit a constant level number?
if (eventLimit && typeof eventLimit === 'number') {
this.dayGrid.limitRows(eventLimit); // limit the levels first so the height can redistribute after
}
scrollerHeight = this.computeScrollerHeight(totalHeight);
this.setGridHeight(scrollerHeight, isAuto);
// is the event limit dynamically calculated?
if (eventLimit && typeof eventLimit !== 'number') {
this.dayGrid.limitRows(eventLimit); // limit the levels after the grid's row heights have been set
}
if (!isAuto && setPotentialScroller(this.scrollerEl, scrollerHeight)) { // using scrollbars?
compensateScroll(this.headRowEl, getScrollbarWidths(this.scrollerEl));
// doing the scrollbar compensation might have created text overflow which created more height. redo
scrollerHeight = this.computeScrollerHeight(totalHeight);
this.scrollerEl.height(scrollerHeight);
}
},
// Sets the height of just the DayGrid component in this view
setGridHeight: function(height, isAuto) {
if (isAuto) {
undistributeHeight(this.dayGrid.rowEls); // let the rows be their natural height with no expanding
}
else {
distributeHeight(this.dayGrid.rowEls, height, true); // true = compensate for height-hogging rows
}
},
/* Hit Areas
------------------------------------------------------------------------------------------------------------------*/
// forward all hit-related method calls to dayGrid
prepareHits: function() {
this.dayGrid.prepareHits();
},
releaseHits: function() {
this.dayGrid.releaseHits();
},
queryHit: function(left, top) {
return this.dayGrid.queryHit(left, top);
},
getHitSpan: function(hit) {
return this.dayGrid.getHitSpan(hit);
},
getHitEl: function(hit) {
return this.dayGrid.getHitEl(hit);
},
/* Events
------------------------------------------------------------------------------------------------------------------*/
// Renders the given events onto the view and populates the segments array
renderEvents: function(events) {
this.dayGrid.renderEvents(events);
this.updateHeight(); // must compensate for events that overflow the row
},
// Retrieves all segment objects that are rendered in the view
getEventSegs: function() {
return this.dayGrid.getEventSegs();
},
// Unrenders all event elements and clears internal segment data
unrenderEvents: function() {
this.dayGrid.unrenderEvents();
// we DON'T need to call updateHeight() because:
// A) a renderEvents() call always happens after this, which will eventually call updateHeight()
// B) in IE8, this causes a flash whenever events are rerendered
},
/* Dragging (for both events and external elements)
------------------------------------------------------------------------------------------------------------------*/
// A returned value of `true` signals that a mock "helper" event has been rendered.
renderDrag: function(dropLocation, seg) {
return this.dayGrid.renderDrag(dropLocation, seg);
},
unrenderDrag: function() {
this.dayGrid.unrenderDrag();
},
/* Selection
------------------------------------------------------------------------------------------------------------------*/
// Renders a visual indication of a selection
renderSelection: function(span) {
this.dayGrid.renderSelection(span);
},
// Unrenders a visual indications of a selection
unrenderSelection: function() {
this.dayGrid.unrenderSelection();
}
});
// Methods that will customize the rendering behavior of the BasicView's dayGrid
var basicDayGridMethods = {
// Generates the HTML that will go before the day-of week header cells
renderHeadIntroHtml: function() {
var view = this.view;
if (view.weekNumbersVisible) {
return '' +
'
';
}
return '';
},
// Generates the HTML that will go before content-skeleton cells that display the day/week numbers
renderNumberIntroHtml: function(row) {
var view = this.view;
if (view.weekNumbersVisible) {
return '' +
'
';
}
return '';
},
// Generates the HTML that goes before the day bg cells for each day-row
renderBgIntroHtml: function() {
var view = this.view;
if (view.weekNumbersVisible) {
return '
';
}
return '';
},
// Generates the HTML that goes before every other type of row generated by DayGrid.
// Affects helper-skeleton and highlight-skeleton rows.
renderIntroHtml: function() {
var view = this.view;
if (view.weekNumbersVisible) {
return '
';
}
return '';
}
};
;;
/* A month view with day cells running in rows (one-per-week) and columns
----------------------------------------------------------------------------------------------------------------------*/
var MonthView = FC.MonthView = BasicView.extend({
// Produces information about what range to display
computeRange: function(date) {
var range = BasicView.prototype.computeRange.call(this, date); // get value from super-method
var rowCnt;
// ensure 6 weeks
if (this.isFixedWeeks()) {
rowCnt = Math.ceil(range.end.diff(range.start, 'weeks', true)); // could be partial weeks due to hiddenDays
range.end.add(6 - rowCnt, 'weeks');
}
return range;
},
// Overrides the default BasicView behavior to have special multi-week auto-height logic
setGridHeight: function(height, isAuto) {
isAuto = isAuto || this.opt('weekMode') === 'variable'; // LEGACY: weekMode is deprecated
// if auto, make the height of each row the height that it would be if there were 6 weeks
if (isAuto) {
height *= this.rowCnt / 6;
}
distributeHeight(this.dayGrid.rowEls, height, !isAuto); // if auto, don't compensate for height-hogging rows
},
isFixedWeeks: function() {
var weekMode = this.opt('weekMode'); // LEGACY: weekMode is deprecated
if (weekMode) {
return weekMode === 'fixed'; // if any other type of weekMode, assume NOT fixed
}
return this.opt('fixedWeekCount');
}
});
;;
fcViews.basic = {
'class': BasicView
};
fcViews.basicDay = {
type: 'basic',
duration: { days: 1 }
};
fcViews.basicWeek = {
type: 'basic',
duration: { weeks: 1 }
};
fcViews.month = {
'class': MonthView,
duration: { months: 1 }, // important for prev/next
defaults: {
fixedWeekCount: true
}
};
;;
/* An abstract class for all agenda-related views. Displays one more columns with time slots running vertically.
----------------------------------------------------------------------------------------------------------------------*/
// Is a manager for the TimeGrid subcomponent and possibly the DayGrid subcomponent (if allDaySlot is on).
// Responsible for managing width/height.
var AgendaView = FC.AgendaView = View.extend({
timeGridClass: TimeGrid, // class used to instantiate the timeGrid. subclasses can override
timeGrid: null, // the main time-grid subcomponent of this view
dayGridClass: DayGrid, // class used to instantiate the dayGrid. subclasses can override
dayGrid: null, // the "all-day" subcomponent. if all-day is turned off, this will be null
axisWidth: null, // the width of the time axis running down the side
headContainerEl: null, // div that hold's the timeGrid's rendered date header
noScrollRowEls: null, // set of fake row elements that must compensate when scrollerEl has scrollbars
// when the time-grid isn't tall enough to occupy the given height, we render an underneath
bottomRuleEl: null,
bottomRuleHeight: null,
initialize: function() {
this.timeGrid = this.instantiateTimeGrid();
if (this.opt('allDaySlot')) { // should we display the "all-day" area?
this.dayGrid = this.instantiateDayGrid(); // the all-day subcomponent of this view
}
},
// Instantiates the TimeGrid object this view needs. Draws from this.timeGridClass
instantiateTimeGrid: function() {
var subclass = this.timeGridClass.extend(agendaTimeGridMethods);
return new subclass(this);
},
// Instantiates the DayGrid object this view might need. Draws from this.dayGridClass
instantiateDayGrid: function() {
var subclass = this.dayGridClass.extend(agendaDayGridMethods);
return new subclass(this);
},
/* Rendering
------------------------------------------------------------------------------------------------------------------*/
// Sets the display range and computes all necessary dates
setRange: function(range) {
View.prototype.setRange.call(this, range); // call the super-method
this.timeGrid.setRange(range);
if (this.dayGrid) {
this.dayGrid.setRange(range);
}
},
// Renders the view into `this.el`, which has already been assigned
renderDates: function() {
this.el.addClass('fc-agenda-view').html(this.renderSkeletonHtml());
this.renderHead();
// the element that wraps the time-grid that will probably scroll
this.scrollerEl = this.el.find('.fc-time-grid-container');
this.timeGrid.setElement(this.el.find('.fc-time-grid'));
this.timeGrid.renderDates();
// the that sometimes displays under the time-grid
this.bottomRuleEl = $('')
.appendTo(this.timeGrid.el); // inject it into the time-grid
if (this.dayGrid) {
this.dayGrid.setElement(this.el.find('.fc-day-grid'));
this.dayGrid.renderDates();
// have the day-grid extend it's coordinate area over the dividing the two grids
this.dayGrid.bottomCoordPadding = this.dayGrid.el.next('hr').outerHeight();
}
this.noScrollRowEls = this.el.find('.fc-row:not(.fc-scroller *)'); // fake rows not within the scroller
},
// render the day-of-week headers
renderHead: function() {
this.headContainerEl =
this.el.find('.fc-head-container')
.html(this.timeGrid.renderHeadHtml());
},
// Unrenders the content of the view. Since we haven't separated skeleton rendering from date rendering,
// always completely kill each grid's rendering.
unrenderDates: function() {
this.timeGrid.unrenderDates();
this.timeGrid.removeElement();
if (this.dayGrid) {
this.dayGrid.unrenderDates();
this.dayGrid.removeElement();
}
},
renderBusinessHours: function() {
this.timeGrid.renderBusinessHours();
if (this.dayGrid) {
this.dayGrid.renderBusinessHours();
}
},
// Builds the HTML skeleton for the view.
// The day-grid and time-grid components will render inside containers defined by this HTML.
renderSkeletonHtml: function() {
return '' +
'
' +
'' +
'
' +
'
' +
'
' +
'' +
'' +
'
' +
'
' +
(this.dayGrid ?
'' +
'' :
''
) +
'
' +
'' +
'
' +
'
' +
'
' +
'' +
'
';
},
// Generates an HTML attribute string for setting the width of the axis, if it is known
axisStyleAttr: function() {
if (this.axisWidth !== null) {
return 'style="width:' + this.axisWidth + 'px"';
}
return '';
},
/* Dimensions
------------------------------------------------------------------------------------------------------------------*/
updateSize: function(isResize) {
this.timeGrid.updateSize(isResize);
View.prototype.updateSize.call(this, isResize); // call the super-method
},
// Refreshes the horizontal dimensions of the view
updateWidth: function() {
// make all axis cells line up, and record the width so newly created axis cells will have it
this.axisWidth = matchCellWidths(this.el.find('.fc-axis'));
},
// Adjusts the vertical dimensions of the view to the specified values
setHeight: function(totalHeight, isAuto) {
var eventLimit;
var scrollerHeight;
if (this.bottomRuleHeight === null) {
// calculate the height of the rule the very first time
this.bottomRuleHeight = this.bottomRuleEl.outerHeight();
}
this.bottomRuleEl.hide(); // .show() will be called later if this is necessary
// reset all dimensions back to the original state
this.scrollerEl.css('overflow', '');
unsetScroller(this.scrollerEl);
uncompensateScroll(this.noScrollRowEls);
// limit number of events in the all-day area
if (this.dayGrid) {
this.dayGrid.removeSegPopover(); // kill the "more" popover if displayed
eventLimit = this.opt('eventLimit');
if (eventLimit && typeof eventLimit !== 'number') {
eventLimit = AGENDA_ALL_DAY_EVENT_LIMIT; // make sure "auto" goes to a real number
}
if (eventLimit) {
this.dayGrid.limitRows(eventLimit);
}
}
if (!isAuto) { // should we force dimensions of the scroll container, or let the contents be natural height?
scrollerHeight = this.computeScrollerHeight(totalHeight);
if (setPotentialScroller(this.scrollerEl, scrollerHeight)) { // using scrollbars?
// make the all-day and header rows lines up
compensateScroll(this.noScrollRowEls, getScrollbarWidths(this.scrollerEl));
// the scrollbar compensation might have changed text flow, which might affect height, so recalculate
// and reapply the desired height to the scroller.
scrollerHeight = this.computeScrollerHeight(totalHeight);
this.scrollerEl.height(scrollerHeight);
}
else { // no scrollbars
// still, force a height and display the bottom rule (marks the end of day)
this.scrollerEl.height(scrollerHeight).css('overflow', 'hidden'); // in case goes outside
this.bottomRuleEl.show();
}
}
},
// Computes the initial pre-configured scroll state prior to allowing the user to change it
computeInitialScroll: function() {
var scrollTime = moment.duration(this.opt('scrollTime'));
var top = this.timeGrid.computeTimeTop(scrollTime);
// zoom can give weird floating-point values. rather scroll a little bit further
top = Math.ceil(top);
if (top) {
top++; // to overcome top border that slots beyond the first have. looks better
}
return top;
},
/* Hit Areas
------------------------------------------------------------------------------------------------------------------*/
// forward all hit-related method calls to the grids (dayGrid might not be defined)
prepareHits: function() {
this.timeGrid.prepareHits();
if (this.dayGrid) {
this.dayGrid.prepareHits();
}
},
releaseHits: function() {
this.timeGrid.releaseHits();
if (this.dayGrid) {
this.dayGrid.releaseHits();
}
},
queryHit: function(left, top) {
var hit = this.timeGrid.queryHit(left, top);
if (!hit && this.dayGrid) {
hit = this.dayGrid.queryHit(left, top);
}
return hit;
},
getHitSpan: function(hit) {
// TODO: hit.component is set as a hack to identify where the hit came from
return hit.component.getHitSpan(hit);
},
getHitEl: function(hit) {
// TODO: hit.component is set as a hack to identify where the hit came from
return hit.component.getHitEl(hit);
},
/* Events
------------------------------------------------------------------------------------------------------------------*/
// Renders events onto the view and populates the View's segment array
renderEvents: function(events) {
var dayEvents = [];
var timedEvents = [];
var daySegs = [];
var timedSegs;
var i;
// separate the events into all-day and timed
for (i = 0; i < events.length; i++) {
if (events[i].allDay) {
dayEvents.push(events[i]);
}
else {
timedEvents.push(events[i]);
}
}
// render the events in the subcomponents
timedSegs = this.timeGrid.renderEvents(timedEvents);
if (this.dayGrid) {
daySegs = this.dayGrid.renderEvents(dayEvents);
}
// the all-day area is flexible and might have a lot of events, so shift the height
this.updateHeight();
},
// Retrieves all segment objects that are rendered in the view
getEventSegs: function() {
return this.timeGrid.getEventSegs().concat(
this.dayGrid ? this.dayGrid.getEventSegs() : []
);
},
// Unrenders all event elements and clears internal segment data
unrenderEvents: function() {
// unrender the events in the subcomponents
this.timeGrid.unrenderEvents();
if (this.dayGrid) {
this.dayGrid.unrenderEvents();
}
// we DON'T need to call updateHeight() because:
// A) a renderEvents() call always happens after this, which will eventually call updateHeight()
// B) in IE8, this causes a flash whenever events are rerendered
},
/* Dragging (for events and external elements)
------------------------------------------------------------------------------------------------------------------*/
// A returned value of `true` signals that a mock "helper" event has been rendered.
renderDrag: function(dropLocation, seg) {
if (dropLocation.start.hasTime()) {
return this.timeGrid.renderDrag(dropLocation, seg);
}
else if (this.dayGrid) {
return this.dayGrid.renderDrag(dropLocation, seg);
}
},
unrenderDrag: function() {
this.timeGrid.unrenderDrag();
if (this.dayGrid) {
this.dayGrid.unrenderDrag();
}
},
/* Selection
------------------------------------------------------------------------------------------------------------------*/
// Renders a visual indication of a selection
renderSelection: function(span) {
if (span.start.hasTime() || span.end.hasTime()) {
this.timeGrid.renderSelection(span);
}
else if (this.dayGrid) {
this.dayGrid.renderSelection(span);
}
},
// Unrenders a visual indications of a selection
unrenderSelection: function() {
this.timeGrid.unrenderSelection();
if (this.dayGrid) {
this.dayGrid.unrenderSelection();
}
}
});
// Methods that will customize the rendering behavior of the AgendaView's timeGrid
var agendaTimeGridMethods = {
// Generates the HTML that will go before the day-of week header cells
renderHeadIntroHtml: function() {
var view = this.view;
var weekText;
if (view.opt('weekNumbers')) {
weekText = this.start.format(view.opt('smallWeekFormat'));
return '' +
'
';
}
},
// Generates the HTML that goes before the bg of the TimeGrid slot area. Long vertical column.
renderBgIntroHtml: function() {
var view = this.view;
return '
';
},
// Generates the HTML that goes before all other types of cells.
// Affects content-skeleton, helper-skeleton, highlight-skeleton for both the time-grid and day-grid.
renderIntroHtml: function() {
var view = this.view;
return '
';
}
};
// Methods that will customize the rendering behavior of the AgendaView's dayGrid
var agendaDayGridMethods = {
// Generates the HTML that goes before the all-day cells
renderBgIntroHtml: function() {
var view = this.view;
return '' +
'
';
},
// Generates the HTML that goes before all other types of cells.
// Affects content-skeleton, helper-skeleton, highlight-skeleton for both the time-grid and day-grid.
renderIntroHtml: function() {
var view = this.view;
return '
';
}
};
;;
var AGENDA_ALL_DAY_EVENT_LIMIT = 5;
// potential nice values for the slot-duration and interval-duration
// from largest to smallest
var AGENDA_STOCK_SUB_DURATIONS = [
{ hours: 1 },
{ minutes: 30 },
{ minutes: 15 },
{ seconds: 30 },
{ seconds: 15 }
];
fcViews.agenda = {
'class': AgendaView,
defaults: {
allDaySlot: true,
allDayText: 'all-day',
slotDuration: '00:30:00',
minTime: '00:00:00',
maxTime: '24:00:00',
slotEventOverlap: true // a bad name. confused with overlap/constraint system
}
};
fcViews.agendaDay = {
type: 'agenda',
duration: { days: 1 }
};
fcViews.agendaWeek = {
type: 'agenda',
duration: { weeks: 1 }
};
;;
return FC; // export for Node/CommonJS
});