Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance. Project price only 1 $
You can buy this project and download/modify it how often you want.
PrimeFaces is one of the most popular UI libraries in Java EE Ecosystem and widely used by software companies, world renowned brands, banks, financial institutions, insurance companies, universities and more.
/*!
* FullCalendar v2.9.1
* Docs & License: http://fullcalendar.io/
* (c) 2016 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: "<%= meta.version %>",
internalApiVersion: 5
};
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('> span').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;
}
// Given one element that resides inside another,
// Subtracts the height of the inner element from the outer element.
function subtractInnerElHeight(outerEl, innerEl) {
var both = outerEl.add(innerEl);
var diff;
// effin' 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
});
diff = outerEl.outerHeight() - innerEl.outerHeight(); // grab the dimensions
both.css({ position: '', left: '' }); // undo hack
return diff;
}
/* Element Geom 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).
// Origin is optional.
function getOuterRect(el, origin) {
var offset = el.offset();
var left = offset.left - (origin ? origin.left : 0);
var top = offset.top - (origin ? origin.top : 0);
return {
left: left,
right: left + el.outerWidth(),
top: top,
bottom: 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).
// Origin is optional.
// NOTE: should use clientLeft/clientTop, but very unreliable cross-browser.
function getClientRect(el, origin) {
var offset = el.offset();
var scrollbarWidths = getScrollbarWidths(el);
var left = offset.left + getCssFloat(el, 'border-left-width') + scrollbarWidths.left - (origin ? origin.left : 0);
var top = offset.top + getCssFloat(el, 'border-top-width') + scrollbarWidths.top - (origin ? origin.top : 0);
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).
// Origin is optional.
function getContentRect(el, origin) {
var offset = el.offset(); // just outside of border, margin not included
var left = offset.left + getCssFloat(el, 'border-left-width') + getCssFloat(el, 'padding-left') -
(origin ? origin.left : 0);
var top = offset.top + getCssFloat(el, 'border-top-width') + getCssFloat(el, 'padding-top') -
(origin ? origin.top : 0);
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, otherAttrs) {
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() {
},
// TODO: a generic method for dealing with
, RTL, intro
// when increment internalApiVersion
// wrapTr (scheduler)
/* 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 segs = this.buildBusinessHourSegs(true); // wholeDay=true
this.renderFill('businessHours', segs, 'bgevent');
},
unrenderBusinessHours: function() {
this.unrenderFill('businessHours');
},
// 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) {
if (this.colCoordCache.isLeftInBounds(leftOffset) && this.rowCoordCache.isTopInBounds(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.component !== this) {
return this.renderEventLocationHelper(eventLocation, seg); // returns mock event elements
}
},
// 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));
return this.renderEventLocationHelper(eventLocation, seg); // returns mock event elements
},
// 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]);
});
return ( // must return the elements rendered
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.getSegSkinCss(seg));
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();
// the popover doesn't live within the grid's container element, and thus won't get the event
// delegated-handlers for free. attach event-related handlers to the popover.
this.bindSegHandlersToEl(this.segPopover.el);
},
// 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
slatContainerEl: null, // div that wraps all the slat rows
slatEls: null, // elements running horizontally across all columns
nowIndicatorEls: null,
colCoordCache: null,
slatCoordCache: 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.slatContainerEl = this.el.find('.fc-slats');
this.slatEls = this.slatContainerEl.find('tr');
this.colCoordCache = new CoordCache({
els: this.colEls,
isHorizontal: true
});
this.slatCoordCache = new CoordCache({
els: this.slatEls,
isVertical: true
});
this.renderContentSkeleton();
},
// 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;
if (colCoordCache.isLeftInBounds(leftOffset) && slatCoordCache.isTopInBounds(topOffset)) {
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(
[].concat(this.fgSegs || [], this.bgSegs || [], this.businessSegs || [])
);
}
},
getTotalSlatHeight: function() {
return this.slatContainerEl.outerHeight();
},
// 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
// returns mock event elements
// signal that a helper has been rendered
return this.renderEventLocationHelper(eventLocation, seg);
}
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) {
return this.renderEventLocationHelper(eventLocation, seg); // returns mock event elements
},
// 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) {
return this.renderHelperSegs(this.eventToSegs(event), sourceSeg); // returns mock event elements
},
// Unrenders any mock helper event
unrenderHelper: function() {
this.unrenderHelperSegs();
},
/* Business Hours
------------------------------------------------------------------------------------------------------------------*/
renderBusinessHours: function() {
this.renderBusinessSegs(
this.buildBusinessHourSegs()
);
},
unrenderBusinessHours: function() {
this.unrenderBusinessSegs();
},
/* Now Indicator
------------------------------------------------------------------------------------------------------------------*/
getNowIndicatorUnit: function() {
return 'minute'; // will refresh on the minute
},
renderNowIndicator: function(date) {
// seg system might be overkill, but it handles scenario where line needs to be rendered
// more than once because of columns with the same date (resources columns for example)
var segs = this.spanToSegs({ start: date, end: date });
var top = this.computeDateTop(date, date);
var nodes = [];
var i;
// render lines within the columns
for (i = 0; i < segs.length; i++) {
nodes.push($('')
.css('top', top)
.appendTo(this.colContainerEls.eq(segs[i].col))[0]);
}
// render an arrow over the axis
if (segs.length > 0) { // is the current time in view?
nodes.push($('')
.css('top', top)
.appendTo(this.el.find('.fc-content-skeleton'))[0]);
}
this.nowIndicatorEls = $(nodes);
},
unrenderNowIndicator: function() {
if (this.nowIndicatorEls) {
this.nowIndicatorEls.remove();
this.nowIndicatorEls = 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();
},
/* Highlight
------------------------------------------------------------------------------------------------------------------*/
renderHighlight: function(span) {
this.renderHighlightSegs(this.spanToSegs(span));
},
unrenderHighlight: function() {
this.unrenderHighlightSegs();
}
});
;;
/* Methods for rendering SEGMENTS, pieces of content that live on the view
( this file is no longer just for events )
----------------------------------------------------------------------------------------------------------------------*/
TimeGrid.mixin({
colContainerEls: null, // containers for each column
// inner-containers for each column where different types of segs live
fgContainerEls: null,
bgContainerEls: null,
helperContainerEls: null,
highlightContainerEls: null,
businessContainerEls: null,
// arrays of different types of displayed segments
fgSegs: null,
bgSegs: null,
helperSegs: null,
highlightSegs: null,
businessSegs: null,
// Renders the DOM that the view's content will live in
renderContentSkeleton: function() {
var cellHtml = '';
var i;
var skeletonEl;
for (i = 0; i < this.colCnt; i++) {
cellHtml +=
'
' +
'
' +
'' +
'' +
'' +
'' +
'' +
'
' +
'
';
}
skeletonEl = $(
'
' +
'
' +
'
' + cellHtml + '
' +
'
' +
'
'
);
this.colContainerEls = skeletonEl.find('.fc-content-col');
this.helperContainerEls = skeletonEl.find('.fc-helper-container');
this.fgContainerEls = skeletonEl.find('.fc-event-container:not(.fc-helper-container)');
this.bgContainerEls = skeletonEl.find('.fc-bgevent-container');
this.highlightContainerEls = skeletonEl.find('.fc-highlight-container');
this.businessContainerEls = skeletonEl.find('.fc-business-container');
this.bookendCells(skeletonEl.find('tr')); // TODO: do this on string level
this.el.append(skeletonEl);
},
/* Foreground Events
------------------------------------------------------------------------------------------------------------------*/
renderFgSegs: function(segs) {
segs = this.renderFgSegsIntoContainers(segs, this.fgContainerEls);
this.fgSegs = segs;
return segs; // needed for Grid::renderEvents
},
unrenderFgSegs: function() {
this.unrenderNamedSegs('fgSegs');
},
/* Foreground Helper Events
------------------------------------------------------------------------------------------------------------------*/
renderHelperSegs: function(segs, sourceSeg) {
var helperEls = [];
var i, seg;
var sourceEl;
segs = this.renderFgSegsIntoContainers(segs, this.helperContainerEls);
// 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')
});
}
helperEls.push(seg.el[0]);
}
this.helperSegs = segs;
return $(helperEls); // must return rendered helpers
},
unrenderHelperSegs: function() {
this.unrenderNamedSegs('helperSegs');
},
/* Background Events
------------------------------------------------------------------------------------------------------------------*/
renderBgSegs: function(segs) {
segs = this.renderFillSegEls('bgEvent', segs); // TODO: old fill system
this.updateSegVerticals(segs);
this.attachSegsByCol(this.groupSegsByCol(segs), this.bgContainerEls);
this.bgSegs = segs;
return segs; // needed for Grid::renderEvents
},
unrenderBgSegs: function() {
this.unrenderNamedSegs('bgSegs');
},
/* Highlight
------------------------------------------------------------------------------------------------------------------*/
renderHighlightSegs: function(segs) {
segs = this.renderFillSegEls('highlight', segs); // TODO: old fill system
this.updateSegVerticals(segs);
this.attachSegsByCol(this.groupSegsByCol(segs), this.highlightContainerEls);
this.highlightSegs = segs;
},
unrenderHighlightSegs: function() {
this.unrenderNamedSegs('highlightSegs');
},
/* Business Hours
------------------------------------------------------------------------------------------------------------------*/
renderBusinessSegs: function(segs) {
segs = this.renderFillSegEls('businessHours', segs); // TODO: old fill system
this.updateSegVerticals(segs);
this.attachSegsByCol(this.groupSegsByCol(segs), this.businessContainerEls);
this.businessSegs = segs;
},
unrenderBusinessSegs: function() {
this.unrenderNamedSegs('businessSegs');
},
/* Seg Rendering Utils
------------------------------------------------------------------------------------------------------------------*/
// Given a flat array of segments, return an array of sub-arrays, grouped by each segment's col
groupSegsByCol: function(segs) {
var segsByCol = [];
var i;
for (i = 0; i < this.colCnt; i++) {
segsByCol.push([]);
}
for (i = 0; i < segs.length; i++) {
segsByCol[segs[i].col].push(segs[i]);
}
return segsByCol;
},
// Given segments grouped by column, insert the segments' elements into a parallel array of container
// elements, each living within a column.
attachSegsByCol: function(segsByCol, containerEls) {
var col;
var segs;
var i;
for (col = 0; col < this.colCnt; col++) { // iterate each column grouping
segs = segsByCol[col];
for (i = 0; i < segs.length; i++) {
containerEls.eq(col).append(segs[i].el);
}
}
},
// Given the name of a property of `this` object, assumed to be an array of segments,
// loops through each segment and removes from DOM. Will null-out the property afterwards.
unrenderNamedSegs: function(propName) {
var segs = this[propName];
var i;
if (segs) {
for (i = 0; i < segs.length; i++) {
segs[i].el.remove();
}
this[propName] = null;
}
},
/* Foreground Event Rendering Utils
------------------------------------------------------------------------------------------------------------------*/
// Given an array of foreground segments, render a DOM element for each, computes position,
// and attaches to the column inner-container elements.
renderFgSegsIntoContainers: function(segs, containerEls) {
var segsByCol;
var col;
segs = this.renderFgSegEls(segs); // will call fgSegHtml
segsByCol = this.groupSegsByCol(segs);
for (col = 0; col < this.colCnt; col++) {
this.updateFgSegCoords(segsByCol[col]);
}
this.attachSegsByCol(segsByCol, containerEls);
return segs;
},
// Renders the HTML for a single event segment's default rendering
fgSegHtml: function(seg, disableResizing) {
var view = this.view;
var event = seg.event;
var isDraggable = view.isEventDraggable(event);
var isResizableFromStart = !disableResizing && seg.isStart && view.isEventResizableFromStart(event);
var isResizableFromEnd = !disableResizing && seg.isEnd && view.isEventResizableFromEnd(event);
var classes = this.getSegClasses(seg, isDraggable, isResizableFromStart || isResizableFromEnd);
var skinCss = cssToStr(this.getSegSkinCss(seg));
var timeText;
var fullTimeText; // more verbose time text. for the print stylesheet
var startTimeText; // just the start time text
classes.unshift('fc-time-grid-event', 'fc-v-event');
if (view.isMultiDayEvent(event)) { // if the event appears to span more than one day...
// Don't display time text on segments that run entirely through a day.
// That would appear as midnight-midnight and would look dumb.
// Otherwise, display the time text for the *segment's* times (like 6pm-midnight or midnight-10am)
if (seg.isStart || seg.isEnd) {
timeText = this.getEventTimeText(seg);
fullTimeText = this.getEventTimeText(seg, 'LT');
startTimeText = this.getEventTimeText(seg, null, false); // displayEnd=false
}
} else {
// Display the normal time text for the *event's* times
timeText = this.getEventTimeText(event);
fullTimeText = this.getEventTimeText(event, 'LT');
startTimeText = this.getEventTimeText(event, null, false); // displayEnd=false
}
return '' +
'
' +
'' +
/* TODO: write CSS for this
(isResizableFromStart ?
'' :
''
) +
*/
(isResizableFromEnd ?
'' :
''
) +
'';
},
/* Seg Position Utils
------------------------------------------------------------------------------------------------------------------*/
// Refreshes the CSS top/bottom coordinates for each segment element.
// Works when called after initial render, after a window resize/zoom for example.
updateSegVerticals: function(segs) {
this.computeSegVerticals(segs);
this.assignSegVerticals(segs);
},
// For each segment in an array, computes and assigns its top and bottom properties
computeSegVerticals: function(segs) {
var i, seg;
for (i = 0; i < segs.length; i++) {
seg = segs[i];
seg.top = this.computeDateTop(seg.start, seg.start);
seg.bottom = this.computeDateTop(seg.end, seg.start);
}
},
// Given segments that already have their top/bottom properties computed, applies those values to
// the segments' elements.
assignSegVerticals: function(segs) {
var i, seg;
for (i = 0; i < segs.length; i++) {
seg = segs[i];
seg.el.css(this.generateSegVerticalCss(seg));
}
},
// 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
};
},
/* Foreground Event Positioning Utils
------------------------------------------------------------------------------------------------------------------*/
// Given segments that are assumed to all live in the *same column*,
// compute their verical/horizontal coordinates and assign to their elements.
updateFgSegCoords: function(segs) {
this.computeSegVerticals(segs); // horizontals relies on this
this.computeFgSegHorizontals(segs); // compute horizontal coordinates, z-index's, and reorder the array
this.assignSegVerticals(segs);
this.assignFgSegHorizontals(segs);
},
// 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!
computeFgSegHorizontals: 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.computeFgSegForwardBack(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.
computeFgSegForwardBack: 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.sortForwardSegs(forwardSegs);
// this segment's forwardCoord will be calculated from the backwardCoord of the
// highest-pressure forward segment.
this.computeFgSegForwardBack(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 seg2.top && seg1.top < seg2.bottom;
}
;;
/* An abstract class from which other views inherit from
----------------------------------------------------------------------------------------------------------------------*/
var View = FC.View = Class.extend(EmitterMixin, ListenerMixin, {
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
selectedEvent: null,
eventOrderSpecs: null, // criteria for ordering events when they have same date/time
// classNames styled by jqui themes
widgetHeaderClass: null,
widgetContentClass: null,
highlightStateClass: null,
// for date utils, computed from options
nextDayThreshold: null,
isHiddenDayHash: null,
// now indicator
isNowIndicatorRendered: null,
initialNowDate: null, // result first getNow call
initialNowQueriedMs: null, // ms time the getNow was called
nowIndicatorTimeoutID: null, // for refresh timing of now indicator
nowIndicatorIntervalID: null, // "
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.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, explicitScrollState) {
var _this = this;
var prevScrollState = null;
if (explicitScrollState != null && this.displaying) { // don't need prevScrollState if explicitScrollState
prevScrollState = this.queryScroll();
}
this.calendar.freezeContentHeight();
return syncThen(this.clear(), function() { // clear the content first
return (
_this.displaying =
syncThen(_this.displayView(date), function() { // displayView might return a promise
// caller of display() wants a specific scroll state?
if (explicitScrollState != null) {
// we make an assumption that this is NOT the initial render,
// and thus don't need forceScroll (is inconveniently asynchronous)
_this.setScroll(explicitScrollState);
}
else {
_this.forceScroll(_this.computeInitialScroll(prevScrollState));
}
_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 syncThen(displaying, 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
}
},
// 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()
this.startNowIndicator();
},
// Unrenders the view content that was rendered in displayView.
// Can be asynchronous and return a promise.
clearView: function() {
this.unselect();
this.stopNowIndicator();
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
},
// 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() {
this.listenTo($(document), 'mousedown', this.handleDocumentMousedown);
this.listenTo($(document), 'touchstart', this.processUnselect);
},
// Unbinds DOM handlers from elements that reside outside the view container
unbindGlobalHandlers: function() {
this.stopListeningTo($(document));
},
// 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';
},
/* Business Hours
------------------------------------------------------------------------------------------------------------------*/
// 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
},
/* Now Indicator
------------------------------------------------------------------------------------------------------------------*/
// Immediately render the current time indicator and begins re-rendering it at an interval,
// which is defined by this.getNowIndicatorUnit().
// TODO: somehow do this for the current whole day's background too
startNowIndicator: function() {
var _this = this;
var unit;
var update;
var delay; // ms wait value
if (this.opt('nowIndicator')) {
unit = this.getNowIndicatorUnit();
if (unit) {
update = proxy(this, 'updateNowIndicator'); // bind to `this`
this.initialNowDate = this.calendar.getNow();
this.initialNowQueriedMs = +new Date();
this.renderNowIndicator(this.initialNowDate);
this.isNowIndicatorRendered = true;
// wait until the beginning of the next interval
delay = this.initialNowDate.clone().startOf(unit).add(1, unit) - this.initialNowDate;
this.nowIndicatorTimeoutID = setTimeout(function() {
_this.nowIndicatorTimeoutID = null;
update();
delay = +moment.duration(1, unit);
delay = Math.max(100, delay); // prevent too frequent
_this.nowIndicatorIntervalID = setInterval(update, delay); // update every interval
}, delay);
}
}
},
// rerenders the now indicator, computing the new current time from the amount of time that has passed
// since the initial getNow call.
updateNowIndicator: function() {
if (this.isNowIndicatorRendered) {
this.unrenderNowIndicator();
this.renderNowIndicator(
this.initialNowDate.clone().add(new Date() - this.initialNowQueriedMs) // add ms
);
}
},
// Immediately unrenders the view's current time indicator and stops any re-rendering timers.
// Won't cause side effects if indicator isn't rendered.
stopNowIndicator: function() {
if (this.isNowIndicatorRendered) {
if (this.nowIndicatorTimeoutID) {
clearTimeout(this.nowIndicatorTimeoutID);
this.nowIndicatorTimeoutID = null;
}
if (this.nowIndicatorIntervalID) {
clearTimeout(this.nowIndicatorIntervalID);
this.nowIndicatorIntervalID = null;
}
this.unrenderNowIndicator();
this.isNowIndicatorRendered = false;
}
},
// Returns a string unit, like 'second' or 'minute' that defined how often the current time indicator
// should be refreshed. If something falsy is returned, no time indicator is rendered at all.
getNowIndicatorUnit: function() {
// subclasses should implement
},
// Renders a current time indicator at the given datetime
renderNowIndicator: function(date) {
// subclasses should implement
},
// Undoes the rendering actions from renderNowIndicator
unrenderNowIndicator: function() {
// subclasses should implement
},
/* 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);
this.updateNowIndicator();
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
------------------------------------------------------------------------------------------------------------------*/
// 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() {
// subclasses must implement
},
// Sets the view's scroll state. Will accept the same format computeInitialScroll and queryScroll produce.
setScroll: function(scrollState) {
// subclasses must implement
},
// 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() {
var scrollState;
if (this.isEventsRendered) {
// TODO: optimize: if we know this is part of a displayEvents call, don't queryScroll/setScroll
scrollState = this.queryScroll();
this.triggerEventUnrender();
if (this.destroyEvents) {
this.destroyEvents(); // TODO: deprecate
}
this.unrenderEvents();
this.setScroll(scrollState);
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`.
// Must return elements used for any mock events.
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 (time range)
------------------------------------------------------------------------------------------------------------------*/
// 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
},
/* Event Selection
------------------------------------------------------------------------------------------------------------------*/
selectEvent: function(event) {
if (!this.selectedEvent || this.selectedEvent !== event) {
this.unselectEvent();
this.renderedEventSegEach(function(seg) {
seg.el.addClass('fc-selected');
}, event);
this.selectedEvent = event;
}
},
unselectEvent: function() {
if (this.selectedEvent) {
this.renderedEventSegEach(function(seg) {
seg.el.removeClass('fc-selected');
}, this.selectedEvent);
this.selectedEvent = null;
}
},
isEventSelected: function(event) {
// event references might change on refetchEvents(), while selectedEvent doesn't,
// so compare IDs
return this.selectedEvent && this.selectedEvent._id === event._id;
},
/* Mouse / Touch Unselecting (time range & event unselection)
------------------------------------------------------------------------------------------------------------------*/
// TODO: move consistently to down/start or up/end?
// TODO: don't kill previous selection if touch scrolling
handleDocumentMousedown: function(ev) {
if (isPrimaryMouseButton(ev)) {
this.processUnselect(ev);
}
},
processUnselect: function(ev) {
this.processRangeUnselect(ev);
this.processEventUnselect(ev);
},
processRangeUnselect: function(ev) {
var ignore;
// is there a time-range selection?
if (this.isSelected && this.opt('unselectAuto')) {
// 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);
}
}
},
processEventUnselect: function(ev) {
if (this.selectedEvent) {
if (!$(ev.target).closest('.fc-selected').length) {
this.unselectEvent();
}
}
},
/* 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;
}
});
;;
/*
Embodies a div that has potential scrollbars
*/
var Scroller = FC.Scroller = Class.extend({
el: null, // the guaranteed outer element
scrollEl: null, // the element with the scrollbars
overflowX: null,
overflowY: null,
constructor: function(options) {
options = options || {};
this.overflowX = options.overflowX || options.overflow || 'auto';
this.overflowY = options.overflowY || options.overflow || 'auto';
},
render: function() {
this.el = this.renderEl();
this.applyOverflow();
},
renderEl: function() {
return (this.scrollEl = $(''));
},
// sets to natural height, unlocks overflow
clear: function() {
this.setHeight('auto');
this.applyOverflow();
},
destroy: function() {
this.el.remove();
},
// Overflow
// -----------------------------------------------------------------------------------------------------------------
applyOverflow: function() {
this.scrollEl.css({
'overflow-x': this.overflowX,
'overflow-y': this.overflowY
});
},
// Causes any 'auto' overflow values to resolves to 'scroll' or 'hidden'.
// Useful for preserving scrollbar widths regardless of future resizes.
// Can pass in scrollbarWidths for optimization.
lockOverflow: function(scrollbarWidths) {
var overflowX = this.overflowX;
var overflowY = this.overflowY;
scrollbarWidths = scrollbarWidths || this.getScrollbarWidths();
if (overflowX === 'auto') {
overflowX = (
scrollbarWidths.top || scrollbarWidths.bottom || // horizontal scrollbars?
// OR scrolling pane with massless scrollbars?
this.scrollEl[0].scrollWidth - 1 > this.scrollEl[0].clientWidth
// subtract 1 because of IE off-by-one issue
) ? 'scroll' : 'hidden';
}
if (overflowY === 'auto') {
overflowY = (
scrollbarWidths.left || scrollbarWidths.right || // vertical scrollbars?
// OR scrolling pane with massless scrollbars?
this.scrollEl[0].scrollHeight - 1 > this.scrollEl[0].clientHeight
// subtract 1 because of IE off-by-one issue
) ? 'scroll' : 'hidden';
}
this.scrollEl.css({ 'overflow-x': overflowX, 'overflow-y': overflowY });
},
// Getters / Setters
// -----------------------------------------------------------------------------------------------------------------
setHeight: function(height) {
this.scrollEl.height(height);
},
getScrollTop: function() {
return this.scrollEl.scrollTop();
},
setScrollTop: function(top) {
this.scrollEl.scrollTop(top);
},
getClientWidth: function() {
return this.scrollEl[0].clientWidth;
},
getClientHeight: function() {
return this.scrollEl[0].clientHeight;
},
getScrollbarWidths: function() {
return getScrollbarWidths(this.scrollEl);
}
});
;;
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
dynamicOverrides: null, // options set with dynamic setter method. higher precedence than view overrides.
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() {
},
// Computes the flattened options hash for the calendar and assigns to `this.options`.
// Assumes this.overrides and this.dynamicOverrides have already been initialized.
populateOptionsHash: function() {
var lang, langDefaults;
var isRTL, dirDefaults;
lang = firstDefined( // explicit lang option given?
this.dynamicOverrides.lang,
this.overrides.lang
);
langDefaults = langOptionHash[lang];
if (!langDefaults) { // explicit lang option not given or invalid?
lang = Calendar.defaults.lang;
langDefaults = langOptionHash[lang] || {};
}
isRTL = firstDefined( // based on options computed so far, is direction RTL?
this.dynamicOverrides.isRTL,
this.overrides.isRTL,
langDefaults.isRTL,
Calendar.defaults.isRTL
);
dirDefaults = isRTL ? Calendar.rtlDefaults : {};
this.dirDefaults = dirDefaults;
this.langDefaults = langDefaults;
this.options = mergeOptions([ // merge defaults and overrides. lowest to highest precedence
Calendar.defaults, // global defaults
dirDefaults,
langDefaults,
this.overrides,
this.dynamicOverrides
]);
populateInstanceComputableOptions(this.options); // fill in gaps with computed options
},
// 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)
this.dynamicOverrides // dynamically set via setter. highest precedence
]);
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.dynamicOverrides) ||
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(EmitterMixin);
function Calendar_constructor(element, overrides) {
var t = this;
// Exports
// -----------------------------------------------------------------------------------
t.render = render;
t.destroy = destroy;
t.refetchEvents = refetchEvents;
t.refetchEventSources = refetchEventSources;
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; // getter/setter method
t.trigger = trigger;
// Options
// -----------------------------------------------------------------------------------
t.dynamicOverrides = {};
t.viewSpecCache = {};
t.optionHandlers = {}; // for Calendar.options.js
// convert legacy options into non-legacy ones.
// in the future, when this is removed, don't use `overrides` reference. make a copy.
t.overrides = massageOverrides(overrides || {});
t.populateOptionsHash(); // sets this.options
// Language-data Internals
// -----------------------------------------------------------------------------------
// Apply overrides to the current language's data
var localeData;
// Called immediately, and when any of the options change.
// Happens before any internal objects rebuild or rerender, because this is very core.
t.bindOptions([
'lang', 'monthNames', 'monthNamesShort', 'dayNames', 'dayNamesShort', 'firstDay', 'weekNumberCalculation'
], function(lang, monthNames, monthNamesShort, dayNames, dayNamesShort, firstDay, weekNumberCalculation) {
localeData = createObject( // make a cheap copy
getMomentLocaleData(lang) // will fall back to en
);
if (monthNames) {
localeData._months = monthNames;
}
if (monthNamesShort) {
localeData._monthsShort = monthNamesShort;
}
if (dayNames) {
localeData._weekdays = dayNames;
}
if (dayNamesShort) {
localeData._weekdaysShort = dayNamesShort;
}
if (firstDay != null) {
var _week = createObject(localeData._week); // _week: { dow: # }
_week.dow = firstDay;
localeData._week = _week;
}
if (weekNumberCalculation === 'iso') {
weekNumberCalculation = 'ISO'; // normalize
}
if ( // whitelist certain kinds of input
weekNumberCalculation === 'ISO' ||
weekNumberCalculation === 'local' ||
typeof weekNumberCalculation === 'function'
) {
localeData._fullCalendar_weekCalc = weekNumberCalculation; // moment-ext will know what to do with it
}
// If the internal current date object already exists, move to new locale.
// We do NOT need to do this technique for event dates, because this happens when converting to "segments".
if (date) {
localizeMoment(date); // sets to localeData
}
});
// Calendar-specific Date Utilities
// -----------------------------------------------------------------------------------
t.defaultAllDayEventDuration = moment.duration(t.options.defaultAllDayEventDuration);
t.defaultTimedEventDuration = moment.duration(t.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 (t.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 (t.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
}
localizeMoment(mom);
return mom;
};
// Updates the given moment's locale settings to the current calendar locale settings.
function localizeMoment(mom) {
if ('_locale' in mom) { // moment 2.8 and above
mom._locale = localeData;
}
else { // pre-moment-2.8
mom._lang = localeData;
}
}
// 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 t.options.timezone !== 'local' && t.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 = t.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, t.options.lang) // works moment-pre-2.8
.humanize();
};
// Imports
// -----------------------------------------------------------------------------------
EventManager.call(t);
var isFetchNeeded = t.isFetchNeeded;
var fetchEvents = t.fetchEvents;
var fetchEventSources = t.fetchEventSources;
// Locals
// -----------------------------------------------------------------------------------
var _element = element[0];
var header;
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 (t.options.defaultDate != null) {
date = t.moment(t.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() {
element.addClass('fc');
// called immediately, and upon option change
t.bindOption('theme', function(theme) {
tm = theme ? 'ui' : 'fc'; // affects a larger scope
element.toggleClass('ui-widget', theme);
element.toggleClass('fc-unthemed', !theme);
});
// called immediately, and upon option change.
// HACK: lang often affects isRTL, so we explicitly listen to that too.
t.bindOptions([ 'isRTL', 'lang' ], function(isRTL) {
element.toggleClass('fc-ltr', !isRTL);
element.toggleClass('fc-rtl', isRTL);
});
content = $("").prependTo(element);
header = t.header = new Header(t);
renderHeader();
renderView(t.options.defaultView);
if (t.options.handleWindowResize) {
windowResizeProxy = debounce(windowResize, t.options.windowResizeDelay); // prevents rapid calls
$(window).resize(windowResizeProxy);
}
}
// can be called repeatedly and Header will rerender
function renderHeader() {
header.render();
if (header.el) {
element.prepend(header.el);
}
}
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.
// Accepts an optional scroll state to restore to.
function renderView(viewType, explicitScrollState) {
ignoreWindowResize++;
// if viewType is changing, remove the old view's rendering
if (currentView && viewType && currentView.type !== viewType) {
freezeContentHeight(); // prevent a scroll jump when view element is removed
clearView();
}
// 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, explicitScrollState); // 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--;
}
// Unrenders the current view and reflects this change in the Header.
// Unregsiters the `currentView`, but does not remove from viewByType hash.
function clearView() {
header.deactivateButton(currentView.type);
currentView.removeElement();
currentView = t.view = null;
}
// Destroys the view, including the view object. Then, re-instantiates it and renders it.
// Maintains the same scroll state.
// TODO: maintain any other user-manipulated state.
function reinitView() {
ignoreWindowResize++;
freezeContentHeight();
var viewType = currentView.type;
var scrollState = currentView.queryScroll();
clearView();
renderView(viewType, scrollState);
unfreezeContentHeight();
ignoreWindowResize--;
}
// Resizing
// -----------------------------------------------------------------------------------
t.getSuggestedViewHeight = function() {
if (suggestedViewHeight === undefined) {
calcSize();
}
return suggestedViewHeight;
};
t.isHeightAuto = function() {
return t.options.contentHeight === 'auto' || t.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
var contentHeightInput = t.options.contentHeight;
var heightInput = t.options.height;
if (typeof contentHeightInput === 'number') { // exists and not 'auto'
suggestedViewHeight = contentHeightInput;
}
else if (typeof contentHeightInput === 'function') { // exists and is a function
suggestedViewHeight = contentHeightInput();
}
else if (typeof heightInput === 'number') { // exists and not 'auto'
suggestedViewHeight = heightInput - queryHeaderHeight();
}
else if (typeof heightInput === 'function') { // exists and is a function
suggestedViewHeight = heightInput() - queryHeaderHeight();
}
else if (heightInput === 'parent') { // set to height of parent element
suggestedViewHeight = element.parent().height() - queryHeaderHeight();
}
else {
suggestedViewHeight = Math.round(content.width() / Math.max(t.options.aspectRatio, .5));
}
}
function queryHeaderHeight() {
return header.el ? header.el.outerHeight(true) : 0; // includes margin
}
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
fetchAndRenderEvents();
}
// TODO: move this into EventManager?
function refetchEventSources(matchInputs) {
fetchEventSources(t.getEventSourcesByMatchArray(matchInputs));
}
function renderEvents() { // destroys old events if previously rendered
if (elementVisible()) {
freezeContentHeight();
currentView.displayEvents(events);
unfreezeContentHeight();
}
}
function getAndRenderEvents() {
if (!t.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) {
var newOptionHash;
if (typeof name === 'string') {
if (value === undefined) { // getter
return t.options[name];
}
else { // setter for individual option
newOptionHash = {};
newOptionHash[name] = value;
setOptions(newOptionHash);
}
}
else if (typeof name === 'object') { // compound setter with object input
setOptions(name);
}
}
function setOptions(newOptionHash) {
var optionCnt = 0;
var optionName;
for (optionName in newOptionHash) {
t.dynamicOverrides[optionName] = newOptionHash[optionName];
}
t.viewSpecCache = {}; // the dynamic override invalidates the options in this cache, so just clear it
t.populateOptionsHash(); // this.options needs to be recomputed after the dynamic override
// trigger handlers after this.options has been updated
for (optionName in newOptionHash) {
t.triggerOptionHandlers(optionName); // recall bindOption/bindOptions
optionCnt++;
}
// special-case handling of single option change.
// if only one option change, `optionName` will be its name.
if (optionCnt === 1) {
if (optionName === 'height' || optionName === 'contentHeight' || optionName === 'aspectRatio') {
updateSize(true); // true = allow recalculation of height
return;
}
else if (optionName === 'defaultDate') {
return; // can't change date this way. use gotoDate instead
}
else if (optionName === 'businessHours') {
if (currentView) {
currentView.unrenderBusinessHours();
currentView.renderBusinessHours();
}
return;
}
else if (optionName === 'timezone') {
t.rezoneArrayEventSources();
refetchEvents();
return;
}
}
// catch-all. rerender the header and rebuild/rerender the current view
renderHeader();
viewsByType = {}; // even non-current views will be affected by this option change. do before rerender
reinitView();
}
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 (t.options[name]) {
return t.options[name].apply(thisObj, args);
}
}
t.initialize();
}
;;
/*
Options binding/triggering system.
*/
Calendar.mixin({
// A map of option names to arrays of handler objects. Initialized to {} in Calendar.
// Format for a handler object:
// {
// func // callback function to be called upon change
// names // option names whose values should be given to func
// }
optionHandlers: null,
// Calls handlerFunc immediately, and when the given option has changed.
// handlerFunc will be given the option value.
bindOption: function(optionName, handlerFunc) {
this.bindOptions([ optionName ], handlerFunc);
},
// Calls handlerFunc immediately, and when any of the given options change.
// handlerFunc will be given each option value as ordered function arguments.
bindOptions: function(optionNames, handlerFunc) {
var handlerObj = { func: handlerFunc, names: optionNames };
var i;
for (i = 0; i < optionNames.length; i++) {
this.registerOptionHandlerObj(optionNames[i], handlerObj);
}
this.triggerOptionHandlerObj(handlerObj);
},
// Puts the given handler object into the internal hash
registerOptionHandlerObj: function(optionName, handlerObj) {
(this.optionHandlers[optionName] || (this.optionHandlers[optionName] = []))
.push(handlerObj);
},
// Reports that the given option has changed, and calls all appropriate handlers.
triggerOptionHandlers: function(optionName) {
var handlerObjs = this.optionHandlers[optionName] || [];
var i;
for (i = 0; i < handlerObjs.length; i++) {
this.triggerOptionHandlerObj(handlerObjs[i]);
}
},
// Calls the callback for a specific handler object, passing in the appropriate arguments.
triggerOptionHandlerObj: function(handlerObj) {
var optionNames = handlerObj.names;
var optionValues = [];
var i;
for (i = 0; i < optionNames.length; i++) {
optionValues.push(this.options[optionNames[i]]);
}
handlerObj.func.apply(this, optionValues); // maintain the Calendar's `this` context
}
});
;;
Calendar.defaults = {
titleRangeSeparator: ' \u2013 ', // en 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,
//nowIndicator: 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: 100, // milliseconds before an updateSize happens
longPressDelay: 1000
};
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) {
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;
t.el = null; // mirrors local `el`
// locals
var el;
var viewsWithButtons = [];
var tm;
// can be called repeatedly and will rerender
function render() {
var options = calendar.options;
var sections = options.header;
tm = options.theme ? 'ui' : 'fc';
if (sections) {
if (!el) {
el = this.el = $("");
}
else {
el.empty();
}
el.append(renderSection('left'))
.append(renderSection('right'))
.append(renderSection('center'))
.append('');
}
else {
removeElement();
}
}
function removeElement() {
if (el) {
el.remove();
el = t.el = null;
}
}
function renderSection(position) {
var sectionEl = $('');
var options = calendar.options;
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 = (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) {
if (el) {
el.find('h2').text(text);
}
}
function activateButton(buttonName) {
if (el) {
el.find('.fc-' + buttonName + '-button')
.addClass(tm + '-state-active');
}
}
function deactivateButton(buttonName) {
if (el) {
el.find('.fc-' + buttonName + '-button')
.removeClass(tm + '-state-active');
}
}
function disableButton(buttonName) {
if (el) {
el.find('.fc-' + buttonName + '-button')
.prop('disabled', true)
.addClass(tm + '-state-disabled');
}
}
function enableButton(buttonName) {
if (el) {
el.find('.fc-' + buttonName + '-button')
.prop('disabled', false)
.removeClass(tm + '-state-disabled');
}
}
function getViewsWithButtons() {
return viewsWithButtons;
}
}
;;
FC.sourceNormalizers = [];
FC.sourceFetchers = [];
var ajaxDefaults = {
dataType: 'json',
cache: false
};
var eventGUID = 1;
function EventManager() { // assumed to be a calendar
var t = this;
// exports
t.isFetchNeeded = isFetchNeeded;
t.fetchEvents = fetchEvents;
t.fetchEventSources = fetchEventSources;
t.getEventSources = getEventSources;
t.getEventSourceById = getEventSourceById;
t.getEventSourcesByMatchArray = getEventSourcesByMatchArray;
t.getEventSourcesByMatch = getEventSourcesByMatch;
t.addEventSource = addEventSource;
t.removeEventSource = removeEventSource;
t.removeEventSources = removeEventSources;
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 pendingSourceCnt = 0; // outstanding fetch requests, max one per source
var cache = []; // holds events that have already been expanded
$.each(
(t.options.events ? [ t.options.events ] : []).concat(t.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;
fetchEventSources(sources, 'reset');
}
// expects an array of event source objects (the originals, not copies)
// `specialFetchType` is an optimization parameter that affects purging of the event cache.
function fetchEventSources(specificSources, specialFetchType) {
var i, source;
if (specialFetchType === 'reset') {
cache = [];
}
else if (specialFetchType !== 'add') {
cache = excludeEventsBySources(cache, specificSources);
}
for (i = 0; i < specificSources.length; i++) {
source = specificSources[i];
// already-pending sources have already been accounted for in pendingSourceCnt
if (source._status !== 'pending') {
pendingSourceCnt++;
}
source._fetchId = (source._fetchId || 0) + 1;
source._status = 'pending';
}
for (i = 0; i < specificSources.length; i++) {
source = specificSources[i];
tryFetchEventSource(source, source._fetchId);
}
}
// fetches an event source and processes its result ONLY if it is still the current fetch.
// caller is responsible for incrementing pendingSourceCnt first.
function tryFetchEventSource(source, fetchId) {
_fetchEventSource(source, function(eventInputs) {
var isArraySource = $.isArray(source.events);
var i, eventInput;
var abstractEvent;
if (
// is this the source's most recent fetch?
// if not, rely on an upcoming fetch of this source to decrement pendingSourceCnt
fetchId === source._fetchId &&
// event source no longer valid?
source._status !== 'rejected'
) {
source._status = 'resolved';
if (eventInputs) {
for (i = 0; i < eventInputs.length; i++) {
eventInput = eventInputs[i];
if (isArraySource) { // array sources have already been convert to Event Objects
abstractEvent = eventInput;
}
else {
abstractEvent = buildEventFromInput(eventInput, source);
}
if (abstractEvent) { // not false (an invalid event)
cache.push.apply(
cache,
expandEvent(abstractEvent) // add individual expanded events to the cache
);
}
}
}
decrementPendingSourceCnt();
}
});
}
function rejectEventSource(source) {
var wasPending = source._status === 'pending';
source._status = 'rejected';
if (wasPending) {
decrementPendingSourceCnt();
}
}
function decrementPendingSourceCnt() {
pendingSourceCnt--;
if (!pendingSourceCnt) {
reportEvents(cache);
}
}
function _fetchEventSource(source, callback) {
var i;
var fetchers = FC.sourceFetchers;
var res;
for (i=0; i eventStart;
}
t.getEventCache = function() {
return cache;
};
}
// hook for external libs to manipulate event properties upon creation.
// should manipulate the event in-place.
Calendar.prototype.normalizeEvent = function(event) {
};
// Does the given span (start, end, and other location information)
// fully contain the other?
Calendar.prototype.spanContainsSpan = function(outerSpan, innerSpan) {
var eventStart = outerSpan.start.clone().stripZone();
var eventEnd = this.getEventEnd(outerSpan).stripZone();
return innerSpan.start >= eventStart && innerSpan.end <= eventEnd;
};
// 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;
}
/* Business Hours
-----------------------------------------------------------------------------------------*/
var BUSINESS_HOUR_EVENT_DEFAULTS = {
id: '_fcBusinessHours', // will relate events from different calls to expandEvent
start: '09:00',
end: '17:00',
dow: [ 1, 2, 3, 4, 5 ], // monday - friday
rendering: 'inverse-background'
// classNames are defined in businessHoursSegClasses
};
// Return events objects for business hours within the current view.
// Abuse of our event system :(
Calendar.prototype.getCurrentBusinessHourEvents = function(wholeDay) {
return this.computeBusinessHourEvents(wholeDay, this.options.businessHours);
};
// Given a raw input value from options, return events objects for business hours within the current view.
Calendar.prototype.computeBusinessHourEvents = function(wholeDay, input) {
if (input === true) {
return this.expandBusinessHourEvents(wholeDay, [ {} ]);
}
else if ($.isPlainObject(input)) {
return this.expandBusinessHourEvents(wholeDay, [ input ]);
}
else if ($.isArray(input)) {
return this.expandBusinessHourEvents(wholeDay, input, true);
}
else {
return [];
}
};
// inputs expected to be an array of objects.
// if ignoreNoDow is true, will ignore entries that don't specify a day-of-week (dow) key.
Calendar.prototype.expandBusinessHourEvents = function(wholeDay, inputs, ignoreNoDow) {
var view = this.getView();
var events = [];
var i, input;
for (i = 0; i < inputs.length; i++) {
input = inputs[i];
if (ignoreNoDow && !input.dow) {
continue;
}
// give defaults. will make a copy
input = $.extend({}, BUSINESS_HOUR_EVENT_DEFAULTS, input);
// if a whole-day series is requested, clear the start/end times
if (wholeDay) {
input.start = null;
input.end = null;
}
events.push.apply(events, // append
this.expandEvent(
this.buildEventFromInput(input),
view.start,
view.end
)
);
}
return events;
};
;;
/* 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({
scroller: null,
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();
this.scroller = new Scroller({
overflowX: 'hidden',
overflowY: 'auto'
});
},
// 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.scroller.render();
var dayGridContainerEl = this.scroller.el.addClass('fc-day-grid-container');
var dayGridEl = $('').appendTo(dayGridContainerEl);
this.el.find('.fc-body > tr > td').append(dayGridContainerEl);
this.dayGrid.setElement(dayGridEl);
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();
this.scroller.destroy();
},
renderBusinessHours: function() {
this.dayGrid.renderBusinessHours();
},
unrenderBusinessHours: function() {
this.dayGrid.unrenderBusinessHours();
},
// 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;
var scrollbarWidths;
// reset all heights to be natural
this.scroller.clear();
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
}
// distribute the height to the rows
// (totalHeight is a "recommended" value if isAuto)
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) { // should we force dimensions of the scroll container?
this.scroller.setHeight(scrollerHeight);
scrollbarWidths = this.scroller.getScrollbarWidths();
if (scrollbarWidths.left || scrollbarWidths.right) { // using scrollbars?
compensateScroll(this.headRowEl, scrollbarWidths);
// doing the scrollbar compensation might have created text overflow which created more height. redo
scrollerHeight = this.computeScrollerHeight(totalHeight);
this.scroller.setHeight(scrollerHeight);
}
// guarantees the same scrollbar widths
this.scroller.lockOverflow(scrollbarWidths);
}
},
// given a desired total height of the view, returns what the height of the scroller should be
computeScrollerHeight: function(totalHeight) {
return totalHeight -
subtractInnerElHeight(this.el, this.scroller.el); // everything that's NOT the scroller
},
// 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
}
},
/* Scroll
------------------------------------------------------------------------------------------------------------------*/
queryScroll: function() {
return this.scroller.getScrollTop();
},
setScroll: function(top) {
this.scroller.setScrollTop(top);
},
/* 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({
scroller: null,
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 scroller has scrollbars
// when the time-grid isn't tall enough to occupy the given height, we render an underneath
bottomRuleEl: 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
}
this.scroller = new Scroller({
overflowX: 'hidden',
overflowY: 'auto'
});
},
// 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();
this.scroller.render();
var timeGridWrapEl = this.scroller.el.addClass('fc-time-grid-container');
var timeGridEl = $('').appendTo(timeGridWrapEl);
this.el.find('.fc-body > tr > td').append(timeGridWrapEl);
this.timeGrid.setElement(timeGridEl);
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();
}
this.scroller.destroy();
},
// 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 '';
},
/* Business Hours
------------------------------------------------------------------------------------------------------------------*/
renderBusinessHours: function() {
this.timeGrid.renderBusinessHours();
if (this.dayGrid) {
this.dayGrid.renderBusinessHours();
}
},
unrenderBusinessHours: function() {
this.timeGrid.unrenderBusinessHours();
if (this.dayGrid) {
this.dayGrid.unrenderBusinessHours();
}
},
/* Now Indicator
------------------------------------------------------------------------------------------------------------------*/
getNowIndicatorUnit: function() {
return this.timeGrid.getNowIndicatorUnit();
},
renderNowIndicator: function(date) {
this.timeGrid.renderNowIndicator(date);
},
unrenderNowIndicator: function() {
this.timeGrid.unrenderNowIndicator();
},
/* 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;
var scrollbarWidths;
// reset all dimensions back to the original state
this.bottomRuleEl.hide(); // .show() will be called later if this is necessary
this.scroller.clear(); // sets height to 'auto' and clears overflow
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?
scrollerHeight = this.computeScrollerHeight(totalHeight);
this.scroller.setHeight(scrollerHeight);
scrollbarWidths = this.scroller.getScrollbarWidths();
if (scrollbarWidths.left || scrollbarWidths.right) { // using scrollbars?
// make the all-day and header rows lines up
compensateScroll(this.noScrollRowEls, scrollbarWidths);
// 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.scroller.setHeight(scrollerHeight);
}
// guarantees the same scrollbar widths
this.scroller.lockOverflow(scrollbarWidths);
// if there's any space below the slats, show the horizontal rule.
// this won't cause any new overflow, because lockOverflow already called.
if (this.timeGrid.getTotalSlatHeight() < scrollerHeight) {
this.bottomRuleEl.show();
}
}
},
// given a desired total height of the view, returns what the height of the scroller should be
computeScrollerHeight: function(totalHeight) {
return totalHeight -
subtractInnerElHeight(this.el, this.scroller.el); // everything that's NOT the scroller
},
/* Scroll
------------------------------------------------------------------------------------------------------------------*/
// 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;
},
queryScroll: function() {
return this.scroller.getScrollTop();
},
setScroll: function(top) {
this.scroller.setScrollTop(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
// TODO: move into 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 '