/*! * FullCalendar v2.1.1 * Docs & License: http://arshaw.com/fullcalendar/ * (c) 2013 Adam Shaw */ (function(factory) { if (typeof define === 'function' && define.amd) { define([ 'jquery', 'moment' ], factory); } else { factory(jQuery, moment); } })(function($, moment) { ;; var defaults = { lang: 'en', 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, // event ajax lazyFetching: true, startParam: 'start', endParam: 'end', timezoneParam: 'timezone', timezone: false, //allDayDefault: undefined, // time formats titleFormat: { month: 'MMMM YYYY', // like "September 1986". each language will override this week: 'll', // like "Sep 4 1986" day: 'LL' // like "September 4 1986" }, columnFormat: { month: 'ddd', // like "Sat" week: generateWeekColumnFormat, day: 'dddd' // like "Saturday" }, timeFormat: { // for event elements 'default': generateShortTimeFormat }, displayEventEnd: { month: false, basicWeek: false, 'default': true }, // locale isRTL: false, defaultButtonText: { prev: "prev", next: "next", prevYear: "prev year", nextYear: "next year", 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' }, dragOpacity: .75, dragRevertDuration: 500, dragScroll: true, //selectable: false, unselectAuto: true, dropAccept: '*', eventLimit: false, eventLimitText: 'more', eventLimitClick: 'popover', dayPopoverFormat: 'LL', handleWindowResize: true, windowResizeDelay: 200 // milliseconds before a rerender happens }; function generateShortTimeFormat(options, langData) { return langData.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 } function generateWeekColumnFormat(options, langData) { var format = langData.longDateFormat('L'); // for the format like "MM/DD/YYYY" format = format.replace(/^Y+[^\w\s]*|[^\w\s]*Y+$/g, ''); // strip the year off the edge, as well as other misc non-whitespace chars if (options.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; } var langOptionHash = { en: { columnFormat: { week: 'ddd M/D' // override for english. different from the generated default, which is MM/DD }, dayPopoverFormat: 'dddd, MMMM D' } }; // right-to-left defaults var rtlDefaults = { header: { 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 fc = $.fullCalendar = { version: "2.1.1" }; var fcViews = fc.views = {}; $.fn.fullCalendar = function(options) { var args = Array.prototype.slice.call(arguments, 1); // for a possible method call var res = this; // what this function will return (this jQuery object by default) this.each(function(i, _element) { // loop each DOM element involved var element = $(_element); var calendar = element.data('fullCalendar'); // get the existing calendar object (if any) var singleRes; // the returned value of this single method call // a method call if (typeof options === 'string') { if (calendar && $.isFunction(calendar[options])) { singleRes = calendar[options].apply(calendar, args); if (!i) { res = singleRes; // record the first method call result } if (options === 'destroy') { // for the destroy method, must remove Calendar object data element.removeData('fullCalendar'); } } } // a new calendar initialization else if (!calendar) { // don't initialize twice calendar = new Calendar(element, options); element.data('fullCalendar', calendar); calendar.render(); } }); return res; }; // function for adding/overriding defaults function setDefaults(d) { mergeOptions(defaults, d); } // Recursively combines option hash-objects. // Better than `$.extend(true, ...)` because arrays are not traversed/copied. // // called like: // mergeOptions(target, obj1, obj2, ...) // function mergeOptions(target) { function mergeIntoTarget(name, value) { if ($.isPlainObject(value) && $.isPlainObject(target[name]) && !isForcedAtomicOption(name)) { // merge into a new object to avoid destruction target[name] = mergeOptions({}, target[name], value); // combine. `value` object takes precedence } else if (value !== undefined) { // only use values that are set and not undefined target[name] = value; } } for (var i=1; i").prependTo(element); header = new Header(t, options); headerElement = header.render(); if (headerElement) { element.prepend(headerElement); } changeView(options.defaultView); if (options.handleWindowResize) { windowResizeProxy = debounce(windowResize, options.windowResizeDelay); // prevents rapid calls $(window).resize(windowResizeProxy); } } function destroy() { if (currentView) { currentView.destroy(); } header.destroy(); content.remove(); element.removeClass('fc fc-ltr fc-rtl fc-unthemed ui-widget'); $(window).unbind('resize', windowResizeProxy); } function elementVisible() { return element.is(':visible'); } // View Rendering // ----------------------------------------------------------------------------------- function changeView(viewName) { renderView(0, viewName); } // Renders a view because of a date change, view-type change, or for the first time function renderView(delta, viewName) { ignoreWindowResize++; // if viewName is changing, destroy the old view if (currentView && viewName && currentView.name !== viewName) { header.deactivateButton(currentView.name); freezeContentHeight(); // prevent a scroll jump when view element is removed if (currentView.start) { // rendered before? currentView.destroy(); } currentView.el.remove(); currentView = null; } // if viewName changed, or the view was never created, create a fresh view if (!currentView && viewName) { currentView = new fcViews[viewName](t); currentView.el = $("
").appendTo(content); header.activateButton(viewName); } if (currentView) { // let the view determine what the delta means if (delta) { date = currentView.incrementDate(date, delta); } // render or rerender the view if ( !currentView.start || // never rendered before delta || // explicit date window change !date.isWithin(currentView.intervalStart, currentView.intervalEnd) // implicit date window change ) { if (elementVisible()) { freezeContentHeight(); if (currentView.start) { // rendered before? currentView.destroy(); } currentView.render(date); unfreezeContentHeight(); // need to do this after View::render, so dates are calculated updateTitle(); updateTodayButton(); getAndRenderEvents(); } } } unfreezeContentHeight(); // undo any lone freezeContentHeight calls ignoreWindowResize--; } // Resizing // ----------------------------------------------------------------------------------- t.getSuggestedViewHeight = function() { if (suggestedViewHeight === undefined) { calcSize(); } return suggestedViewHeight; }; t.isHeightAuto = function() { return options.contentHeight === 'auto' || options.height === 'auto'; }; function updateSize(shouldRecalc) { if (elementVisible()) { if (shouldRecalc) { _calcSize(); } ignoreWindowResize++; currentView.updateSize(true); // isResize=true. will poll getSuggestedViewHeight() and isHeightAuto() ignoreWindowResize--; return true; // signal success } } function calcSize() { if (elementVisible()) { _calcSize(); } } function _calcSize() { // assumes elementVisible if (typeof options.contentHeight === 'number') { // exists and not 'auto' suggestedViewHeight = options.contentHeight; } else if (typeof options.height === 'number') { // exists and not 'auto' suggestedViewHeight = options.height - (headerElement ? headerElement.outerHeight(true) : 0); } else { suggestedViewHeight = Math.round(content.width() / Math.max(options.aspectRatio, .5)); } } function windowResize(ev) { if ( !ignoreWindowResize && ev.target === window && // so we don't process jqui "resize" events that have bubbled up currentView.start // view has already been rendered ) { if (updateSize(true)) { currentView.trigger('windowResize', _element); } } } /* Event Fetching/Rendering -----------------------------------------------------------------------------*/ // TODO: going forward, most of this stuff should be directly handled by the view function refetchEvents() { // can be called as an API method destroyEvents(); // so that events are cleared before user starts waiting for AJAX fetchAndRenderEvents(); } function renderEvents() { // destroys old events if previously rendered if (elementVisible()) { freezeContentHeight(); currentView.destroyEvents(); // no performance cost if never rendered currentView.renderEvents(events); unfreezeContentHeight(); } } function destroyEvents() { freezeContentHeight(); currentView.destroyEvents(); unfreezeContentHeight(); } function getAndRenderEvents() { if (!options.lazyFetching || isFetchNeeded(currentView.start, currentView.end)) { fetchAndRenderEvents(); } else { renderEvents(); } } function fetchAndRenderEvents() { fetchEvents(currentView.start, currentView.end); // ... will call reportEvents // ... which will call renderEvents } // called when event data arrives function reportEvents(_events) { events = _events; renderEvents(); } // called when a single event's data has been changed function reportEventChange() { renderEvents(); } /* Header Updating -----------------------------------------------------------------------------*/ function updateTitle() { 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 -----------------------------------------------------------------------------*/ function select(start, end) { start = t.moment(start); if (end) { end = t.moment(end); } else if (start.hasTime()) { end = start.clone().add(t.defaultTimedEventDuration); } else { end = start.clone().add(t.defaultAllDayEventDuration); } currentView.select(start, end); } function unselect() { // safe to be called before renderView if (currentView) { currentView.unselect(); } } /* Date -----------------------------------------------------------------------------*/ function prev() { renderView(-1); } function next() { renderView(1); } function prevYear() { date.add(-1, 'years'); renderView(); } function nextYear() { date.add(1, 'years'); renderView(); } function today() { date = t.getNow(); renderView(); } function gotoDate(dateInput) { date = t.moment(dateInput); renderView(); } function incrementDate(delta) { date.add(moment.duration(delta)); renderView(); } // Forces navigation to a view for the given date. // `viewName` can be a specific view name or a generic one like "week" or "day". function zoomTo(newDate, viewName) { var viewStr; var match; if (!viewName || fcViews[viewName] === undefined) { // a general view name, or "auto" viewName = viewName || 'day'; viewStr = header.getViewsWithButtons().join(' '); // space-separated string of all the views in the header // try to match a general view name, like "week", against a specific one, like "agendaWeek" match = viewStr.match(new RegExp('\\w+' + capitaliseFirstLetter(viewName))); // fall back to the day view being used in the header if (!match) { match = viewStr.match(/\w+Day/); } viewName = match ? match[0] : 'agendaDay'; // fall back to agendaDay } date = newDate; changeView(viewName); } function getDate() { return date.clone(); } /* Height "Freezing" -----------------------------------------------------------------------------*/ function freezeContentHeight() { content.css({ width: '100%', height: content.height(), overflow: 'hidden' }); } function unfreezeContentHeight() { content.css({ width: '', height: '', overflow: '' }); } /* Misc -----------------------------------------------------------------------------*/ function getCalendar() { return t; } function getView() { return currentView; } function option(name, value) { if (value === undefined) { return options[name]; } if (name == 'height' || name == 'contentHeight' || name == 'aspectRatio') { options[name] = value; updateSize(true); // true = allow recalculation of height } } function trigger(name, thisObj) { if (options[name]) { return options[name].apply( thisObj || _element, Array.prototype.slice.call(arguments, 2) ); } } } ;; /* Top toolbar area with buttons and title ----------------------------------------------------------------------------------------------------------------------*/ // TODO: rename all header-related things to "toolbar" function Header(calendar, options) { var t = this; // exports t.render = render; t.destroy = destroy; t.updateTitle = updateTitle; t.activateButton = activateButton; t.deactivateButton = deactivateButton; t.disableButton = disableButton; t.enableButton = enableButton; t.getViewsWithButtons = getViewsWithButtons; // locals var el = $(); var viewsWithButtons = []; var tm; function render() { var sections = options.header; tm = options.theme ? 'ui' : 'fc'; if (sections) { el = $("
") .append(renderSection('left')) .append(renderSection('right')) .append(renderSection('center')) .append('
'); return el; } } function destroy() { el.remove(); } function renderSection(position) { var sectionEl = $('
'); var buttonStr = options.header[position]; if (buttonStr) { $.each(buttonStr.split(' '), function(i) { var groupChildren = $(); var isOnlyButtons = true; var groupEl; $.each(this.split(','), function(j, buttonName) { var buttonClick; var themeIcon; var normalIcon; var defaultText; var customText; var innerHtml; var classes; var button; if (buttonName == 'title') { groupChildren = groupChildren.add($('

 

')); // we always want it to take up height isOnlyButtons = false; } else { if (calendar[buttonName]) { // a calendar method buttonClick = function() { calendar[buttonName](); }; } else if (fcViews[buttonName]) { // a view name buttonClick = function() { calendar.changeView(buttonName); }; viewsWithButtons.push(buttonName); } if (buttonClick) { // smartProperty allows different text per view button (ex: "Agenda Week" vs "Basic Week") themeIcon = smartProperty(options.themeButtonIcons, buttonName); normalIcon = smartProperty(options.buttonIcons, buttonName); defaultText = smartProperty(options.defaultButtonText, buttonName); customText = smartProperty(options.buttonText, buttonName); if (customText) { innerHtml = htmlEscape(customText); } else if (themeIcon && options.theme) { innerHtml = ""; } else if (normalIcon && !options.theme) { innerHtml = ""; } else { innerHtml = htmlEscape(defaultText || buttonName); } classes = [ 'fc-' + buttonName + '-button', tm + '-button', tm + '-state-default' ]; button = $( // type="button" so that it doesn't submit a form '' ) .click(function() { // don't process clicks for disabled buttons if (!button.hasClass(tm + '-state-disabled')) { buttonClick(); // after the click action, if the button becomes the "active" tab, or disabled, // it should never have a hover class, so remove it now. if ( button.hasClass(tm + '-state-active') || button.hasClass(tm + '-state-disabled') ) { button.removeClass(tm + '-state-hover'); } } }) .mousedown(function() { // the *down* effect (mouse pressed in). // only on buttons that are not the "active" tab, or disabled button .not('.' + tm + '-state-active') .not('.' + tm + '-state-disabled') .addClass(tm + '-state-down'); }) .mouseup(function() { // undo the *down* effect button.removeClass(tm + '-state-down'); }) .hover( function() { // the *hover* effect. // only on buttons that are not the "active" tab, or disabled button .not('.' + tm + '-state-active') .not('.' + tm + '-state-disabled') .addClass(tm + '-state-hover'); }, function() { // undo the *hover* effect button .removeClass(tm + '-state-hover') .removeClass(tm + '-state-down'); // if mouseleave happens before mouseup } ); groupChildren = groupChildren.add(button); } } }); if (isOnlyButtons) { groupChildren .first().addClass(tm + '-corner-left').end() .last().addClass(tm + '-corner-right').end(); } if (groupChildren.length > 1) { groupEl = $('
'); if (isOnlyButtons) { groupEl.addClass('fc-button-group'); } groupEl.append(groupChildren); sectionEl.append(groupEl); } else { sectionEl.append(groupChildren); // 1 or 0 children } }); } return sectionEl; } function updateTitle(text) { el.find('h2').text(text); } function activateButton(buttonName) { el.find('.fc-' + buttonName + '-button') .addClass(tm + '-state-active'); } function deactivateButton(buttonName) { el.find('.fc-' + buttonName + '-button') .removeClass(tm + '-state-active'); } function disableButton(buttonName) { el.find('.fc-' + buttonName + '-button') .attr('disabled', 'disabled') .addClass(tm + '-state-disabled'); } function enableButton(buttonName) { el.find('.fc-' + buttonName + '-button') .removeAttr('disabled') .removeClass(tm + '-state-disabled'); } function getViewsWithButtons() { return viewsWithButtons; } } ;; fc.sourceNormalizers = []; fc.sourceFetchers = []; var ajaxDefaults = { dataType: 'json', cache: false }; var eventGUID = 1; function EventManager(options) { // assumed to be a calendar var t = this; // exports t.isFetchNeeded = isFetchNeeded; t.fetchEvents = fetchEvents; t.addEventSource = addEventSource; t.removeEventSource = removeEventSource; t.updateEvent = updateEvent; t.renderEvent = renderEvent; t.removeEvents = removeEvents; t.clientEvents = clientEvents; t.mutateEvent = mutateEvent; // imports var trigger = t.trigger; var getView = t.getView; var reportEvents = t.reportEvents; var getEventEnd = t.getEventEnd; // locals var stickySource = { events: [] }; var sources = [ stickySource ]; var rangeStart, rangeEnd; var currentFetchID = 0; var pendingSourceCnt = 0; var loadingLevel = 0; var cache = []; $.each( (options.events ? [ options.events ] : []).concat(options.eventSources || []), function(i, sourceInput) { var source = buildEventSource(sourceInput); if (source) { sources.push(source); } } ); /* Fetching -----------------------------------------------------------------------------*/ function isFetchNeeded(start, end) { return !rangeStart || // nothing has been fetched yet? // or, a part of the new range is outside of the old range? (after normalizing) start.clone().stripZone() < rangeStart.clone().stripZone() || end.clone().stripZone() > rangeEnd.clone().stripZone(); } function fetchEvents(start, end) { rangeStart = start; rangeEnd = end; cache = []; var fetchID = ++currentFetchID; var len = sources.length; pendingSourceCnt = len; for (var i=0; i cells, find the cell with the largest natural width and set the widths of all the // cells to be that width. // PREREQUISITE: if you want a cell to take up width, it needs to have a single inner element w/ display:inline function matchCellWidths(els) { var maxInnerWidth = 0; els.find('> *').each(function(i, innerEl) { var innerWidth = $(innerEl).outerWidth(); if (innerWidth > maxInnerWidth) { maxInnerWidth = innerWidth; } }); maxInnerWidth++; // sometimes not accurate of width the text needs to stay on one line. insurance els.width(maxInnerWidth); return maxInnerWidth; } // Turns a container element into a scroller if its contents is taller than the allotted height. // Returns true if the element is now a scroller, false otherwise. // NOTE: this method is best because it takes weird zooming dimensions into account function setPotentialScroller(containerEl, height) { containerEl.height(height).addClass('fc-scroller'); // are scrollbars needed? if (containerEl[0].scrollHeight - 1 > containerEl[0].clientHeight) { // !!! -1 because IE is often off-by-one :( return true; } unsetScroller(containerEl); // undo return false; } // Takes an element that might have been a scroller, and turns it back into a normal element. function unsetScroller(containerEl) { containerEl.height('').removeClass('fc-scroller'); } /* General DOM Utilities ----------------------------------------------------------------------------------------------------------------------*/ // 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; } // Given a container element, return an object with the pixel values of the left/right scrollbars. // Left scrollbars might occur on RTL browsers (IE maybe?) but I have not tested. // PREREQUISITE: container element must have a single child with display:block function getScrollbarWidths(container) { var containerLeft = container.offset().left; var containerRight = containerLeft + container.width(); var inner = container.children(); var innerLeft = inner.offset().left; var innerRight = innerLeft + inner.outerWidth(); return { left: innerLeft - containerLeft, right: containerRight - innerRight }; } // Returns a boolean whether this was a left mouse click and no ctrl key (which means right click on Mac) function isPrimaryMouseButton(ev) { return ev.which == 1 && !ev.ctrlKey; } /* FullCalendar-specific Misc Utilities ----------------------------------------------------------------------------------------------------------------------*/ // Creates a basic segment with the intersection of the two ranges. Returns undefined if no intersection. // Expects all dates to be normalized to the same timezone beforehand. function intersectionToSeg(subjectStart, subjectEnd, intervalStart, intervalEnd) { var segStart, segEnd; var isStart, isEnd; if (subjectEnd > intervalStart && subjectStart < intervalEnd) { // in bounds at all? if (subjectStart >= intervalStart) { segStart = subjectStart.clone(); isStart = true; } else { segStart = intervalStart.clone(); isStart = false; } if (subjectEnd <= intervalEnd) { segEnd = subjectEnd.clone(); isEnd = true; } else { segEnd = intervalEnd.clone(); isEnd = false; } return { start: segStart, end: segEnd, isStart: isStart, isEnd: isEnd }; } } function smartProperty(obj, name) { // get a camel-cased/namespaced property of an object obj = obj || {}; if (obj[name] !== undefined) { return obj[name]; } var parts = name.split(/(?=[A-Z])/), i = parts.length - 1, res; for (; i>=0; i--) { res = obj[parts[i].toLowerCase()]; if (res !== undefined) { return res; } } return obj['default']; } /* Date Utilities ----------------------------------------------------------------------------------------------------------------------*/ var dayIDs = [ 'sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat' ]; // Diffs the two moments into a Duration where full-days are recorded first, then the remaining time. // Moments will have their timezones normalized. function dayishDiff(a, b) { return moment.duration({ days: a.clone().stripTime().diff(b.clone().stripTime(), 'days'), ms: a.time() - b.time() }); } function isNativeDate(input) { return Object.prototype.toString.call(input) === '[object Date]' || input instanceof Date; } function dateCompare(a, b) { // works with Moments and native Dates return a - b; } /* General Utilities ----------------------------------------------------------------------------------------------------------------------*/ fc.applyAll = applyAll; // export // Create an object that has the given prototype. Just like Object.create function createObject(proto) { var f = function() {}; f.prototype = proto; return new f(); } // Copies specifically-owned (non-protoype) properties of `b` onto `a`. // FYI, $.extend would copy *all* properties of `b` onto `a`. function extend(a, b) { for (var i in b) { if (b.hasOwnProperty(i)) { a[i] = b[i]; } } } function applyAll(functions, thisObj, args) { if ($.isFunction(functions)) { functions = [ functions ]; } if (functions) { var i; var ret; for (i=0; i/g, '>') .replace(/'/g, ''') .replace(/"/g, '"') .replace(/\n/g, '
'); } function stripHtmlEntities(text) { return text.replace(/&.*?;/g, ''); } function capitaliseFirstLetter(str) { return str.charAt(0).toUpperCase() + str.slice(1); } // Returns a function, that, as long as it continues to be invoked, will not // be triggered. The function will be called after it stops being called for // N milliseconds. // https://github.com/jashkenas/underscore/blob/1.6.0/underscore.js#L714 function debounce(func, wait) { var timeoutId; var args; var context; var timestamp; // of most recent call var later = function() { var last = +new Date() - timestamp; if (last < wait && last > 0) { timeoutId = setTimeout(later, wait - last); } else { timeoutId = null; func.apply(context, args); if (!timeoutId) { context = args = null; } } }; return function() { context = this; args = arguments; timestamp = +new Date(); if (!timeoutId) { timeoutId = setTimeout(later, wait); } }; } ;; var ambigDateOfMonthRegex = /^\s*\d{4}-\d\d$/; var ambigTimeOrZoneRegex = /^\s*\d{4}-(?:(\d\d-\d\d)|(W\d\d$)|(W\d\d-\d)|(\d\d\d))((T| )(\d\d(:\d\d(:\d\d(\.\d+)?)?)?)?)?$/; // Creating // ------------------------------------------------------------------------------------------------- // Creates a new moment, similar to the vanilla moment(...) constructor, but with // extra features (ambiguous time, enhanced formatting). When gived an existing moment, // it will function as a clone (and retain the zone of the moment). Anything else will // result in a moment in the local zone. fc.moment = function() { return makeMoment(arguments); }; // Sames as fc.moment, but forces the resulting moment to be in the UTC timezone. fc.moment.utc = function() { var mom = makeMoment(arguments, true); // Force it into UTC because makeMoment doesn't guarantee it. if (mom.hasTime()) { // don't give ambiguously-timed moments a UTC zone mom.utc(); } return mom; }; // Same as fc.moment, but when given an ISO8601 string, the timezone offset is preserved. // ISO8601 strings with no timezone offset will become ambiguously zoned. fc.moment.parseZone = function() { return makeMoment(arguments, true, true); }; // Builds an FCMoment from args. When given an existing moment, it clones. When given a native // Date, or called with no arguments (the current time), the resulting moment will be local. // Anything else needs to be "parsed" (a string or an array), and will be affected by: // parseAsUTC - if there is no zone information, should we parse the input in UTC? // parseZone - if there is zone information, should we force the zone of the moment? function makeMoment(args, parseAsUTC, parseZone) { var input = args[0]; var isSingleString = args.length == 1 && typeof input === 'string'; var isAmbigTime; var isAmbigZone; var ambigMatch; var output; // an object with fields for the new FCMoment object if (moment.isMoment(input)) { output = moment.apply(null, args); // clone it // the ambig properties have not been preserved in the clone, so reassign them if (input._ambigTime) { output._ambigTime = true; } if (input._ambigZone) { output._ambigZone = true; } } else if (isNativeDate(input) || input === undefined) { output = moment.apply(null, args); // will be local } else { // "parsing" is required isAmbigTime = false; isAmbigZone = false; if (isSingleString) { if (ambigDateOfMonthRegex.test(input)) { // accept strings like '2014-05', but convert to the first of the month input += '-01'; args = [ input ]; // for when we pass it on to moment's constructor isAmbigTime = true; isAmbigZone = true; } else if ((ambigMatch = ambigTimeOrZoneRegex.exec(input))) { isAmbigTime = !ambigMatch[5]; // no time part? isAmbigZone = true; } } else if ($.isArray(input)) { // arrays have no timezone information, so assume ambiguous zone isAmbigZone = true; } // otherwise, probably a string with a format if (parseAsUTC) { output = moment.utc.apply(moment, args); } else { output = moment.apply(null, args); } if (isAmbigTime) { output._ambigTime = true; output._ambigZone = true; // ambiguous time always means ambiguous zone } else if (parseZone) { // let's record the inputted zone somehow if (isAmbigZone) { output._ambigZone = true; } else if (isSingleString) { output.zone(input); // if not a valid zone, will assign UTC } } } return new FCMoment(output); } // Our subclass of Moment. // Accepts an object with the internal Moment properties that should be copied over to // `this` object (most likely another Moment object). The values in this data must not // be referenced by anything else (two moments sharing a Date object for example). function FCMoment(internalData) { extend(this, internalData); } // Chain the prototype to Moment's FCMoment.prototype = createObject(moment.fn); // We need this because Moment's implementation won't create an FCMoment, // nor will it copy over the ambig flags. FCMoment.prototype.clone = function() { return makeMoment([ this ]); }; // Time-of-day // ------------------------------------------------------------------------------------------------- // GETTER // Returns a Duration with the hours/minutes/seconds/ms values of the moment. // If the moment has an ambiguous time, a duration of 00:00 will be returned. // // SETTER // You can supply a Duration, a Moment, or a Duration-like argument. // When setting the time, and the moment has an ambiguous time, it then becomes unambiguous. FCMoment.prototype.time = function(time) { if (time == null) { // getter return moment.duration({ hours: this.hours(), minutes: this.minutes(), seconds: this.seconds(), milliseconds: this.milliseconds() }); } else { // setter delete this._ambigTime; // mark that the moment now has a time if (!moment.isDuration(time) && !moment.isMoment(time)) { time = moment.duration(time); } // The day value should cause overflow (so 24 hours becomes 00:00:00 of next day). // Only for Duration times, not Moment times. var dayHours = 0; if (moment.isDuration(time)) { dayHours = Math.floor(time.asDays()) * 24; } // We need to set the individual fields. // Can't use startOf('day') then add duration. In case of DST at start of day. return this.hours(dayHours + time.hours()) .minutes(time.minutes()) .seconds(time.seconds()) .milliseconds(time.milliseconds()); } }; // Converts the moment to UTC, stripping out its time-of-day and timezone offset, // but preserving its YMD. A moment with a stripped time will display no time // nor timezone offset when .format() is called. FCMoment.prototype.stripTime = function() { var a = this.toArray(); // year,month,date,hours,minutes,seconds as an array // set the internal UTC flag moment.fn.utc.call(this); // call the original method, because we don't want to affect _ambigZone this.year(a[0]) // TODO: find a way to do this in one shot .month(a[1]) .date(a[2]) .hours(0) .minutes(0) .seconds(0) .milliseconds(0); // Mark the time as ambiguous. This needs to happen after the .utc() call, which calls .zone(), which // clears all ambig flags. Same concept with the .year/month/date calls in the case of moment-timezone. this._ambigTime = true; this._ambigZone = true; // if ambiguous time, also ambiguous timezone offset return this; // for chaining }; // Returns if the moment has a non-ambiguous time (boolean) FCMoment.prototype.hasTime = function() { return !this._ambigTime; }; // Timezone // ------------------------------------------------------------------------------------------------- // Converts the moment to UTC, stripping out its timezone offset, but preserving its // YMD and time-of-day. A moment with a stripped timezone offset will display no // timezone offset when .format() is called. FCMoment.prototype.stripZone = function() { var a = this.toArray(); // year,month,date,hours,minutes,seconds as an array var wasAmbigTime = this._ambigTime; moment.fn.utc.call(this); // set the internal UTC flag this.year(a[0]) // TODO: find a way to do this in one shot .month(a[1]) .date(a[2]) .hours(a[3]) .minutes(a[4]) .seconds(a[5]) .milliseconds(a[6]); if (wasAmbigTime) { // the above call to .utc()/.zone() unfortunately clears the ambig flags, so reassign this._ambigTime = true; } // Mark the zone as ambiguous. This needs to happen after the .utc() call, which calls .zone(), which // clears all ambig flags. Same concept with the .year/month/date calls in the case of moment-timezone. this._ambigZone = true; return this; // for chaining }; // Returns of the moment has a non-ambiguous timezone offset (boolean) FCMoment.prototype.hasZone = function() { return !this._ambigZone; }; // this method implicitly marks a zone FCMoment.prototype.zone = function(tzo) { if (tzo != null) { // FYI, the delete statements need to be before the .zone() call or else chaos ensues // for reasons I don't understand. delete this._ambigTime; delete this._ambigZone; } return moment.fn.zone.apply(this, arguments); }; // this method implicitly marks a zone FCMoment.prototype.local = function() { var a = this.toArray(); // year,month,date,hours,minutes,seconds as an array var wasAmbigZone = this._ambigZone; // will happen anyway via .local()/.zone(), but don't want to rely on internal implementation delete this._ambigTime; delete this._ambigZone; moment.fn.local.apply(this, arguments); if (wasAmbigZone) { // If the moment was ambiguously zoned, the date fields were stored as UTC. // We want to preserve these, but in local time. this.year(a[0]) // TODO: find a way to do this in one shot .month(a[1]) .date(a[2]) .hours(a[3]) .minutes(a[4]) .seconds(a[5]) .milliseconds(a[6]); } return this; // for chaining }; // this method implicitly marks a zone FCMoment.prototype.utc = function() { // will happen anyway via .local()/.zone(), but don't want to rely on internal implementation delete this._ambigTime; delete this._ambigZone; return moment.fn.utc.apply(this, arguments); }; // Formatting // ------------------------------------------------------------------------------------------------- FCMoment.prototype.format = function() { if (arguments[0]) { return formatDate(this, arguments[0]); // our extended formatting } if (this._ambigTime) { return momentFormat(this, 'YYYY-MM-DD'); } if (this._ambigZone) { return momentFormat(this, 'YYYY-MM-DD[T]HH:mm:ss'); } return momentFormat(this); // default moment original formatting }; FCMoment.prototype.toISOString = function() { if (this._ambigTime) { return momentFormat(this, 'YYYY-MM-DD'); } if (this._ambigZone) { return momentFormat(this, 'YYYY-MM-DD[T]HH:mm:ss'); } return moment.fn.toISOString.apply(this, arguments); }; // Querying // ------------------------------------------------------------------------------------------------- // Is the moment within the specified range? `end` is exclusive. FCMoment.prototype.isWithin = function(start, end) { var a = commonlyAmbiguate([ this, start, end ]); return a[0] >= a[1] && a[0] < a[2]; }; // When isSame is called with units, timezone ambiguity is normalized before the comparison happens. // If no units are specified, the two moments must be identically the same, with matching ambig flags. FCMoment.prototype.isSame = function(input, units) { var a; if (units) { a = commonlyAmbiguate([ this, input ], true); // normalize timezones but don't erase times return moment.fn.isSame.call(a[0], a[1], units); } else { input = fc.moment.parseZone(input); // normalize input return moment.fn.isSame.call(this, input) && Boolean(this._ambigTime) === Boolean(input._ambigTime) && Boolean(this._ambigZone) === Boolean(input._ambigZone); } }; // Make these query methods work with ambiguous moments $.each([ 'isBefore', 'isAfter' ], function(i, methodName) { FCMoment.prototype[methodName] = function(input, units) { var a = commonlyAmbiguate([ this, input ]); return moment.fn[methodName].call(a[0], a[1], units); }; }); // Misc Internals // ------------------------------------------------------------------------------------------------- // given an array of moment-like inputs, return a parallel array w/ moments similarly ambiguated. // for example, of one moment has ambig time, but not others, all moments will have their time stripped. // set `preserveTime` to `true` to keep times, but only normalize zone ambiguity. function commonlyAmbiguate(inputs, preserveTime) { var outputs = []; var anyAmbigTime = false; var anyAmbigZone = false; var i; for (i=0; i "MMMM D YYYY" formatStr = localeData.longDateFormat(formatStr) || formatStr; // BTW, this is not important for `formatDate` because it is impossible to put custom tokens // or non-zero areas in Moment's localized format strings. separator = separator || ' - '; return formatRangeWithChunks( date1, date2, getFormatStringChunks(formatStr), separator, isRTL ); } fc.formatRange = formatRange; // expose function formatRangeWithChunks(date1, date2, chunks, separator, isRTL) { var chunkStr; // the rendering of the chunk var leftI; var leftStr = ''; var rightI; var rightStr = ''; var middleI; var middleStr1 = ''; var middleStr2 = ''; var middleStr = ''; // Start at the leftmost side of the formatting string and continue until you hit a token // that is not the same between dates. for (leftI=0; leftIleftI; rightI--) { chunkStr = formatSimilarChunk(date1, date2, chunks[rightI]); if (chunkStr === false) { break; } rightStr = chunkStr + rightStr; } // The area in the middle is different for both of the dates. // Collect them distinctly so we can jam them together later. for (middleI=leftI; middleI<=rightI; middleI++) { middleStr1 += formatDateWithChunk(date1, chunks[middleI]); middleStr2 += formatDateWithChunk(date2, chunks[middleI]); } if (middleStr1 || middleStr2) { if (isRTL) { middleStr = middleStr2 + separator + middleStr1; } else { middleStr = middleStr1 + separator + middleStr2; } } return leftStr + middleStr + rightStr; } var similarUnitMap = { Y: 'year', M: 'month', D: 'day', // day of month d: 'day', // day of week // prevents a separator between anything time-related... A: 'second', // AM/PM a: 'second', // am/pm T: 'second', // A/P t: 'second', // a/p H: 'second', // hour (24) h: 'second', // hour (12) m: 'second', // minute s: 'second' // second }; // TODO: week maybe? // Given a formatting chunk, and given that both dates are similar in the regard the // formatting chunk is concerned, format date1 against `chunk`. Otherwise, return `false`. function formatSimilarChunk(date1, date2, chunk) { var token; var unit; if (typeof chunk === 'string') { // a literal string return chunk; } else if ((token = chunk.token)) { unit = similarUnitMap[token.charAt(0)]; // are the dates the same for this unit of measurement? if (unit && date1.isSame(date2, unit)) { return momentFormat(date1, token); // would be the same if we used `date2` // BTW, don't support custom tokens } } return false; // the chunk is NOT the same for the two dates // BTW, don't support splitting on non-zero areas } // Chunking Utils // ------------------------------------------------------------------------------------------------- var formatStringChunkCache = {}; function getFormatStringChunks(formatStr) { if (formatStr in formatStringChunkCache) { return formatStringChunkCache[formatStr]; } return (formatStringChunkCache[formatStr] = chunkFormatString(formatStr)); } // Break the formatting string into an array of chunks function chunkFormatString(formatStr) { var chunks = []; var chunker = /\[([^\]]*)\]|\(([^\)]*)\)|(LT|(\w)\4*o?)|([^\w\[\(]+)/g; // TODO: more descrimination var match; while ((match = chunker.exec(formatStr))) { if (match[1]) { // a literal string inside [ ... ] chunks.push(match[1]); } else if (match[2]) { // non-zero formatting inside ( ... ) chunks.push({ maybe: chunkFormatString(match[2]) }); } else if (match[3]) { // a formatting token chunks.push({ token: match[3] }); } else if (match[5]) { // an unenclosed literal string chunks.push(match[5]); } } return chunks; } ;; /* A rectangular panel that is absolutely positioned over other content ------------------------------------------------------------------------------------------------------------------------ Options: - className (string) - content (HTML string or jQuery element set) - parentEl - top - left - right (the x coord of where the right edge should be. not a "CSS" right) - autoHide (boolean) - show (callback) - hide (callback) */ function Popover(options) { this.options = options || {}; } Popover.prototype = { isHidden: true, options: null, el: null, // the container element for the popover. generated by this object documentMousedownProxy: null, // document mousedown handler bound to `this` margin: 10, // the space required between the popover and the edges of the scroll container // Shows the popover on the specified position. Renders it if not already show: function() { if (this.isHidden) { if (!this.el) { this.render(); } this.el.show(); this.position(); this.isHidden = false; this.trigger('show'); } }, // Hides the popover, through CSS, but does not remove it from the DOM hide: function() { if (!this.isHidden) { this.el.hide(); this.isHidden = true; this.trigger('hide'); } }, // Creates `this.el` and renders content inside of it render: function() { var _this = this; var options = this.options; this.el = $('
') .addClass(options.className || '') .css({ // position initially to the top left to avoid creating scrollbars top: 0, left: 0 }) .append(options.content) .appendTo(options.parentEl); // when a click happens on anything inside with a 'fc-close' className, hide the popover this.el.on('click', '.fc-close', function() { _this.hide(); }); if (options.autoHide) { $(document).on('mousedown', this.documentMousedownProxy = $.proxy(this, 'documentMousedown')); } }, // Triggered when the user clicks *anywhere* in the document, for the autoHide feature documentMousedown: function(ev) { // only hide the popover if the click happened outside the popover if (this.el && !$(ev.target).closest(this.el).length) { this.hide(); } }, // Hides and unregisters any handlers destroy: function() { this.hide(); if (this.el) { this.el.remove(); this.el = null; } $(document).off('mousedown', this.documentMousedownProxy); }, // Positions the popover optimally, using the top/left/right options position: function() { var options = this.options; var origin = this.el.offsetParent().offset(); var width = this.el.outerWidth(); var height = this.el.outerHeight(); var windowEl = $(window); var viewportEl = getScrollParent(this.el); var viewportTop; var viewportLeft; var viewportOffset; var top; // the "position" (not "offset") values for the popover var left; // // compute top and left top = options.top || 0; if (options.left !== undefined) { left = options.left; } else if (options.right !== undefined) { left = options.right - width; // derive the left value from the right value } else { left = 0; } if (viewportEl.is(window) || viewportEl.is(document)) { // normalize getScrollParent's result viewportEl = windowEl; viewportTop = 0; // the window is always at the top left viewportLeft = 0; // (and .offset() won't work if called here) } else { viewportOffset = viewportEl.offset(); viewportTop = viewportOffset.top; viewportLeft = viewportOffset.left; } // if the window is scrolled, it causes the visible area to be further down viewportTop += windowEl.scrollTop(); viewportLeft += windowEl.scrollLeft(); // constrain to the view port. if constrained by two edges, give precedence to top/left if (options.viewportConstrain !== false) { top = Math.min(top, viewportTop + viewportEl.outerHeight() - height - this.margin); top = Math.max(top, viewportTop + this.margin); left = Math.min(left, viewportLeft + viewportEl.outerWidth() - width - this.margin); left = Math.max(left, viewportLeft + this.margin); } this.el.css({ top: top - origin.top, left: left - origin.left }); }, // Triggers a callback. Calls a function in the option hash of the same name. // Arguments beyond the first `name` are forwarded on. // TODO: better code reuse for this. Repeat code trigger: function(name) { if (this.options[name]) { this.options[name].apply(this, Array.prototype.slice.call(arguments, 1)); } } }; ;; /* A "coordinate map" converts pixel coordinates into an associated cell, which has an associated date ------------------------------------------------------------------------------------------------------------------------ Common interface: CoordMap.prototype = { build: function() {}, getCell: function(x, y) {} }; */ /* Coordinate map for a grid component ----------------------------------------------------------------------------------------------------------------------*/ function GridCoordMap(grid) { this.grid = grid; } GridCoordMap.prototype = { grid: null, // reference to the Grid rows: null, // the top-to-bottom y coordinates. including the bottom of the last item cols: null, // the left-to-right x coordinates. including the right of the last item containerEl: null, // container element that all coordinates are constrained to. optionally assigned minX: null, maxX: null, // exclusive minY: null, maxY: null, // exclusive // Queries the grid for the coordinates of all the cells build: function() { this.grid.buildCoords( this.rows = [], this.cols = [] ); this.computeBounds(); }, // Given a coordinate of the document, gets the associated cell. If no cell is underneath, returns null getCell: function(x, y) { var cell = null; var rows = this.rows; var cols = this.cols; var r = -1; var c = -1; var i; if (this.inBounds(x, y)) { for (i = 0; i < rows.length; i++) { if (y >= rows[i][0] && y < rows[i][1]) { r = i; break; } } for (i = 0; i < cols.length; i++) { if (x >= cols[i][0] && x < cols[i][1]) { c = i; break; } } if (r >= 0 && c >= 0) { cell = { row: r, col: c }; cell.grid = this.grid; cell.date = this.grid.getCellDate(cell); } } return cell; }, // If there is a containerEl, compute the bounds into min/max values computeBounds: function() { var containerOffset; if (this.containerEl) { containerOffset = this.containerEl.offset(); this.minX = containerOffset.left; this.maxX = containerOffset.left + this.containerEl.outerWidth(); this.minY = containerOffset.top; this.maxY = containerOffset.top + this.containerEl.outerHeight(); } }, // Determines if the given coordinates are in bounds. If no `containerEl`, always true inBounds: function(x, y) { if (this.containerEl) { return x >= this.minX && x < this.maxX && y >= this.minY && y < this.maxY; } return true; } }; /* Coordinate map that is a combination of multiple other coordinate maps ----------------------------------------------------------------------------------------------------------------------*/ function ComboCoordMap(coordMaps) { this.coordMaps = coordMaps; } ComboCoordMap.prototype = { coordMaps: null, // an array of CoordMaps // Builds all coordMaps build: function() { var coordMaps = this.coordMaps; var i; for (i = 0; i < coordMaps.length; i++) { coordMaps[i].build(); } }, // Queries all coordMaps for the cell underneath the given coordinates, returning the first result getCell: function(x, y) { var coordMaps = this.coordMaps; var cell = null; var i; for (i = 0; i < coordMaps.length && !cell; i++) { cell = coordMaps[i].getCell(x, y); } return cell; } }; ;; /* Tracks mouse movements over a CoordMap and raises events about which cell the mouse is over. ----------------------------------------------------------------------------------------------------------------------*/ // TODO: implement scrolling function DragListener(coordMap, options) { this.coordMap = coordMap; this.options = options || {}; } DragListener.prototype = { coordMap: null, options: null, isListening: false, isDragging: false, // the cell/date the mouse was over when listening started origCell: null, origDate: null, // the cell/date the mouse is over cell: null, date: null, // coordinates of the initial mousedown mouseX0: null, mouseY0: null, // handler attached to the document, bound to the DragListener's `this` mousemoveProxy: null, mouseupProxy: null, scrollEl: null, scrollBounds: null, // { top, bottom, left, right } scrollTopVel: null, // pixels per second scrollLeftVel: null, // pixels per second scrollIntervalId: null, // ID of setTimeout for scrolling animation loop scrollHandlerProxy: null, // this-scoped function for handling when scrollEl is scrolled scrollSensitivity: 30, // pixels from edge for scrolling to start scrollSpeed: 200, // pixels per second, at maximum speed scrollIntervalMs: 50, // millisecond wait between scroll increment // Call this when the user does a mousedown. Will probably lead to startListening mousedown: function(ev) { if (isPrimaryMouseButton(ev)) { ev.preventDefault(); // prevents native selection in most browsers this.startListening(ev); // start the drag immediately if there is no minimum distance for a drag start if (!this.options.distance) { this.startDrag(ev); } } }, // Call this to start tracking mouse movements startListening: function(ev) { var scrollParent; var cell; if (!this.isListening) { // grab scroll container and attach handler if (ev && this.options.scroll) { scrollParent = getScrollParent($(ev.target)); if (!scrollParent.is(window) && !scrollParent.is(document)) { this.scrollEl = scrollParent; // scope to `this`, and use `debounce` to make sure rapid calls don't happen this.scrollHandlerProxy = debounce($.proxy(this, 'scrollHandler'), 100); this.scrollEl.on('scroll', this.scrollHandlerProxy); } } this.computeCoords(); // relies on `scrollEl` // get info on the initial cell, date, and coordinates if (ev) { cell = this.getCell(ev); this.origCell = cell; this.origDate = cell ? cell.date : null; this.mouseX0 = ev.pageX; this.mouseY0 = ev.pageY; } $(document) .on('mousemove', this.mousemoveProxy = $.proxy(this, 'mousemove')) .on('mouseup', this.mouseupProxy = $.proxy(this, 'mouseup')) .on('selectstart', this.preventDefault); // prevents native selection in IE<=8 this.isListening = true; this.trigger('listenStart', ev); } }, // Recomputes the drag-critical positions of elements computeCoords: function() { this.coordMap.build(); this.computeScrollBounds(); }, // Called when the user moves the mouse mousemove: function(ev) { var minDistance; var distanceSq; // current distance from mouseX0/mouseY0, squared if (!this.isDragging) { // if not already dragging... // then start the drag if the minimum distance criteria is met minDistance = this.options.distance || 1; distanceSq = Math.pow(ev.pageX - this.mouseX0, 2) + Math.pow(ev.pageY - this.mouseY0, 2); if (distanceSq >= minDistance * minDistance) { // use pythagorean theorem this.startDrag(ev); } } if (this.isDragging) { this.drag(ev); // report a drag, even if this mousemove initiated the drag } }, // Call this to initiate a legitimate drag. // This function is called internally from this class, but can also be called explicitly from outside startDrag: function(ev) { var cell; if (!this.isListening) { // startDrag must have manually initiated this.startListening(); } if (!this.isDragging) { this.isDragging = true; this.trigger('dragStart', ev); // report the initial cell the mouse is over cell = this.getCell(ev); if (cell) { this.cellOver(cell, true); } } }, // Called while the mouse is being moved and when we know a legitimate drag is taking place drag: function(ev) { var cell; if (this.isDragging) { cell = this.getCell(ev); if (!isCellsEqual(cell, this.cell)) { // a different cell than before? if (this.cell) { this.cellOut(); } if (cell) { this.cellOver(cell); } } this.dragScroll(ev); // will possibly cause scrolling } }, // Called when a the mouse has just moved over a new cell cellOver: function(cell) { this.cell = cell; this.date = cell.date; this.trigger('cellOver', cell, cell.date); }, // Called when the mouse has just moved out of a cell cellOut: function() { if (this.cell) { this.trigger('cellOut', this.cell); this.cell = null; this.date = null; } }, // Called when the user does a mouseup mouseup: function(ev) { this.stopDrag(ev); this.stopListening(ev); }, // Called when the drag is over. Will not cause listening to stop however. // A concluding 'cellOut' event will NOT be triggered. stopDrag: function(ev) { if (this.isDragging) { this.stopScrolling(); this.trigger('dragStop', ev); this.isDragging = false; } }, // Call this to stop listening to the user's mouse events stopListening: function(ev) { if (this.isListening) { // remove the scroll handler if there is a scrollEl if (this.scrollEl) { this.scrollEl.off('scroll', this.scrollHandlerProxy); this.scrollHandlerProxy = null; } $(document) .off('mousemove', this.mousemoveProxy) .off('mouseup', this.mouseupProxy) .off('selectstart', this.preventDefault); this.mousemoveProxy = null; this.mouseupProxy = null; this.isListening = false; this.trigger('listenStop', ev); this.origCell = this.cell = null; this.origDate = this.date = null; } }, // Gets the cell underneath the coordinates for the given mouse event getCell: function(ev) { return this.coordMap.getCell(ev.pageX, ev.pageY); }, // Triggers a callback. Calls a function in the option hash of the same name. // Arguments beyond the first `name` are forwarded on. trigger: function(name) { if (this.options[name]) { this.options[name].apply(this, Array.prototype.slice.call(arguments, 1)); } }, // Stops a given mouse event from doing it's native browser action. In our case, text selection. preventDefault: function(ev) { ev.preventDefault(); }, /* Scrolling ------------------------------------------------------------------------------------------------------------------*/ // Computes and stores the bounding rectangle of scrollEl computeScrollBounds: function() { var el = this.scrollEl; var offset; if (el) { offset = el.offset(); this.scrollBounds = { top: offset.top, left: offset.left, bottom: offset.top + el.outerHeight(), right: offset.left + el.outerWidth() }; } }, // Called when the dragging is in progress and scrolling should be updated dragScroll: function(ev) { var sensitivity = this.scrollSensitivity; var bounds = this.scrollBounds; var topCloseness, bottomCloseness; var leftCloseness, rightCloseness; var topVel = 0; var leftVel = 0; if (bounds) { // only scroll if scrollEl exists // compute closeness to edges. valid range is from 0.0 - 1.0 topCloseness = (sensitivity - (ev.pageY - bounds.top)) / sensitivity; bottomCloseness = (sensitivity - (bounds.bottom - ev.pageY)) / sensitivity; leftCloseness = (sensitivity - (ev.pageX - bounds.left)) / sensitivity; rightCloseness = (sensitivity - (bounds.right - ev.pageX)) / sensitivity; // translate vertical closeness into velocity. // mouse must be completely in bounds for velocity to happen. if (topCloseness >= 0 && topCloseness <= 1) { topVel = topCloseness * this.scrollSpeed * -1; // negative. for scrolling up } else if (bottomCloseness >= 0 && bottomCloseness <= 1) { topVel = bottomCloseness * this.scrollSpeed; } // translate horizontal closeness into velocity if (leftCloseness >= 0 && leftCloseness <= 1) { leftVel = leftCloseness * this.scrollSpeed * -1; // negative. for scrolling left } else if (rightCloseness >= 0 && rightCloseness <= 1) { leftVel = rightCloseness * this.scrollSpeed; } } this.setScrollVel(topVel, leftVel); }, // Sets the speed-of-scrolling for the scrollEl setScrollVel: function(topVel, leftVel) { this.scrollTopVel = topVel; this.scrollLeftVel = leftVel; this.constrainScrollVel(); // massages into realistic values // if there is non-zero velocity, and an animation loop hasn't already started, then START if ((this.scrollTopVel || this.scrollLeftVel) && !this.scrollIntervalId) { this.scrollIntervalId = setInterval( $.proxy(this, 'scrollIntervalFunc'), // scope to `this` this.scrollIntervalMs ); } }, // Forces scrollTopVel and scrollLeftVel to be zero if scrolling has already gone all the way constrainScrollVel: function() { var el = this.scrollEl; if (this.scrollTopVel < 0) { // scrolling up? if (el.scrollTop() <= 0) { // already scrolled all the way up? this.scrollTopVel = 0; } } else if (this.scrollTopVel > 0) { // scrolling down? if (el.scrollTop() + el[0].clientHeight >= el[0].scrollHeight) { // already scrolled all the way down? this.scrollTopVel = 0; } } if (this.scrollLeftVel < 0) { // scrolling left? if (el.scrollLeft() <= 0) { // already scrolled all the left? this.scrollLeftVel = 0; } } else if (this.scrollLeftVel > 0) { // scrolling right? if (el.scrollLeft() + el[0].clientWidth >= el[0].scrollWidth) { // already scrolled all the way right? this.scrollLeftVel = 0; } } }, // This function gets called during every iteration of the scrolling animation loop scrollIntervalFunc: function() { var el = this.scrollEl; var frac = this.scrollIntervalMs / 1000; // considering animation frequency, what the vel should be mult'd by // change the value of scrollEl's scroll if (this.scrollTopVel) { el.scrollTop(el.scrollTop() + this.scrollTopVel * frac); } if (this.scrollLeftVel) { el.scrollLeft(el.scrollLeft() + this.scrollLeftVel * frac); } this.constrainScrollVel(); // since the scroll values changed, recompute the velocities // if scrolled all the way, which causes the vels to be zero, stop the animation loop if (!this.scrollTopVel && !this.scrollLeftVel) { this.stopScrolling(); } }, // Kills any existing scrolling animation loop stopScrolling: function() { if (this.scrollIntervalId) { clearInterval(this.scrollIntervalId); this.scrollIntervalId = null; // when all done with scrolling, recompute positions since they probably changed this.computeCoords(); } }, // Get called when the scrollEl is scrolled (NOTE: this is delayed via debounce) scrollHandler: function() { // recompute all coordinates, but *only* if this is *not* part of our scrolling animation if (!this.scrollIntervalId) { this.computeCoords(); } } }; // Returns `true` if the cells are identically equal. `false` otherwise. // They must have the same row, col, and be from the same grid. // Two null values will be considered equal, as two "out of the grid" states are the same. function isCellsEqual(cell1, cell2) { if (!cell1 && !cell2) { return true; } if (cell1 && cell2) { return cell1.grid === cell2.grid && cell1.row === cell2.row && cell1.col === cell2.col; } return false; } ;; /* Creates a clone of an element and lets it track the mouse as it moves ----------------------------------------------------------------------------------------------------------------------*/ function MouseFollower(sourceEl, options) { this.options = options = options || {}; this.sourceEl = sourceEl; this.parentEl = options.parentEl ? $(options.parentEl) : sourceEl.parent(); // default to sourceEl's parent } MouseFollower.prototype = { options: null, sourceEl: null, // the element that will be cloned and made to look like it is dragging el: null, // the clone of `sourceEl` that will track the mouse parentEl: null, // the element that `el` (the clone) will be attached to // the initial position of el, relative to the offset parent. made to match the initial offset of sourceEl top0: null, left0: null, // the initial position of the mouse mouseY0: null, mouseX0: null, // the number of pixels the mouse has moved from its initial position topDelta: null, leftDelta: null, mousemoveProxy: null, // document mousemove handler, bound to the MouseFollower's `this` isFollowing: false, isHidden: false, isAnimating: false, // doing the revert animation? // Causes the element to start following the mouse start: function(ev) { if (!this.isFollowing) { this.isFollowing = true; this.mouseY0 = ev.pageY; this.mouseX0 = ev.pageX; this.topDelta = 0; this.leftDelta = 0; if (!this.isHidden) { this.updatePosition(); } $(document).on('mousemove', this.mousemoveProxy = $.proxy(this, 'mousemove')); } }, // Causes the element to stop following the mouse. If shouldRevert is true, will animate back to original position. // `callback` gets invoked when the animation is complete. If no animation, it is invoked immediately. stop: function(shouldRevert, callback) { var _this = this; var revertDuration = this.options.revertDuration; function complete() { this.isAnimating = false; _this.destroyEl(); this.top0 = this.left0 = null; // reset state for future updatePosition calls if (callback) { callback(); } } if (this.isFollowing && !this.isAnimating) { // disallow more than one stop animation at a time this.isFollowing = false; $(document).off('mousemove', this.mousemoveProxy); if (shouldRevert && revertDuration && !this.isHidden) { // do a revert animation? this.isAnimating = true; this.el.animate({ top: this.top0, left: this.left0 }, { duration: revertDuration, complete: complete }); } else { complete(); } } }, // Gets the tracking element. Create it if necessary getEl: function() { var el = this.el; if (!el) { this.sourceEl.width(); // hack to force IE8 to compute correct bounding box el = this.el = this.sourceEl.clone() .css({ position: 'absolute', visibility: '', // in case original element was hidden (commonly through hideEvents()) display: this.isHidden ? 'none' : '', // for when initially hidden margin: 0, right: 'auto', // erase and set width instead bottom: 'auto', // erase and set height instead width: this.sourceEl.width(), // explicit height in case there was a 'right' value height: this.sourceEl.height(), // explicit width in case there was a 'bottom' value opacity: this.options.opacity || '', zIndex: this.options.zIndex }) .appendTo(this.parentEl); } return el; }, // Removes the tracking element if it has already been created destroyEl: function() { if (this.el) { this.el.remove(); this.el = null; } }, // Update the CSS position of the tracking element updatePosition: function() { var sourceOffset; var origin; this.getEl(); // ensure this.el // make sure origin info was computed if (this.top0 === null) { this.sourceEl.width(); // hack to force IE8 to compute correct bounding box sourceOffset = this.sourceEl.offset(); origin = this.el.offsetParent().offset(); this.top0 = sourceOffset.top - origin.top; this.left0 = sourceOffset.left - origin.left; } this.el.css({ top: this.top0 + this.topDelta, left: this.left0 + this.leftDelta }); }, // Gets called when the user moves the mouse mousemove: function(ev) { this.topDelta = ev.pageY - this.mouseY0; this.leftDelta = ev.pageX - this.mouseX0; if (!this.isHidden) { this.updatePosition(); } }, // Temporarily makes the tracking element invisible. Can be called before following starts hide: function() { if (!this.isHidden) { this.isHidden = true; if (this.el) { this.el.hide(); } } }, // Show the tracking element after it has been temporarily hidden show: function() { if (this.isHidden) { this.isHidden = false; this.updatePosition(); this.getEl().show(); } } }; ;; /* A utility class for rendering rows. ----------------------------------------------------------------------------------------------------------------------*/ // It leverages methods of the subclass and the View to determine custom rendering behavior for each row "type" // (such as highlight rows, day rows, helper rows, etc). function RowRenderer(view) { this.view = view; } RowRenderer.prototype = { view: null, // a View object cellHtml: '', // plain default HTML used for a cell when no other is available // Renders the HTML for a row, leveraging custom cell-HTML-renderers based on the `rowType`. // Also applies the "intro" and "outro" cells, which are specified by the subclass and views. // `row` is an optional row number. rowHtml: function(rowType, row) { var view = this.view; var renderCell = this.getHtmlRenderer('cell', rowType); var cellHtml = ''; var col; var date; row = row || 0; for (col = 0; col < view.colCnt; col++) { date = view.cellToDate(row, col); cellHtml += renderCell(row, col, date); } cellHtml = this.bookendCells(cellHtml, rowType, row); // apply intro and outro return '' + cellHtml + ''; }, // Applies the "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. // `cells` can be an HTML string of 's or a jQuery element // `row` is an optional row number. bookendCells: function(cells, rowType, row) { var view = this.view; var intro = this.getHtmlRenderer('intro', rowType)(row || 0); var outro = this.getHtmlRenderer('outro', rowType)(row || 0); var isRTL = view.opt('isRTL'); var prependHtml = isRTL ? outro : intro; var appendHtml = isRTL ? intro : outro; if (typeof cells === 'string') { return prependHtml + cells + appendHtml; } else { // a jQuery element return cells.prepend(prependHtml).append(appendHtml); } }, // Returns an HTML-rendering function given a specific `rendererName` (like cell, intro, or outro) and a specific // `rowType` (like day, eventSkeleton, helperSkeleton), which is optional. // If a renderer for the specific rowType doesn't exist, it will fall back to a generic renderer. // We will query the View object first for any custom rendering functions, then the methods of the subclass. getHtmlRenderer: function(rendererName, rowType) { var view = this.view; var generalName; // like "cellHtml" var specificName; // like "dayCellHtml". based on rowType var provider; // either the View or the RowRenderer subclass, whichever provided the method var renderer; generalName = rendererName + 'Html'; if (rowType) { specificName = rowType + capitaliseFirstLetter(rendererName) + 'Html'; } if (specificName && (renderer = view[specificName])) { provider = view; } else if (specificName && (renderer = this[specificName])) { provider = this; } else if ((renderer = view[generalName])) { provider = view; } else if ((renderer = this[generalName])) { provider = this; } if (typeof renderer === 'function') { return function(row) { return renderer.apply(provider, arguments) || ''; // use correct `this` and always return a string }; } // the rendered can be a plain string as well. if not specified, always an empty string. return function() { return renderer || ''; }; } }; ;; /* An abstract class comprised of a "grid" of cells that each represent a specific datetime ----------------------------------------------------------------------------------------------------------------------*/ function Grid(view) { RowRenderer.call(this, view); // call the super-constructor this.coordMap = new GridCoordMap(this); } Grid.prototype = createObject(RowRenderer.prototype); // declare the super-class $.extend(Grid.prototype, { el: null, // the containing element coordMap: null, // a GridCoordMap that converts pixel values to datetimes cellDuration: null, // a cell's duration. subclasses must assign this ASAP // Renders the grid into the `el` element. // Subclasses should override and call this super-method when done. render: function() { this.bindHandlers(); }, // Called when the grid's resources need to be cleaned up destroy: function() { // subclasses can implement }, /* Coordinates & Cells ------------------------------------------------------------------------------------------------------------------*/ // Populates the given empty arrays with the y and x coordinates of the cells buildCoords: function(rows, cols) { // subclasses must implement }, // Given a cell object, returns the date for that cell getCellDate: function(cell) { // subclasses must implement }, // Given a cell object, returns the element that represents the cell's whole-day getCellDayEl: function(cell) { // subclasses must implement }, // Converts a range with an inclusive `start` and an exclusive `end` into an array of segment objects rangeToSegs: function(start, end) { // subclasses must implement }, /* Handlers ------------------------------------------------------------------------------------------------------------------*/ // Attach handlers to `this.el`, using bubbling to listen to all ancestors. // We don't need to undo any of this in a "destroy" method, because the view will simply remove `this.el` from the // DOM and jQuery will be smart enough to garbage collect the handlers. bindHandlers: function() { var _this = this; this.el.on('mousedown', function(ev) { if ( !$(ev.target).is('.fc-event-container *, .fc-more') && // not an an event element, or "more.." link !$(ev.target).closest('.fc-popover').length // not on a popover (like the "more.." events one) ) { _this.dayMousedown(ev); } }); this.bindSegHandlers(); // attach event-element-related handlers. in Grid.events.js }, // Process a mousedown on an element that represents a day. For day clicking and selecting. dayMousedown: function(ev) { var _this = this; var view = this.view; var isSelectable = view.opt('selectable'); var dates = null; // the inclusive dates of the selection. will be null if no selection var start; // the inclusive start of the selection var end; // the *exclusive* end of the selection var dayEl; // this listener tracks a mousedown on a day element, and a subsequent drag. // if the drag ends on the same day, it is a 'dayClick'. // if 'selectable' is enabled, this listener also detects selections. var dragListener = new DragListener(this.coordMap, { //distance: 5, // needs more work if we want dayClick to fire correctly scroll: view.opt('dragScroll'), dragStart: function() { view.unselect(); // since we could be rendering a new selection, we want to clear any old one }, cellOver: function(cell, date) { if (dragListener.origDate) { // click needs to have started on a cell dayEl = _this.getCellDayEl(cell); dates = [ date, dragListener.origDate ].sort(dateCompare); start = dates[0]; end = dates[1].clone().add(_this.cellDuration); if (isSelectable) { _this.renderSelection(start, end); } } }, cellOut: function(cell, date) { dates = null; _this.destroySelection(); }, listenStop: function(ev) { if (dates) { // started and ended on a cell? if (dates[0].isSame(dates[1])) { view.trigger('dayClick', dayEl[0], start, ev); } if (isSelectable) { // the selection will already have been rendered. just report it view.reportSelection(start, end, ev); } } } }); dragListener.mousedown(ev); // start listening, which will eventually initiate a dragStart }, /* Event Dragging ------------------------------------------------------------------------------------------------------------------*/ // Renders a visual indication of a event being dragged over the given date(s). // `end` can be null, as well as `seg`. See View's documentation on renderDrag for more info. // A returned value of `true` signals that a mock "helper" event has been rendered. renderDrag: function(start, end, seg) { // subclasses must implement }, // Unrenders a visual indication of an event being dragged destroyDrag: function() { // subclasses must implement }, /* Event Resizing ------------------------------------------------------------------------------------------------------------------*/ // Renders a visual indication of an event being resized. // `start` and `end` are the updated dates of the event. `seg` is the original segment object involved in the drag. renderResize: function(start, end, seg) { // subclasses must implement }, // Unrenders a visual indication of an event being resized. destroyResize: function() { // subclasses must implement }, /* Event Helper ------------------------------------------------------------------------------------------------------------------*/ // Renders a mock event over the given date(s). // `end` can be null, in which case the mock event that is rendered will have a null end time. // `sourceSeg` is the internal segment object involved in the drag. If null, something external is dragging. renderRangeHelper: function(start, end, sourceSeg) { var view = this.view; var fakeEvent; // compute the end time if forced to do so (this is what EventManager does) if (!end && view.opt('forceEventDuration')) { end = view.calendar.getDefaultEventEnd(!start.hasTime(), start); } fakeEvent = sourceSeg ? createObject(sourceSeg.event) : {}; // mask the original event object if possible fakeEvent.start = start; fakeEvent.end = end; fakeEvent.allDay = !(start.hasTime() || (end && end.hasTime())); // freshly compute allDay // this extra className will be useful for differentiating real events from mock events in CSS fakeEvent.className = (fakeEvent.className || []).concat('fc-helper'); // if something external is being dragged in, don't render a resizer if (!sourceSeg) { fakeEvent.editable = false; } this.renderHelper(fakeEvent, sourceSeg); // do the actual rendering }, // Renders a mock event renderHelper: function(event, sourceSeg) { // subclasses must implement }, // Unrenders a mock event destroyHelper: function() { // subclasses must implement }, /* Selection ------------------------------------------------------------------------------------------------------------------*/ // Renders a visual indication of a selection. Will highlight by default but can be overridden by subclasses. renderSelection: function(start, end) { this.renderHighlight(start, end); }, // Unrenders any visual indications of a selection. Will unrender a highlight by default. destroySelection: function() { this.destroyHighlight(); }, /* Highlight ------------------------------------------------------------------------------------------------------------------*/ // Puts visual emphasis on a certain date range renderHighlight: function(start, end) { // subclasses should implement }, // Removes visual emphasis on a date range destroyHighlight: function() { // subclasses should implement }, /* Generic rendering utilities for subclasses ------------------------------------------------------------------------------------------------------------------*/ // Renders a day-of-week header row headHtml: function() { return '' + '
' + '' + '' + this.rowHtml('head') + // leverages RowRenderer '' + '
' + '
'; }, // Used by the `headHtml` method, via RowRenderer, for rendering the HTML of a day-of-week header cell headCellHtml: function(row, col, date) { var view = this.view; var calendar = view.calendar; var colFormat = view.opt('columnFormat'); return '' + '' + htmlEscape(calendar.formatDate(date, colFormat)) + ''; }, // Renders the HTML for a single-day background cell bgCellHtml: function(row, col, date) { var view = this.view; var classes = this.getDayClasses(date); classes.unshift('fc-day', view.widgetContentClass); return ''; }, // Computes HTML classNames for a single-day cell getDayClasses: function(date) { var view = this.view; var today = view.calendar.getNow().stripTime(); var classes = [ 'fc-' + dayIDs[date.day()] ]; if ( view.name === 'month' && date.month() != view.intervalStart.month() ) { classes.push('fc-other-month'); } if (date.isSame(today, 'day')) { classes.push( 'fc-today', view.highlightStateClass ); } else if (date < today) { classes.push('fc-past'); } else { classes.push('fc-future'); } return classes; } }); ;; /* Event-rendering and event-interaction methods for the abstract Grid class ----------------------------------------------------------------------------------------------------------------------*/ $.extend(Grid.prototype, { mousedOverSeg: null, // the segment object the user's mouse is over. null if over nothing isDraggingSeg: false, // is a segment being dragged? boolean isResizingSeg: false, // is a segment being resized? boolean // Renders the given events onto the grid renderEvents: function(events) { // subclasses must implement }, // Retrieves all rendered segment objects in this grid getSegs: function() { // subclasses must implement }, // Unrenders all events. Subclasses should implement, calling this super-method first. destroyEvents: function() { this.triggerSegMouseout(); // trigger an eventMouseout if user's mouse is over an event }, // Renders a `el` property for each seg, and only returns segments that successfully rendered renderSegs: function(segs, disableResizing) { var view = this.view; var html = ''; var renderedSegs = []; var i; // build a large concatenation of event segment HTML for (i = 0; i < segs.length; i++) { html += this.renderSegHtml(segs[i], disableResizing); } // Grab individual elements from the combined HTML string. Use each as the default rendering. // Then, compute the 'el' for each segment. An el might be null if the eventRender callback returned false. $(html).each(function(i, node) { var seg = segs[i]; var el = view.resolveEventEl(seg.event, $(node)); if (el) { el.data('fc-seg', seg); // used by handlers seg.el = el; renderedSegs.push(seg); } }); return renderedSegs; }, // Generates the HTML for the default rendering of a segment renderSegHtml: function(seg, disableResizing) { // subclasses must implement }, // Converts an array of event objects into an array of segment objects eventsToSegs: function(events, intervalStart, intervalEnd) { var _this = this; return $.map(events, function(event) { return _this.eventToSegs(event, intervalStart, intervalEnd); // $.map flattens all returned arrays together }); }, // Slices a single event into an array of event segments. // When `intervalStart` and `intervalEnd` are specified, intersect the events with that interval. // Otherwise, let the subclass decide how it wants to slice the segments over the grid. eventToSegs: function(event, intervalStart, intervalEnd) { var eventStart = event.start.clone().stripZone(); // normalize var eventEnd = this.view.calendar.getEventEnd(event).stripZone(); // compute (if necessary) and normalize var segs; var i, seg; if (intervalStart && intervalEnd) { seg = intersectionToSeg(eventStart, eventEnd, intervalStart, intervalEnd); segs = seg ? [ seg ] : []; } else { segs = this.rangeToSegs(eventStart, eventEnd); // defined by the subclass } // assign extra event-related properties to the segment objects for (i = 0; i < segs.length; i++) { seg = segs[i]; seg.event = event; seg.eventStartMS = +eventStart; seg.eventDurationMS = eventEnd - eventStart; } return segs; }, /* Handlers ------------------------------------------------------------------------------------------------------------------*/ // Attaches event-element-related handlers to the container element and leverage bubbling bindSegHandlers: function() { var _this = this; var view = this.view; $.each( { mouseenter: function(seg, ev) { _this.triggerSegMouseover(seg, ev); }, mouseleave: function(seg, ev) { _this.triggerSegMouseout(seg, ev); }, click: function(seg, ev) { return view.trigger('eventClick', this, seg.event, ev); // can return `false` to cancel }, mousedown: function(seg, ev) { if ($(ev.target).is('.fc-resizer') && view.isEventResizable(seg.event)) { _this.segResizeMousedown(seg, ev); } else if (view.isEventDraggable(seg.event)) { _this.segDragMousedown(seg, ev); } } }, function(name, func) { // attach the handler to the container element and only listen for real event elements via bubbling _this.el.on(name, '.fc-event-container > *', function(ev) { var seg = $(this).data('fc-seg'); // grab segment data. put there by View::renderEvents // only call the handlers if there is not a drag/resize in progress if (seg && !_this.isDraggingSeg && !_this.isResizingSeg) { return func.call(this, seg, ev); // `this` will be the event element } }); } ); }, // Updates internal state and triggers handlers for when an event element is moused over triggerSegMouseover: function(seg, ev) { if (!this.mousedOverSeg) { this.mousedOverSeg = seg; this.view.trigger('eventMouseover', seg.el[0], seg.event, ev); } }, // Updates internal state and triggers handlers for when an event element is moused out. // Can be given no arguments, in which case it will mouseout the segment that was previously moused over. triggerSegMouseout: function(seg, ev) { ev = ev || {}; // if given no args, make a mock mouse event if (this.mousedOverSeg) { seg = seg || this.mousedOverSeg; // if given no args, use the currently moused-over segment this.mousedOverSeg = null; this.view.trigger('eventMouseout', seg.el[0], seg.event, ev); } }, /* Dragging ------------------------------------------------------------------------------------------------------------------*/ // Called when the user does a mousedown on an event, which might lead to dragging. // Generic enough to work with any type of Grid. segDragMousedown: function(seg, ev) { var _this = this; var view = this.view; var el = seg.el; var event = seg.event; var newStart, newEnd; // A clone of the original element that will move with the mouse var mouseFollower = new MouseFollower(seg.el, { parentEl: view.el, opacity: view.opt('dragOpacity'), revertDuration: view.opt('dragRevertDuration'), zIndex: 2 // one above the .fc-view }); // Tracks mouse movement over the *view's* coordinate map. Allows dragging and dropping between subcomponents // of the view. var dragListener = new DragListener(view.coordMap, { distance: 5, scroll: view.opt('dragScroll'), listenStart: function(ev) { mouseFollower.hide(); // don't show until we know this is a real drag mouseFollower.start(ev); }, dragStart: function(ev) { _this.triggerSegMouseout(seg, ev); // ensure a mouseout on the manipulated event has been reported _this.isDraggingSeg = true; view.hideEvent(event); // hide all event segments. our mouseFollower will take over view.trigger('eventDragStart', el[0], event, ev, {}); // last argument is jqui dummy }, cellOver: function(cell, date) { var origDate = seg.cellDate || dragListener.origDate; var res = _this.computeDraggedEventDates(seg, origDate, date); newStart = res.start; newEnd = res.end; if (view.renderDrag(newStart, newEnd, seg)) { // have the view render a visual indication mouseFollower.hide(); // if the view is already using a mock event "helper", hide our own } else { mouseFollower.show(); } }, cellOut: function() { // called before mouse moves to a different cell OR moved out of all cells newStart = null; view.destroyDrag(); // unrender whatever was done in view.renderDrag mouseFollower.show(); // show in case we are moving out of all cells }, dragStop: function(ev) { var hasChanged = newStart && !newStart.isSame(event.start); // do revert animation if hasn't changed. calls a callback when finished (whether animation or not) mouseFollower.stop(!hasChanged, function() { _this.isDraggingSeg = false; view.destroyDrag(); view.showEvent(event); view.trigger('eventDragStop', el[0], event, ev, {}); // last argument is jqui dummy if (hasChanged) { view.eventDrop(el[0], event, newStart, ev); // will rerender all events... } }); }, listenStop: function() { mouseFollower.stop(); // put in listenStop in case there was a mousedown but the drag never started } }); dragListener.mousedown(ev); // start listening, which will eventually lead to a dragStart }, // Given a segment, the dates where a drag began and ended, calculates the Event Object's new start and end dates computeDraggedEventDates: function(seg, dragStartDate, dropDate) { var view = this.view; var event = seg.event; var start = event.start; var end = view.calendar.getEventEnd(event); var delta; var newStart; var newEnd; if (dropDate.hasTime() === dragStartDate.hasTime()) { delta = dayishDiff(dropDate, dragStartDate); newStart = start.clone().add(delta); if (event.end === null) { // do we need to compute an end? newEnd = null; } else { newEnd = end.clone().add(delta); } } else { // if switching from day <-> timed, start should be reset to the dropped date, and the end cleared newStart = dropDate; newEnd = null; // end should be cleared } return { start: newStart, end: newEnd }; }, /* Resizing ------------------------------------------------------------------------------------------------------------------*/ // Called when the user does a mousedown on an event's resizer, which might lead to resizing. // Generic enough to work with any type of Grid. segResizeMousedown: function(seg, ev) { var _this = this; var view = this.view; var el = seg.el; var event = seg.event; var start = event.start; var end = view.calendar.getEventEnd(event); var newEnd = null; var dragListener; function destroy() { // resets the rendering _this.destroyResize(); view.showEvent(event); } // Tracks mouse movement over the *grid's* coordinate map dragListener = new DragListener(this.coordMap, { distance: 5, scroll: view.opt('dragScroll'), dragStart: function(ev) { _this.triggerSegMouseout(seg, ev); // ensure a mouseout on the manipulated event has been reported _this.isResizingSeg = true; view.trigger('eventResizeStart', el[0], event, ev, {}); // last argument is jqui dummy }, cellOver: function(cell, date) { // compute the new end. don't allow it to go before the event's start if (date.isBefore(start)) { // allows comparing ambig to non-ambig date = start; } newEnd = date.clone().add(_this.cellDuration); // make it an exclusive end if (newEnd.isSame(end)) { newEnd = null; destroy(); } else { _this.renderResize(start, newEnd, seg); view.hideEvent(event); } }, cellOut: function() { // called before mouse moves to a different cell OR moved out of all cells newEnd = null; destroy(); }, dragStop: function(ev) { _this.isResizingSeg = false; destroy(); view.trigger('eventResizeStop', el[0], event, ev, {}); // last argument is jqui dummy if (newEnd) { view.eventResize(el[0], event, newEnd, ev); // will rerender all events... } } }); dragListener.mousedown(ev); // start listening, which will eventually lead to a dragStart }, /* Rendering Utils ------------------------------------------------------------------------------------------------------------------*/ // Generic utility for generating the HTML classNames for an event segment's element getSegClasses: function(seg, isDraggable, isResizable) { var event = seg.event; var classes = [ 'fc-event', seg.isStart ? 'fc-start' : 'fc-not-start', seg.isEnd ? 'fc-end' : 'fc-not-end' ].concat( event.className, event.source ? event.source.className : [] ); if (isDraggable) { classes.push('fc-draggable'); } if (isResizable) { classes.push('fc-resizable'); } return classes; }, // Utility for generating a CSS string with all the event skin-related properties getEventSkinCss: function(event) { var view = this.view; var source = event.source || {}; var eventColor = event.color; var sourceColor = source.color; var optionColor = view.opt('eventColor'); var backgroundColor = event.backgroundColor || eventColor || source.backgroundColor || sourceColor || view.opt('eventBackgroundColor') || optionColor; var borderColor = event.borderColor || eventColor || source.borderColor || sourceColor || view.opt('eventBorderColor') || optionColor; var textColor = event.textColor || source.textColor || view.opt('eventTextColor'); var statements = []; if (backgroundColor) { statements.push('background-color:' + backgroundColor); } if (borderColor) { statements.push('border-color:' + borderColor); } if (textColor) { statements.push('color:' + textColor); } return statements.join(';'); } }); /* Event Segment Utilities ----------------------------------------------------------------------------------------------------------------------*/ // A cmp function for determining which segments should take visual priority function compareSegs(seg1, seg2) { return seg1.eventStartMS - seg2.eventStartMS || // earlier events go first seg2.eventDurationMS - seg1.eventDurationMS || // tie? longer events go first seg2.event.allDay - seg1.event.allDay || // tie? put all-day events first (booleans cast to 0/1) (seg1.event.title || '').localeCompare(seg2.event.title); // tie? alphabetically by title } ;; /* A component that renders a grid of whole-days that runs horizontally. There can be multiple rows, one per week. ----------------------------------------------------------------------------------------------------------------------*/ function DayGrid(view) { Grid.call(this, view); // call the super-constructor } DayGrid.prototype = createObject(Grid.prototype); // declare the super-class $.extend(DayGrid.prototype, { numbersVisible: false, // should render a row for day/week numbers? manually set by the view cellDuration: moment.duration({ days: 1 }), // required for Grid.event.js. Each cell is always a single day bottomCoordPadding: 0, // hack for extending the hit area for the last row of the coordinate grid rowEls: null, // set of fake row elements dayEls: null, // set of whole-day elements comprising the row's background helperEls: null, // set of cell skeleton elements for rendering the mock event "helper" highlightEls: null, // set of cell skeleton elements for rendering the highlight // 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. render: function(isRigid) { var view = this.view; var html = ''; var row; for (row = 0; row < view.rowCnt; row++) { html += this.dayRowHtml(row, isRigid); } this.el.html(html); this.rowEls = this.el.find('.fc-row'); this.dayEls = this.el.find('.fc-day'); // run all the day cells through the dayRender callback this.dayEls.each(function(i, node) { var date = view.cellToDate(Math.floor(i / view.colCnt), i % view.colCnt); view.trigger('dayRender', null, date, $(node)); }); Grid.prototype.render.call(this); // call the super-method }, destroy: function() { this.destroySegPopover(); }, // Generates the HTML for a single row. `row` is the row number. dayRowHtml: function(row, isRigid) { var view = this.view; var classes = [ 'fc-row', 'fc-week', view.widgetContentClass ]; if (isRigid) { classes.push('fc-rigid'); } return '' + '
' + '
' + '' + this.rowHtml('day', row) + // leverages RowRenderer. calls dayCellHtml() '
' + '
' + '
' + '' + (this.numbersVisible ? '' + this.rowHtml('number', row) + // leverages RowRenderer. View will define render method '' : '' ) + '
' + '
' + '
'; }, // Renders the HTML for a whole-day cell. Will eventually end up in the day-row's background. // We go through a 'day' row type instead of just doing a 'bg' row type so that the View can do custom rendering // specifically for whole-day rows, whereas a 'bg' might also be used for other purposes (TimeGrid bg for example). dayCellHtml: function(row, col, date) { return this.bgCellHtml(row, col, date); }, /* Coordinates & Cells ------------------------------------------------------------------------------------------------------------------*/ // Populates the empty `rows` and `cols` arrays with coordinates of the cells. For CoordGrid. buildCoords: function(rows, cols) { var colCnt = this.view.colCnt; var e, n, p; this.dayEls.slice(0, colCnt).each(function(i, _e) { // iterate the first row of day elements e = $(_e); n = e.offset().left; if (i) { p[1] = n; } p = [ n ]; cols[i] = p; }); p[1] = n + e.outerWidth(); this.rowEls.each(function(i, _e) { e = $(_e); n = e.offset().top; if (i) { p[1] = n; } p = [ n ]; rows[i] = p; }); p[1] = n + e.outerHeight() + this.bottomCoordPadding; // hack to extend hit area of last row }, // Converts a cell to a date getCellDate: function(cell) { return this.view.cellToDate(cell); // leverages the View's cell system }, // Gets the whole-day element associated with the cell getCellDayEl: function(cell) { return this.dayEls.eq(cell.row * this.view.colCnt + cell.col); }, // Converts a range with an inclusive `start` and an exclusive `end` into an array of segment objects rangeToSegs: function(start, end) { return this.view.rangeToSegments(start, end); // leverages the View's cell system }, /* Event Drag Visualization ------------------------------------------------------------------------------------------------------------------*/ // Renders a visual indication of an event hovering over the given date(s). // `end` can be null, as well as `seg`. See View's documentation on renderDrag for more info. // A returned value of `true` signals that a mock "helper" event has been rendered. renderDrag: function(start, end, seg) { var opacity; // always render a highlight underneath this.renderHighlight( start, end || this.view.calendar.getDefaultEventEnd(true, start) ); // if a segment from the same calendar but another component is being dragged, render a helper event if (seg && !seg.el.closest(this.el).length) { this.renderRangeHelper(start, end, seg); opacity = this.view.opt('dragOpacity'); if (opacity !== undefined) { this.helperEls.css('opacity', opacity); } return true; // a helper has been rendered } }, // Unrenders any visual indication of a hovering event destroyDrag: function() { this.destroyHighlight(); this.destroyHelper(); }, /* Event Resize Visualization ------------------------------------------------------------------------------------------------------------------*/ // Renders a visual indication of an event being resized renderResize: function(start, end, seg) { this.renderHighlight(start, end); this.renderRangeHelper(start, end, seg); }, // Unrenders a visual indication of an event being resized destroyResize: function() { this.destroyHighlight(); this.destroyHelper(); }, /* 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 rowStructs = this.renderEventRows([ event ]); // inject each new event skeleton into each associated row this.rowEls.each(function(row, rowNode) { var rowEl = $(rowNode); // the .fc-row var skeletonEl = $('
'); // will be absolutely positioned var skeletonTop; // If there is an original segment, match the top position. Otherwise, put it at the row's top level if (sourceSeg && sourceSeg.row === row) { skeletonTop = sourceSeg.el.position().top; } else { skeletonTop = rowEl.find('.fc-content-skeleton tbody').position().top; } skeletonEl.css('top', skeletonTop) .find('table') .append(rowStructs[row].tbodyEl); rowEl.append(skeletonEl); helperNodes.push(skeletonEl[0]); }); this.helperEls = $(helperNodes); // array -> jQuery set }, // Unrenders any visual indication of a mock helper event destroyHelper: function() { if (this.helperEls) { this.helperEls.remove(); this.helperEls = null; } }, /* Highlighting ------------------------------------------------------------------------------------------------------------------*/ // Renders an emphasis on the given date range. `start` is an inclusive, `end` is exclusive. renderHighlight: function(start, end) { var segs = this.rangeToSegs(start, end); var highlightNodes = []; var i, seg; var el; // build an event skeleton for each row that needs it for (i = 0; i < segs.length; i++) { seg = segs[i]; el = $( this.highlightSkeletonHtml(seg.leftCol, seg.rightCol + 1) // make end exclusive ); el.appendTo(this.rowEls[seg.row]); highlightNodes.push(el[0]); } this.highlightEls = $(highlightNodes); // array -> jQuery set }, // Unrenders any visual emphasis on a date range destroyHighlight: function() { if (this.highlightEls) { this.highlightEls.remove(); this.highlightEls = null; } }, // Generates the HTML used to build a single-row "highlight skeleton", a table that frames highlight cells highlightSkeletonHtml: function(startCol, endCol) { var colCnt = this.view.colCnt; var cellHtml = ''; if (startCol > 0) { cellHtml += ' elements that should be appended to each row's content skeleton. // Returns an array of rowStruct objects (see the bottom of `renderEventRow`). renderEventRows: function(events) { var segs = this.eventsToSegs(events); var rowStructs = []; var segRows; var row; segs = this.renderSegs(segs); // returns a new array with only visible segments segRows = this.groupSegRows(segs); // group into nested arrays // iterate each row of segment groupings for (row = 0; row < segRows.length; row++) { rowStructs.push( this.renderEventRow(row, segRows[row]) ); } return rowStructs; }, // Builds the HTML to be used for the default element for an individual segment renderSegHtml: function(seg, disableResizing) { var view = this.view; var isRTL = view.opt('isRTL'); var event = seg.event; var isDraggable = view.isEventDraggable(event); var isResizable = !disableResizing && event.allDay && seg.isEnd && view.isEventResizable(event); var classes = this.getSegClasses(seg, isDraggable, isResizable); var skinCss = this.getEventSkinCss(event); var timeHtml = ''; var titleHtml; classes.unshift('fc-day-grid-event'); // Only display a timed events time if it is the starting segment if (!event.allDay && seg.isStart) { timeHtml = '' + htmlEscape(view.getEventTimeText(event)) + ''; } titleHtml = '' + (htmlEscape(event.title || '') || ' ') + // we always want one line of height ''; return '' + '
' + (isRTL ? titleHtml + ' ' + timeHtml : // put a natural space in between timeHtml + ' ' + titleHtml // ) + '
' + (isResizable ? '
' : '' ) + ''; }, // 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. renderEventRow: function(row, rowSegs) { var view = this.view; var colCnt = view.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 '); 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 = $(' 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'); // get and reveal if (trEl.position().top + trEl.outerHeight() > 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 view = this.view; var rowStruct = this.rowStructs[row]; var moreNodes = []; // array of "more" links and and segment 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) { cell = { row: row, col: col }; segsBelow = this.getCellSegs(cell, 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 '; html += '' + (!isRTL ? axisHtml : '') + '"; slotTime.add(this.slotDuration); } return html; }, // Parses various options into properties of this object processOptions: function() { var view = this.view; var slotDuration = view.opt('slotDuration'); var snapDuration = view.opt('snapDuration'); slotDuration = moment.duration(slotDuration); snapDuration = snapDuration ? moment.duration(snapDuration) : slotDuration; this.slotDuration = slotDuration; this.snapDuration = snapDuration; this.cellDuration = snapDuration; // important to assign this for Grid.events.js this.minTime = moment.duration(view.opt('minTime')); this.maxTime = moment.duration(view.opt('maxTime')); }, // Slices up a date range into a segment for each column rangeToSegs: function(rangeStart, rangeEnd) { var view = this.view; var segs = []; var seg; var col; var cellDate; var colStart, colEnd; // normalize rangeStart = rangeStart.clone().stripZone(); rangeEnd = rangeEnd.clone().stripZone(); for (col = 0; col < view.colCnt; col++) { cellDate = view.cellToDate(0, col); // use the View's cell system for this colStart = cellDate.clone().time(this.minTime); colEnd = cellDate.clone().time(this.maxTime); seg = intersectionToSeg(rangeStart, rangeEnd, colStart, colEnd); if (seg) { seg.col = col; segs.push(seg); } } return segs; }, /* Coordinates ------------------------------------------------------------------------------------------------------------------*/ // Called when there is a window resize/zoom and we need to recalculate coordinates for the grid resize: function() { this.computeSlatTops(); this.updateSegVerticals(); }, // Populates the given empty `rows` and `cols` arrays with offset positions of the "snap" cells. // "Snap" cells are different the slots because they might have finer granularity. buildCoords: function(rows, cols) { var colCnt = this.view.colCnt; var originTop = this.el.offset().top; var snapTime = moment.duration(+this.minTime); var p = null; var e, n; this.dayEls.slice(0, colCnt).each(function(i, _e) { e = $(_e); n = e.offset().left; if (p) { p[1] = n; } p = [ n ]; cols[i] = p; }); p[1] = n + e.outerWidth(); p = null; while (snapTime < this.maxTime) { n = originTop + this.computeTimeTop(snapTime); if (p) { p[1] = n; } p = [ n ]; rows.push(p); snapTime.add(this.snapDuration); } p[1] = originTop + this.computeTimeTop(snapTime); // the position of the exclusive end }, // Gets the datetime for the given slot cell getCellDate: function(cell) { var view = this.view; var calendar = view.calendar; return calendar.rezoneDate( // since we are adding a time, it needs to be in the calendar's timezone view.cellToDate(0, cell.col) // View's coord system only accounts for start-of-day for column .time(this.minTime + this.snapDuration * cell.row) ); }, // Gets the element that represents the whole-day the cell resides on getCellDayEl: function(cell) { return this.dayEls.eq(cell.col); }, // 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.clone().stripZone() - startOfDayDate.clone().stripTime() ) ); }, // Computes the top coordinate, relative to the bounds of the grid, of the given time (a Duration). computeTimeTop: function(time) { var slatCoverage = (time - this.minTime) / this.slotDuration; // floating-point value of # of slots covered var slatIndex; var slatRemainder; var slatTop; var slatBottom; // constrain. because minTime/maxTime might be customized slatCoverage = Math.max(0, slatCoverage); slatCoverage = Math.min(this.slatEls.length, slatCoverage); slatIndex = Math.floor(slatCoverage); // an integer index of the furthest whole slot slatRemainder = slatCoverage - slatIndex; slatTop = this.slatTops[slatIndex]; // the top position of the furthest whole slot if (slatRemainder) { // time spans part-way into the slot slatBottom = this.slatTops[slatIndex + 1]; return slatTop + (slatBottom - slatTop) * slatRemainder; // part-way between slots } else { return slatTop; } }, // Queries each `slatEl` for its position relative to the grid's container and stores it in `slatTops`. // Includes the the bottom of the last slat as the last item in the array. computeSlatTops: function() { var tops = []; var top; this.slatEls.each(function(i, node) { top = $(node).position().top; tops.push(top); }); tops.push(top + this.slatEls.last().outerHeight()); // bottom of the last slat this.slatTops = tops; }, /* Event Drag Visualization ------------------------------------------------------------------------------------------------------------------*/ // Renders a visual indication of an event being dragged over the specified date(s). // `end` and `seg` can be null. See View's documentation on renderDrag for more info. renderDrag: function(start, end, seg) { var opacity; if (seg) { // if there is event information for this drag, render a helper event this.renderRangeHelper(start, end, seg); opacity = this.view.opt('dragOpacity'); if (opacity !== undefined) { this.helperEl.css('opacity', opacity); } return true; // signal that a helper has been rendered } else { // otherwise, just render a highlight this.renderHighlight( start, end || this.view.calendar.getDefaultEventEnd(false, start) ); } }, // Unrenders any visual indication of an event being dragged destroyDrag: function() { this.destroyHelper(); this.destroyHighlight(); }, /* Event Resize Visualization ------------------------------------------------------------------------------------------------------------------*/ // Renders a visual indication of an event being resized renderResize: function(start, end, seg) { this.renderRangeHelper(start, end, seg); }, // Unrenders any visual indication of an event being resized destroyResize: function() { this.destroyHelper(); }, /* Event Helper ------------------------------------------------------------------------------------------------------------------*/ // Renders a mock "helper" event. `sourceSeg` is the original segment object and might be null (an external drag) renderHelper: function(event, sourceSeg) { var res = this.renderEventTable([ event ]); var tableEl = res.tableEl; var segs = res.segs; var i, seg; var sourceEl; // Try to make the segment that is in the same row as sourceSeg look the same for (i = 0; i < segs.length; i++) { seg = segs[i]; if (sourceSeg && sourceSeg.col === seg.col) { sourceEl = sourceSeg.el; seg.el.css({ left: sourceEl.css('left'), right: sourceEl.css('right'), 'margin-left': sourceEl.css('margin-left'), 'margin-right': sourceEl.css('margin-right') }); } } this.helperEl = $('
') .append(tableEl) .appendTo(this.el); }, // Unrenders any mock helper event destroyHelper: function() { if (this.helperEl) { this.helperEl.remove(); this.helperEl = null; } }, /* Selection ------------------------------------------------------------------------------------------------------------------*/ // Renders a visual indication of a selection. Overrides the default, which was to simply render a highlight. renderSelection: function(start, end) { if (this.view.opt('selectHelper')) { // this setting signals that a mock helper event should be rendered this.renderRangeHelper(start, end); } else { this.renderHighlight(start, end); } }, // Unrenders any visual indication of a selection destroySelection: function() { this.destroyHelper(); this.destroyHighlight(); }, /* Highlight ------------------------------------------------------------------------------------------------------------------*/ // Renders an emphasis on the given date range. `start` is inclusive. `end` is exclusive. renderHighlight: function(start, end) { this.highlightEl = $( this.highlightSkeletonHtml(start, end) ).appendTo(this.el); }, // Unrenders the emphasis on a date range destroyHighlight: function() { if (this.highlightEl) { this.highlightEl.remove(); this.highlightEl = null; } }, // Generates HTML for a table element with containers in each column, responsible for absolutely positioning the // highlight elements to cover the highlighted slots. highlightSkeletonHtml: function(start, end) { var view = this.view; var segs = this.rangeToSegs(start, end); var cellHtml = ''; var col = 0; var i, seg; var dayDate; var top, bottom; for (i = 0; i < segs.length; i++) { // loop through the segments. one per column seg = segs[i]; // need empty cells beforehand? if (col < seg.col) { cellHtml += '
'; col++; } // need empty cells after the last segment? if (col < view.colCnt) { cellHtml += ''; } }, // Generates the HTML that will go before content-skeleton cells that display the day/week numbers. // Queried by the DayGrid subcomponent. Ordering depends on isRTL. numberIntroHtml: function(row) { if (this.weekNumbersVisible) { return '' + ''; } }, // Generates the HTML that goes before the day bg cells for each day-row. // Queried by the DayGrid subcomponent. Ordering depends on isRTL. dayIntroHtml: function() { if (this.weekNumbersVisible) { return ''; } }, // Generates the HTML that goes before every other type of row generated by DayGrid. Ordering depends on isRTL. // Affects helper-skeleton and highlight-skeleton rows. introHtml: function() { if (this.weekNumbersVisible) { return ''; } }, // Generates the HTML for the '; }, // Generates an HTML attribute string for setting the width of the week number column, if it is known weekNumberStyleAttr: function() { if (this.weekNumberWidth !== null) { return 'style="width:' + this.weekNumberWidth + 'px"'; } return ''; }, // Determines whether each row should have a constant height hasRigidRows: function() { var eventLimit = this.opt('eventLimit'); return eventLimit && typeof eventLimit !== 'number'; }, /* Dimensions ------------------------------------------------------------------------------------------------------------------*/ // Refreshes the horizontal dimensions of the view updateWidth: function() { if (this.weekNumbersVisible) { // Make sure all week number cells running down the side have the same width. // Record the width for cells created later. this.weekNumberWidth = matchCellWidths( this.el.find('.fc-week-number') ); } }, // Adjusts the vertical dimensions of the view to the specified values setHeight: function(totalHeight, isAuto) { var eventLimit = this.opt('eventLimit'); var scrollerHeight; // reset all heights to be natural unsetScroller(this.scrollerEl); uncompensateScroll(this.headRowEl); this.dayGrid.destroySegPopover(); // kill the "more" popover if displayed // is the event limit a constant level number? if (eventLimit && typeof eventLimit === 'number') { this.dayGrid.limitRows(eventLimit); // limit the levels first so the height can redistribute after } scrollerHeight = this.computeScrollerHeight(totalHeight); this.setGridHeight(scrollerHeight, isAuto); // is the event limit dynamically calculated? if (eventLimit && typeof eventLimit !== 'number') { this.dayGrid.limitRows(eventLimit); // limit the levels after the grid's row heights have been set } if (!isAuto && setPotentialScroller(this.scrollerEl, scrollerHeight)) { // using scrollbars? compensateScroll(this.headRowEl, getScrollbarWidths(this.scrollerEl)); // doing the scrollbar compensation might have created text overflow which created more height. redo scrollerHeight = this.computeScrollerHeight(totalHeight); this.scrollerEl.height(scrollerHeight); this.restoreScroll(); } }, // 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 } }, /* 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 View.prototype.renderEvents.call(this, events); // call the super-method }, // Retrieves all segment objects that are rendered in the view getSegs: function() { return this.dayGrid.getSegs(); }, // Unrenders all event elements and clears internal segment data destroyEvents: function() { View.prototype.destroyEvents.call(this); // do this before dayGrid's segs have been cleared this.recordScroll(); // removing events will reduce height and mess with the scroll, so record beforehand this.dayGrid.destroyEvents(); // 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 }, /* Event Dragging ------------------------------------------------------------------------------------------------------------------*/ // Renders a visual indication of an event being dragged over the view. // A returned value of `true` signals that a mock "helper" event has been rendered. renderDrag: function(start, end, seg) { return this.dayGrid.renderDrag(start, end, seg); }, // Unrenders the visual indication of an event being dragged over the view destroyDrag: function() { this.dayGrid.destroyDrag(); }, /* Selection ------------------------------------------------------------------------------------------------------------------*/ // Renders a visual indication of a selection renderSelection: function(start, end) { this.dayGrid.renderSelection(start, end); }, // Unrenders a visual indications of a selection destroySelection: function() { this.dayGrid.destroySelection(); } }); ;; /* A month view with day cells running in rows (one-per-week) and columns ----------------------------------------------------------------------------------------------------------------------*/ setDefaults({ fixedWeekCount: true }); fcViews.month = MonthView; // register the view function MonthView(calendar) { BasicView.call(this, calendar); // call the super-constructor } MonthView.prototype = createObject(BasicView.prototype); // define the super-class $.extend(MonthView.prototype, { name: 'month', incrementDate: function(date, delta) { return date.clone().stripTime().add(delta, 'months').startOf('month'); }, render: function(date) { var rowCnt; this.intervalStart = date.clone().stripTime().startOf('month'); this.intervalEnd = this.intervalStart.clone().add(1, 'months'); this.start = this.intervalStart.clone(); this.start = this.skipHiddenDays(this.start); // move past the first week if no visible days this.start.startOf('week'); this.start = this.skipHiddenDays(this.start); // move past the first invisible days of the week this.end = this.intervalEnd.clone(); this.end = this.skipHiddenDays(this.end, -1, true); // move in from the last week if no visible days this.end.add((7 - this.end.weekday()) % 7, 'days'); // move to end of week if not already this.end = this.skipHiddenDays(this.end, -1, true); // move in from the last invisible days of the week rowCnt = Math.ceil( // need to ceil in case there are hidden days this.end.diff(this.start, 'weeks', true) // returnfloat=true ); if (this.isFixedWeeks()) { this.end.add(6 - rowCnt, 'weeks'); rowCnt = 6; } this.title = this.calendar.formatDate(this.intervalStart, this.opt('titleFormat')); BasicView.prototype.render.call(this, rowCnt, this.getCellsPerWeek(), true); // call the super-method }, // 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'); } }); ;; /* A week view with simple day cells running horizontally ----------------------------------------------------------------------------------------------------------------------*/ // TODO: a WeekView mixin for calculating dates and titles fcViews.basicWeek = BasicWeekView; // register this view function BasicWeekView(calendar) { BasicView.call(this, calendar); // call the super-constructor } BasicWeekView.prototype = createObject(BasicView.prototype); // define the super-class $.extend(BasicWeekView.prototype, { name: 'basicWeek', incrementDate: function(date, delta) { return date.clone().stripTime().add(delta, 'weeks').startOf('week'); }, render: function(date) { this.intervalStart = date.clone().stripTime().startOf('week'); this.intervalEnd = this.intervalStart.clone().add(1, 'weeks'); this.start = this.skipHiddenDays(this.intervalStart); this.end = this.skipHiddenDays(this.intervalEnd, -1, true); this.title = this.calendar.formatRange( this.start, this.end.clone().subtract(1), // make inclusive by subtracting 1 ms this.opt('titleFormat'), ' \u2014 ' // emphasized dash ); BasicView.prototype.render.call(this, 1, this.getCellsPerWeek(), false); // call the super-method } }); ;; /* A view with a single simple day cell ----------------------------------------------------------------------------------------------------------------------*/ fcViews.basicDay = BasicDayView; // register this view function BasicDayView(calendar) { BasicView.call(this, calendar); // call the super-constructor } BasicDayView.prototype = createObject(BasicView.prototype); // define the super-class $.extend(BasicDayView.prototype, { name: 'basicDay', incrementDate: function(date, delta) { var out = date.clone().stripTime().add(delta, 'days'); out = this.skipHiddenDays(out, delta < 0 ? -1 : 1); return out; }, render: function(date) { this.start = this.intervalStart = date.clone().stripTime(); this.end = this.intervalEnd = this.start.clone().add(1, 'days'); this.title = this.calendar.formatDate(this.start, this.opt('titleFormat')); BasicView.prototype.render.call(this, 1, 1, false); // call the super-method } }); ;; /* 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. setDefaults({ allDaySlot: true, allDayText: 'all-day', scrollTime: '06:00:00', slotDuration: '00:30:00', axisFormat: generateAgendaAxisFormat, timeFormat: { agenda: generateAgendaTimeFormat }, minTime: '00:00:00', maxTime: '24:00:00', slotEventOverlap: true }); var AGENDA_ALL_DAY_EVENT_LIMIT = 5; function generateAgendaAxisFormat(options, langData) { return langData.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 } function generateAgendaTimeFormat(options, langData) { return langData.longDateFormat('LT') .replace(/\s*a$/i, ''); // remove trailing AM/PM } function AgendaView(calendar) { View.call(this, calendar); // call the super-constructor this.timeGrid = new TimeGrid(this); if (this.opt('allDaySlot')) { // should we display the "all-day" area? this.dayGrid = new DayGrid(this); // the all-day subcomponent of this view // the coordinate grid will be a combination of both subcomponents' grids this.coordMap = new ComboCoordMap([ this.dayGrid.coordMap, this.timeGrid.coordMap ]); } else { this.coordMap = this.timeGrid.coordMap; } } AgendaView.prototype = createObject(View.prototype); // define the super-class $.extend(AgendaView.prototype, { timeGrid: null, // the main time-grid subcomponent of this view 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 noScrollRowEls: null, // set of fake row elements that must compensate when scrollerEl has scrollbars // when the time-grid isn't tall enough to occupy the given height, we render an
underneath bottomRuleEl: null, bottomRuleHeight: null, /* Rendering ------------------------------------------------------------------------------------------------------------------*/ // Renders the view into `this.el`, which has already been assigned. // `colCnt` has been calculated by a subclass and passed here. render: function(colCnt) { // needed for cell-to-date and date-to-cell calculations in View this.rowCnt = 1; this.colCnt = colCnt; this.el.addClass('fc-agenda-view').html(this.renderHtml()); // the element that wraps the time-grid that will probably scroll this.scrollerEl = this.el.find('.fc-time-grid-container'); this.timeGrid.coordMap.containerEl = this.scrollerEl; // don't accept clicks/etc outside of this this.timeGrid.el = this.el.find('.fc-time-grid'); this.timeGrid.render(); // 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.el = this.el.find('.fc-day-grid'); this.dayGrid.render(); // 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 View.prototype.render.call(this); // call the super-method this.resetScroll(); // do this after sizes have been set }, // Make subcomponents ready for cleanup destroy: function() { this.timeGrid.destroy(); if (this.dayGrid) { this.dayGrid.destroy(); } View.prototype.destroy.call(this); // call the super-method }, // Builds the HTML skeleton for the view. // The day-grid and time-grid components will render inside containers defined by this HTML. renderHtml: function() { return '' + '
'; } if (endCol > startCol) { cellHtml += ''; } if (colCnt > endCol) { cellHtml += ''; } cellHtml = this.bookendCells(cellHtml, 'highlight'); return '' + '
' + '' + '' + cellHtml + '' + '
' + '
'; } }); ;; /* Event-rendering methods for the DayGrid class ----------------------------------------------------------------------------------------------------------------------*/ $.extend(DayGrid.prototype, { segs: null, rowStructs: null, // an array of objects, each holding information about a row's event-rendering // Render the given events onto the Grid and return the rendered segments renderEvents: function(events) { var rowStructs = this.rowStructs = this.renderEventRows(events); var segs = []; // append to each row's content skeleton this.rowEls.each(function(i, rowNode) { $(rowNode).find('.fc-content-skeleton > table').append( rowStructs[i].tbodyEl ); segs.push.apply(segs, rowStructs[i].segs); }); this.segs = segs; }, // Retrieves all segment objects that have been rendered getSegs: function() { return (this.segs || []).concat( this.popoverSegs || [] // segs rendered in the "more" events popover ); }, // Removes all rendered event elements destroyEvents: function() { var rowStructs; var rowStruct; Grid.prototype.destroyEvents.call(this); // call the super-method rowStructs = this.rowStructs || []; while ((rowStruct = rowStructs.pop())) { rowStruct.tbodyEl.remove(); } this.segs = null; this.destroySegPopover(); // removes the "more.." events popover }, // Uses the given events array to generate
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 = $('
').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, 'eventSkeleton'); 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. 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. segs.sort(compareSegs); 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 view = this.view; var segRows = []; var i; for (i = 0; i < view.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 ----------------------------------------------------------------------------------------------------------------------*/ $.extend(DayGrid.prototype, { 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 destroySegPopover: function() { if (this.segPopover) { this.segPopover.hide(); // will trigger destruction of `segPopover` and `popoverSegs` } }, // 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; // Reveal one level
DOM nodes var col = 0; // col # var cell; 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
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) { cell = { row: row, col: col }; segsBelow = _this.getCellSegs(cell, levelLimit); if (segsBelow.length) { td = cellMatrix[levelLimit - 1][col]; moreLink = _this.renderMoreLink(cell, 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
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]; cell = { row: row, col: seg.leftCol + j }; moreLink = this.renderMoreLink(cell, [ 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(view.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(cell, 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 = view.cellToDate(cell); var moreEl = $(this); var dayEl = _this.getCellDayEl(cell); var allSegs = _this.getCellSegs(cell); // 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(date, cell, 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(date, cell, moreLink, segs) { var _this = this; var view = this.view; var moreWrap = moreLink.parent(); // the to avoid border confusion. if (view.opt('isRTL')) { options.right = moreWrap.offset().left + moreWrap.outerWidth() + 1; // +1 to be over cell border } else { options.left = moreWrap.offset().left - 1; // -1 to be over cell border } this.segPopover = new Popover(options); this.segPopover.show(); }, // Builds the inner DOM contents of the segment popover renderSegPopoverContent: function(date, segs) { var view = this.view; var isTheme = view.opt('theme'); var title = date.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.renderSegs(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 segs[i].cellDate = date; 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) { var events = $.map(segs, function(seg) { return seg.event; }); var dayStart = dayDate.clone().stripTime(); var dayEnd = dayStart.clone().add(1, 'days'); return this.eventsToSegs(events, dayStart, dayEnd); }, // Generates the text that should be inside a "more" link, given the number of events it represents getMoreLinkText: function(num) { var view = this.view; var opt = 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(cell, startLevel) { var segMatrix = this.rowStructs[cell.row].segMatrix; var level = startLevel || 0; var segs = []; var seg; while (level < segMatrix.length) { seg = segMatrix[level][cell.col]; if (seg) { segs.push(seg); } level++; } return segs; } }); ;; /* A component that renders one or more columns of vertical time slots ----------------------------------------------------------------------------------------------------------------------*/ function TimeGrid(view) { Grid.call(this, view); // call the super-constructor } TimeGrid.prototype = createObject(Grid.prototype); // define the super-class $.extend(TimeGrid.prototype, { 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 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 dayEls: null, // cells elements in the day-row background slatEls: null, // elements running horizontally across all columns slatTops: null, // an array of top positions, relative to the container. last item holds bottom of last slot highlightEl: null, // cell skeleton element for rendering the highlight helperEl: null, // cell skeleton element for rendering the mock event "helper" // 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. render: function() { this.processOptions(); this.el.html(this.renderHtml()); this.dayEls = this.el.find('.fc-day'); this.slatEls = this.el.find('.fc-slats tr'); this.computeSlatTops(); Grid.prototype.render.call(this); // call the super-method }, // Renders the basic HTML skeleton for the grid renderHtml: function() { return '' + '
' + '' + this.rowHtml('slotBg') + // leverages RowRenderer, which will call slotBgCellHtml '
' + '
' + '
' + '' + this.slatRowHtml() + '
' + '
'; }, // Renders the HTML for a vertical background cell behind the slots. // This method is distinct from 'bg' because we wanted a new `rowType` so the View could customize the rendering. slotBgCellHtml: function(row, col, date) { return this.bgCellHtml(row, col, date); }, // Generates the HTML for the horizontal "slats" that run width-wise. Has a time axis on a side. Depends on RTL. slatRowHtml: function() { var view = this.view; var calendar = view.calendar; var isRTL = view.opt('isRTL'); var html = ''; var slotNormal = this.slotDuration.asMinutes() % 15 === 0; 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 minutes; var axisHtml; // Calculate the time for each slot while (slotTime < this.maxTime) { slotDate = view.start.clone().time(slotTime); // will be in UTC but that's good. to avoid DST issues minutes = slotDate.minutes(); axisHtml = '
' + ((!slotNormal || !minutes) ? // if irregular slot duration, or on the hour, then display the time '' + // for matchCellWidths htmlEscape(calendar.formatDate(slotDate, view.opt('axisFormat'))) + '' : '' ) + '
' + (isRTL ? axisHtml : '') + "
'; col = seg.col; } // compute vertical position dayDate = view.cellToDate(0, col); top = this.computeDateTop(seg.start, dayDate); bottom = this.computeDateTop(seg.end, dayDate); // the y position of the bottom edge // generate the cell HTML. bottom becomes negative because it needs to be a CSS value relative to the // bottom edge of the zero-height container. cellHtml += '' + '
' + '
' + '
' + '
'; } cellHtml = this.bookendCells(cellHtml, 'highlight'); return '' + '
' + '' + '' + cellHtml + '' + '
' + '
'; } }); ;; /* Event-rendering methods for the TimeGrid class ----------------------------------------------------------------------------------------------------------------------*/ $.extend(TimeGrid.prototype, { segs: null, // segment objects rendered in the component. null of events haven't been rendered yet eventSkeletonEl: null, // has cells with event-containers, which contain absolutely positioned event elements // Renders the events onto the grid and returns an array of segments that have been rendered renderEvents: function(events) { var res = this.renderEventTable(events); this.eventSkeletonEl = $('
').append(res.tableEl); this.el.append(this.eventSkeletonEl); this.segs = res.segs; }, // Retrieves rendered segment objects getSegs: function() { return this.segs || []; }, // Removes all event segment elements from the view destroyEvents: function() { Grid.prototype.destroyEvents.call(this); // call the super-method if (this.eventSkeletonEl) { this.eventSkeletonEl.remove(); this.eventSkeletonEl = null; } this.segs = null; }, // Renders and returns the portion of the event-skeleton. // Returns an object with properties 'tbodyEl' and 'segs'. renderEventTable: function(events) { var tableEl = $('
'); var trEl = tableEl.find('tr'); var segs = this.eventsToSegs(events); var segCols; var i, seg; var col, colSegs; var containerEl; segs = this.renderSegs(segs); // returns only the visible segs segCols = this.groupSegCols(segs); // group into sub-arrays, and assigns 'col' to each seg this.computeSegVerticals(segs); // compute and assign top/bottom for (col = 0; col < segCols.length; col++) { // iterate each column grouping colSegs = segCols[col]; placeSlotSegs(colSegs); // compute horizontal coordinates, z-index's, and reorder the array containerEl = $('
'); // assign positioning CSS and insert into container for (i = 0; i < colSegs.length; i++) { seg = colSegs[i]; seg.el.css(this.generateSegPositionCss(seg)); // if the height is short, add a className for alternate styling if (seg.bottom - seg.top < 30) { seg.el.addClass('fc-short'); } containerEl.append(seg.el); } trEl.append($('
').append(containerEl)); } this.bookendCells(trEl, 'eventSkeleton'); return { tableEl: tableEl, segs: segs }; }, // Refreshes the CSS top/bottom coordinates for each segment element. Probably after a window resize/zoom. updateSegVerticals: function() { var segs = this.segs; var i; if (segs) { this.computeSegVerticals(segs); for (i = 0; i < segs.length; i++) { segs[i].el.css( this.generateSegVerticalCss(segs[i]) ); } } }, // 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); } }, // Renders the HTML for a single event segment's default rendering renderSegHtml: function(seg, disableResizing) { var view = this.view; var event = seg.event; var isDraggable = view.isEventDraggable(event); var isResizable = !disableResizing && seg.isEnd && view.isEventResizable(event); var classes = this.getSegClasses(seg, isDraggable, isResizable); var skinCss = this.getEventSkinCss(event); 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'); 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 = view.getEventTimeText(seg.start, seg.end); fullTimeText = view.getEventTimeText(seg.start, seg.end, 'LT'); startTimeText = view.getEventTimeText(seg.start, null); } } else { // Display the normal time text for the *event's* times timeText = view.getEventTimeText(event); fullTimeText = view.getEventTimeText(event, 'LT'); startTimeText = view.getEventTimeText(event.start, null); } return '' + '
' + (timeText ? '
' + '' + htmlEscape(timeText) + '' + '
' : '' ) + (event.title ? '
' + htmlEscape(event.title) + '
' : '' ) + '
' + '
' + (isResizable ? '
' : '' ) + ''; }, // Generates an object with CSS properties/values that should be applied to an event segment element. // Contains important positioning-related properties that should be applied to any event element, customized or not. generateSegPositionCss: function(seg) { var view = this.view; var isRTL = view.opt('isRTL'); var shouldOverlap = view.opt('slotEventOverlap'); var backwardCoord = seg.backwardCoord; // the left side if LTR. the right side if RTL. floating-point var forwardCoord = seg.forwardCoord; // the right side if LTR. the left side if RTL. floating-point var props = this.generateSegVerticalCss(seg); // get top/bottom first var left; // amount of space from left edge, a fraction of the total width var right; // amount of space from right edge, a fraction of the total width if (shouldOverlap) { // double the width, but don't go beyond the maximum forward coordinate (1.0) forwardCoord = Math.min(1, backwardCoord + (forwardCoord - backwardCoord) * 2); } if (isRTL) { left = 1 - forwardCoord; right = backwardCoord; } else { left = backwardCoord; right = 1 - forwardCoord; } props.zIndex = seg.level + 1; // convert from 0-base to 1-based props.left = left * 100 + '%'; props.right = right * 100 + '%'; if (shouldOverlap && seg.forwardPressure) { // add padding to the edge so that forward stacked events don't cover the resizer's icon props[isRTL ? 'marginLeft' : 'marginRight'] = 10 * 2; // 10 is a guesstimate of the icon's width } return props; }, // Generates an object with CSS properties for the top/bottom coordinates of a segment element generateSegVerticalCss: function(seg) { return { top: seg.top, bottom: -seg.bottom // flipped because needs to be space beyond bottom edge of event container }; }, // Given a flat array of segments, return an array of sub-arrays, grouped by each segment's col groupSegCols: function(segs) { var view = this.view; var segCols = []; var i; for (i = 0; i < view.colCnt; i++) { segCols.push([]); } for (i = 0; i < segs.length; i++) { segCols[segs[i].col].push(segs[i]); } return segCols; } }); // Given an array of segments that are all in the same column, sets the backwardCoord and forwardCoord on each. // Also reorders the given array by date! function placeSlotSegs(segs) { var levels; var level0; var i; segs.sort(compareSegs); // order by date 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++) { computeSlotSegCoords(level0[i], 0, 0); } } } // Builds an array of segments "levels". The first level will be the leftmost tier of segments if the calendar is // left-to-right, or the rightmost if the calendar is right-to-left. Assumes the segments are already ordered by date. function buildSlotSegLevels(segs) { var levels = []; var i, seg; var j; for (i=0; i seg2.top && seg1.top < seg2.bottom; } // A cmp function for determining which forward segment to rely on more when computing coordinates. function compareForwardSlotSegs(seg1, seg2) { // put higher-pressure first return seg2.forwardPressure - seg1.forwardPressure || // put segments that are closer to initial edge first (and favor ones with no coords yet) (seg1.backwardCoord || 0) - (seg2.backwardCoord || 0) || // do normal sorting... compareSegs(seg1, seg2); } ;; /* An abstract class from which other views inherit from ----------------------------------------------------------------------------------------------------------------------*/ // Newer methods should be written as prototype methods, not in the monster `View` function at the bottom. View.prototype = { calendar: null, // owner Calendar object coordMap: null, // a CoordMap object for converting pixel regions to dates el: null, // the view's containing element. set by Calendar // important Moments start: null, // the date of the very first cell end: null, // the date after the very last cell intervalStart: null, // the start of the interval of time the view represents (1st of month for month view) intervalEnd: null, // the exclusive end of the interval of time the view represents // used for cell-to-date and date-to-cell calculations rowCnt: null, // # of weeks colCnt: null, // # of days displayed in a week isSelected: false, // boolean whether cells are user-selected or not // subclasses can optionally use a scroll container scrollerEl: null, // the element that will most likely scroll when content is too tall scrollTop: null, // cached vertical scroll value // classNames styled by jqui themes widgetHeaderClass: null, widgetContentClass: null, highlightStateClass: null, // document handlers, bound to `this` object documentMousedownProxy: null, documentDragStartProxy: null, // Serves as a "constructor" to suppliment the monster `View` constructor below init: function() { var tm = this.opt('theme') ? 'ui' : 'fc'; this.widgetHeaderClass = tm + '-widget-header'; this.widgetContentClass = tm + '-widget-content'; this.highlightStateClass = tm + '-state-highlight'; // save references to `this`-bound handlers this.documentMousedownProxy = $.proxy(this, 'documentMousedown'); this.documentDragStartProxy = $.proxy(this, 'documentDragStart'); }, // Renders the view inside an already-defined `this.el`. // Subclasses should override this and then call the super method afterwards. render: function() { this.updateSize(); this.trigger('viewRender', this, this, this.el); // attach handlers to document. do it here to allow for destroy/rerender $(document) .on('mousedown', this.documentMousedownProxy) .on('dragstart', this.documentDragStartProxy); // jqui drag }, // Clears all view rendering, event elements, and unregisters handlers destroy: function() { this.unselect(); this.trigger('viewDestroy', this, this, this.el); this.destroyEvents(); this.el.empty(); // removes inner contents but leaves the element intact $(document) .off('mousedown', this.documentMousedownProxy) .off('dragstart', this.documentDragStartProxy); }, // Used to determine what happens when the users clicks next/prev. Given -1 for prev, 1 for next. // Should apply the delta to `date` (a Moment) and return it. incrementDate: function(date, delta) { // subclasses should implement }, /* Dimensions ------------------------------------------------------------------------------------------------------------------*/ // Refreshes anything dependant upon sizing of the container element of the grid updateSize: function(isResize) { if (isResize) { this.recordScroll(); } this.updateHeight(); this.updateWidth(); }, // Refreshes the horizontal dimensions of the calendar updateWidth: function() { // subclasses should implement }, // Refreshes the vertical dimensions of the calendar updateHeight: function() { 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 }, // Given the total height of the view, return the number of pixels that should be used for the scroller. // Utility for subclasses. computeScrollerHeight: function(totalHeight) { var both = this.el.add(this.scrollerEl); var otherHeight; // cumulative height of everything that is not the scrollerEl in the view (header+borders) // fuckin IE8/9/10/11 sometimes returns 0 for dimensions. this weird hack was the only thing that worked both.css({ position: 'relative', // cause a reflow, which will force fresh dimension recalculation left: -1 // ensure reflow in case the el was already relative. negative is less likely to cause new scroll }); otherHeight = this.el.outerHeight() - this.scrollerEl.height(); // grab the dimensions both.css({ position: '', left: '' }); // undo hack return totalHeight - otherHeight; }, // Called for remembering the current scroll value of the scroller. // Should be called before there is a destructive operation (like removing DOM elements) that might inadvertently // change the scroll of the container. recordScroll: function() { if (this.scrollerEl) { this.scrollTop = this.scrollerEl.scrollTop(); } }, // Set the scroll value of the scroller to the previously recorded value. // Should be called after we know the view's dimensions have been restored following some type of destructive // operation (like temporarily removing DOM elements). restoreScroll: function() { if (this.scrollTop !== null) { this.scrollerEl.scrollTop(this.scrollTop); } }, /* Events ------------------------------------------------------------------------------------------------------------------*/ // Renders the events onto the view. // Should be overriden by subclasses. Subclasses should call the super-method afterwards. renderEvents: function(events) { this.segEach(function(seg) { this.trigger('eventAfterRender', seg.event, seg.event, seg.el); }); this.trigger('eventAfterAllRender'); }, // Removes event elements from the view. // Should be overridden by subclasses. Should call this super-method FIRST, then subclass DOM destruction. destroyEvents: function() { this.segEach(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.segEach(function(seg) { seg.el.css('visibility', ''); }, event); }, // Shows all rendered event segments linked to the given event hideEvent: function(event) { this.segEach(function(seg) { seg.el.css('visibility', 'hidden'); }, event); }, // Iterates through event segments. 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. segEach: function(func, event) { var segs = this.getSegs(); var i; for (i = 0; i < segs.length; i++) { if (!event || segs[i].event._id === event._id) { func.call(this, segs[i]); } } }, // Retrieves all the rendered segment objects for the view getSegs: function() { // subclasses must implement }, /* Event Drag Visualization ------------------------------------------------------------------------------------------------------------------*/ // Renders a visual indication of an event hovering over the specified date. // `end` is a Moment and might be null. // `seg` might be null. if specified, it is the segment object of the event being dragged. // otherwise, an external event from outside the calendar is being dragged. renderDrag: function(start, end, seg) { // subclasses should implement }, // Unrenders a visual indication of event hovering destroyDrag: function() { // subclasses should implement }, // Handler for accepting externally dragged events being dropped in the view. // Gets called when jqui's 'dragstart' is fired. documentDragStart: function(ev, ui) { var _this = this; var dropDate = null; var dragListener; if (this.opt('droppable')) { // only listen if this setting is on // listener that tracks mouse movement over date-associated pixel regions dragListener = new DragListener(this.coordMap, { cellOver: function(cell, date) { dropDate = date; _this.renderDrag(date); }, cellOut: function() { dropDate = null; _this.destroyDrag(); } }); // gets called, only once, when jqui drag is finished $(document).one('dragstop', function(ev, ui) { _this.destroyDrag(); if (dropDate) { _this.trigger('drop', ev.target, dropDate, ev, ui); } }); dragListener.startDrag(ev); // start listening immediately } }, /* Selection ------------------------------------------------------------------------------------------------------------------*/ // Selects a date range on the view. `start` and `end` are both Moments. // `ev` is the native mouse event that begin the interaction. select: function(start, end, ev) { this.unselect(ev); this.renderSelection(start, end); this.reportSelection(start, end, ev); }, // Renders a visual indication of the selection renderSelection: function(start, end) { // subclasses should implement }, // Called when a new selection is made. Updates internal state and triggers handlers. reportSelection: function(start, end, ev) { this.isSelected = true; this.trigger('select', null, start, 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; this.destroySelection(); this.trigger('unselect', null, ev); } }, // Unrenders a visual indication of selection destroySelection: function() { // subclasses should implement }, // Handler for unselecting when the user clicks something and the 'unselectAuto' setting is on documentMousedown: function(ev) { var ignore; // is there a selection, and has the user made a proper left click? if (this.isSelected && this.opt('unselectAuto') && isPrimaryMouseButton(ev)) { // only unselect if the clicked element is not identical to or inside of an 'unselectCancel' element ignore = this.opt('unselectCancel'); if (!ignore || !$(ev.target).closest(ignore).length) { this.unselect(ev); } } } }; // We are mixing JavaScript OOP design patterns here by putting methods and member variables in the closed scope of the // constructor. Going forward, methods should be part of the prototype. function View(calendar) { var t = this; // exports t.calendar = calendar; t.opt = opt; t.trigger = trigger; t.isEventDraggable = isEventDraggable; t.isEventResizable = isEventResizable; t.eventDrop = eventDrop; t.eventResize = eventResize; // imports var reportEventChange = calendar.reportEventChange; // locals var options = calendar.options; var nextDayThreshold = moment.duration(options.nextDayThreshold); t.init(); // the "constructor" that concerns the prototype methods function opt(name) { var v = options[name]; if ($.isPlainObject(v) && !isForcedAtomicOption(name)) { return smartProperty(v, t.name); } return v; } function trigger(name, thisObj) { return calendar.trigger.apply( calendar, [name, thisObj || t].concat(Array.prototype.slice.call(arguments, 2), [t]) ); } /* Event Editable Boolean Calculations ------------------------------------------------------------------------------*/ function isEventDraggable(event) { var source = event.source || {}; return firstDefined( event.startEditable, source.startEditable, opt('eventStartEditable'), event.editable, source.editable, opt('editable') ); } function isEventResizable(event) { var source = event.source || {}; return firstDefined( event.durationEditable, source.durationEditable, opt('eventDurationEditable'), event.editable, source.editable, opt('editable') ); } /* Event Elements ------------------------------------------------------------------------------*/ // Compute the text that should be displayed on an event's element. // Based off the settings of the view. Possible signatures: // .getEventTimeText(event, formatStr) // .getEventTimeText(startMoment, endMoment, formatStr) // .getEventTimeText(startMoment, null, formatStr) // `timeFormat` is used but the `formatStr` argument can be used to override. t.getEventTimeText = function(event, formatStr) { var start; var end; if (typeof event === 'object' && typeof formatStr === 'object') { // first two arguments are actually moments (or null). shift arguments. start = event; end = formatStr; formatStr = arguments[2]; } else { // otherwise, an event object was the first argument start = event.start; end = event.end; } formatStr = formatStr || opt('timeFormat'); if (end && opt('displayEventEnd')) { return calendar.formatRange(start, end, formatStr); } else { return calendar.formatDate(start, formatStr); } }; /* Event Modification Reporting ---------------------------------------------------------------------------------*/ function eventDrop(el, event, newStart, ev) { var mutateResult = calendar.mutateEvent(event, newStart, null); trigger( 'eventDrop', el, event, mutateResult.dateDelta, function() { mutateResult.undo(); reportEventChange(); }, ev, {} // jqui dummy ); reportEventChange(); } function eventResize(el, event, newEnd, ev) { var mutateResult = calendar.mutateEvent(event, null, newEnd); trigger( 'eventResize', el, event, mutateResult.durationDelta, function() { mutateResult.undo(); reportEventChange(); }, ev, {} // jqui dummy ); reportEventChange(); } // ==================================================================================================== // Utilities for day "cells" // ==================================================================================================== // The "basic" views are completely made up of day cells. // The "agenda" views have day cells at the top "all day" slot. // This was the obvious common place to put these utilities, but they should be abstracted out into // a more meaningful class (like DayEventRenderer). // ==================================================================================================== // For determining how a given "cell" translates into a "date": // // 1. Convert the "cell" (row and column) into a "cell offset" (the # of the cell, cronologically from the first). // Keep in mind that column indices are inverted with isRTL. This is taken into account. // // 2. Convert the "cell offset" to a "day offset" (the # of days since the first visible day in the view). // // 3. Convert the "day offset" into a "date" (a Moment). // // The reverse transformation happens when transforming a date into a cell. // exports t.isHiddenDay = isHiddenDay; t.skipHiddenDays = skipHiddenDays; t.getCellsPerWeek = getCellsPerWeek; t.dateToCell = dateToCell; t.dateToDayOffset = dateToDayOffset; t.dayOffsetToCellOffset = dayOffsetToCellOffset; t.cellOffsetToCell = cellOffsetToCell; t.cellToDate = cellToDate; t.cellToCellOffset = cellToCellOffset; t.cellOffsetToDayOffset = cellOffsetToDayOffset; t.dayOffsetToDate = dayOffsetToDate; t.rangeToSegments = rangeToSegments; t.isMultiDayEvent = isMultiDayEvent; // internals var hiddenDays = 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 cellsPerWeek; var dayToCellMap = []; // hash from dayIndex -> cellIndex, for one week var cellToDayMap = []; // hash from cellIndex -> dayIndex, for one week var isRTL = opt('isRTL'); // initialize important internal variables (function() { if (opt('weekends') === false) { hiddenDays.push(0, 6); // 0=sunday, 6=saturday } // Loop through a hypothetical week and determine which // days-of-week are hidden. Record in both hashes (one is the reverse of the other). for (var dayIndex=0, cellIndex=0; dayIndex<7; dayIndex++) { dayToCellMap[dayIndex] = cellIndex; isHiddenDayHash[dayIndex] = $.inArray(dayIndex, hiddenDays) != -1; if (!isHiddenDayHash[dayIndex]) { cellToDayMap[cellIndex] = dayIndex; cellIndex++; } } cellsPerWeek = cellIndex; if (!cellsPerWeek) { throw 'invalid hiddenDays'; // all days were hidden? bad. } })(); // Is the current day hidden? // `day` is a day-of-week index (0-6), or a Moment function isHiddenDay(day) { if (moment.isMoment(day)) { day = day.day(); } return isHiddenDayHash[day]; } function getCellsPerWeek() { return cellsPerWeek; } // 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) function skipHiddenDays(date, inc, isExclusive) { var out = date.clone(); inc = inc || 1; while ( isHiddenDayHash[(out.day() + (isExclusive ? inc : 0) + 7) % 7] ) { out.add(inc, 'days'); } return out; } // // TRANSFORMATIONS: cell -> cell offset -> day offset -> date // // cell -> date (combines all transformations) // Possible arguments: // - row, col // - { row:#, col: # } function cellToDate() { var cellOffset = cellToCellOffset.apply(null, arguments); var dayOffset = cellOffsetToDayOffset(cellOffset); var date = dayOffsetToDate(dayOffset); return date; } // cell -> cell offset // Possible arguments: // - row, col // - { row:#, col:# } function cellToCellOffset(row, col) { var colCnt = t.colCnt; // rtl variables. wish we could pre-populate these. but where? var dis = isRTL ? -1 : 1; var dit = isRTL ? colCnt - 1 : 0; if (typeof row == 'object') { col = row.col; row = row.row; } var cellOffset = row * colCnt + (col * dis + dit); // column, adjusted for RTL (dis & dit) return cellOffset; } // cell offset -> day offset function cellOffsetToDayOffset(cellOffset) { var day0 = t.start.day(); // first date's day of week cellOffset += dayToCellMap[day0]; // normlize cellOffset to beginning-of-week return Math.floor(cellOffset / cellsPerWeek) * 7 + // # of days from full weeks cellToDayMap[ // # of days from partial last week (cellOffset % cellsPerWeek + cellsPerWeek) % cellsPerWeek // crazy math to handle negative cellOffsets ] - day0; // adjustment for beginning-of-week normalization } // day offset -> date function dayOffsetToDate(dayOffset) { return t.start.clone().add(dayOffset, 'days'); } // // TRANSFORMATIONS: date -> day offset -> cell offset -> cell // // date -> cell (combines all transformations) function dateToCell(date) { var dayOffset = dateToDayOffset(date); var cellOffset = dayOffsetToCellOffset(dayOffset); var cell = cellOffsetToCell(cellOffset); return cell; } // date -> day offset function dateToDayOffset(date) { return date.clone().stripTime().diff(t.start, 'days'); } // day offset -> cell offset function dayOffsetToCellOffset(dayOffset) { var day0 = t.start.day(); // first date's day of week dayOffset += day0; // normalize dayOffset to beginning-of-week return Math.floor(dayOffset / 7) * cellsPerWeek + // # of cells from full weeks dayToCellMap[ // # of cells from partial last week (dayOffset % 7 + 7) % 7 // crazy math to handle negative dayOffsets ] - dayToCellMap[day0]; // adjustment for beginning-of-week normalization } // cell offset -> cell (object with row & col keys) function cellOffsetToCell(cellOffset) { var colCnt = t.colCnt; // rtl variables. wish we could pre-populate these. but where? var dis = isRTL ? -1 : 1; var dit = isRTL ? colCnt - 1 : 0; var row = Math.floor(cellOffset / colCnt); var col = ((cellOffset % colCnt + colCnt) % colCnt) * dis + dit; // column, adjusted for RTL (dis & dit) return { row: row, col: col }; } // // Converts a date range into an array of segment objects. // "Segments" are horizontal stretches of time, sliced up by row. // A segment object has the following properties: // - row // - cols // - isStart // - isEnd // function rangeToSegments(start, end) { var rowCnt = t.rowCnt; var colCnt = t.colCnt; var segments = []; // array of segments to return // day offset for given date range var dayRange = computeDayRange(start, end); // convert to a whole-day range var rangeDayOffsetStart = dateToDayOffset(dayRange.start); var rangeDayOffsetEnd = dateToDayOffset(dayRange.end); // an exclusive value // first and last cell offset for the given date range // "last" implies inclusivity var rangeCellOffsetFirst = dayOffsetToCellOffset(rangeDayOffsetStart); var rangeCellOffsetLast = dayOffsetToCellOffset(rangeDayOffsetEnd) - 1; // loop through all the rows in the view for (var row=0; row
' + '' + // needed for matchCellWidths htmlEscape(this.opt('weekNumberTitle')) + '' + '' + '' + // needed for matchCellWidths this.calendar.calculateWeekNumber(this.cellToDate(row, 0)) + '' + '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. numberCellHtml: function(row, col, date) { var classes; if (!this.dayNumbersVisible) { // if there are week numbers but not day numbers return ''; // will create an empty space above events :( } classes = this.dayGrid.getDayClasses(date); classes.unshift('fc-day-number'); return '' + '' + date.date() + '
' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '
' + this.timeGrid.headHtml() + // render the day-of-week headers '
' + (this.dayGrid ? '
' + '
' : '' ) + '
' + '
' + '
' + '
'; }, // Generates the HTML that will go before the day-of week header cells. // Queried by the TimeGrid subcomponent when generating rows. Ordering depends on isRTL. headIntroHtml: function() { var date; var weekNumber; var weekTitle; var weekText; if (this.opt('weekNumbers')) { date = this.cellToDate(0, 0); weekNumber = this.calendar.calculateWeekNumber(date); weekTitle = this.opt('weekNumberTitle'); if (this.opt('isRTL')) { weekText = weekNumber + weekTitle; } else { weekText = weekTitle + weekNumber; } return '' + '' + '' + // needed for matchCellWidths htmlEscape(weekText) + '' + ''; } else { return ''; } }, // Generates the HTML that goes before the all-day cells. // Queried by the DayGrid subcomponent when generating rows. Ordering depends on isRTL. dayIntroHtml: function() { return '' + '' + '' + // needed for matchCellWidths (this.opt('allDayHtml') || htmlEscape(this.opt('allDayText'))) + '' + ''; }, // Generates the HTML that goes before the bg of the TimeGrid slot area. Long vertical column. slotBgIntroHtml: function() { 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. // Queried by the TimeGrid and DayGrid subcomponents when generating rows. Ordering depends on isRTL. introHtml: function() { return ''; }, // Generates an HTML attribute string for setting the width of the axis, if it is known axisStyleAttr: function() { if (this.axisWidth !== null) { return 'style="width:' + this.axisWidth + 'px"'; } return ''; }, /* Dimensions ------------------------------------------------------------------------------------------------------------------*/ updateSize: function(isResize) { if (isResize) { this.timeGrid.resize(); } View.prototype.updateSize.call(this, isResize); }, // Refreshes the horizontal dimensions of the view updateWidth: function() { // make all axis cells line up, and record the width so newly created axis cells will have it this.axisWidth = matchCellWidths(this.el.find('.fc-axis')); }, // Adjusts the vertical dimensions of the view to the specified values setHeight: function(totalHeight, isAuto) { var eventLimit; var scrollerHeight; if (this.bottomRuleHeight === null) { // calculate the height of the rule the very first time this.bottomRuleHeight = this.bottomRuleEl.outerHeight(); } this.bottomRuleEl.hide(); // .show() will be called later if this
is necessary // reset all dimensions back to the original state this.scrollerEl.css('overflow', ''); unsetScroller(this.scrollerEl); uncompensateScroll(this.noScrollRowEls); // limit number of events in the all-day area if (this.dayGrid) { this.dayGrid.destroySegPopover(); // kill the "more" popover if displayed eventLimit = this.opt('eventLimit'); if (eventLimit && typeof eventLimit !== 'number') { eventLimit = AGENDA_ALL_DAY_EVENT_LIMIT; // make sure "auto" goes to a real number } if (eventLimit) { this.dayGrid.limitRows(eventLimit); } } if (!isAuto) { // should we force dimensions of the scroll container, or let the contents be natural height? scrollerHeight = this.computeScrollerHeight(totalHeight); if (setPotentialScroller(this.scrollerEl, scrollerHeight)) { // using scrollbars? // make the all-day and header rows lines up compensateScroll(this.noScrollRowEls, getScrollbarWidths(this.scrollerEl)); // the scrollbar compensation might have changed text flow, which might affect height, so recalculate // and reapply the desired height to the scroller. scrollerHeight = this.computeScrollerHeight(totalHeight); this.scrollerEl.height(scrollerHeight); this.restoreScroll(); } else { // no scrollbars // still, force a height and display the bottom rule (marks the end of day) this.scrollerEl.height(scrollerHeight).css('overflow', 'hidden'); // in case
goes outside this.bottomRuleEl.show(); } } }, // Sets the scroll value of the scroller to the intial pre-configured state prior to allowing the user to change it. resetScroll: function() { var _this = this; 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 } function scroll() { _this.scrollerEl.scrollTop(top); } scroll(); setTimeout(scroll, 0); // overrides any previous scroll state made by the browser }, /* 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(); View.prototype.renderEvents.call(this, events); // call the super-method }, // Retrieves all segment objects that are rendered in the view getSegs: function() { return this.timeGrid.getSegs().concat( this.dayGrid ? this.dayGrid.getSegs() : [] ); }, // Unrenders all event elements and clears internal segment data destroyEvents: function() { View.prototype.destroyEvents.call(this); // do this before the grids' segs have been cleared // if destroyEvents is being called as part of an event rerender, renderEvents will be called shortly // after, so remember what the scroll value was so we can restore it. this.recordScroll(); // destroy the events in the subcomponents this.timeGrid.destroyEvents(); if (this.dayGrid) { this.dayGrid.destroyEvents(); } // 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 }, /* Event Dragging ------------------------------------------------------------------------------------------------------------------*/ // Renders a visual indication of an event being dragged over the view. // A returned value of `true` signals that a mock "helper" event has been rendered. renderDrag: function(start, end, seg) { if (start.hasTime()) { return this.timeGrid.renderDrag(start, end, seg); } else if (this.dayGrid) { return this.dayGrid.renderDrag(start, end, seg); } }, // Unrenders a visual indications of an event being dragged over the view destroyDrag: function() { this.timeGrid.destroyDrag(); if (this.dayGrid) { this.dayGrid.destroyDrag(); } }, /* Selection ------------------------------------------------------------------------------------------------------------------*/ // Renders a visual indication of a selection renderSelection: function(start, end) { if (start.hasTime() || end.hasTime()) { this.timeGrid.renderSelection(start, end); } else if (this.dayGrid) { this.dayGrid.renderSelection(start, end); } }, // Unrenders a visual indications of a selection destroySelection: function() { this.timeGrid.destroySelection(); if (this.dayGrid) { this.dayGrid.destroySelection(); } } }); ;; /* A week view with an all-day cell area at the top, and a time grid below ----------------------------------------------------------------------------------------------------------------------*/ // TODO: a WeekView mixin for calculating dates and titles fcViews.agendaWeek = AgendaWeekView; // register the view function AgendaWeekView(calendar) { AgendaView.call(this, calendar); // call the super-constructor } AgendaWeekView.prototype = createObject(AgendaView.prototype); // define the super-class $.extend(AgendaWeekView.prototype, { name: 'agendaWeek', incrementDate: function(date, delta) { return date.clone().stripTime().add(delta, 'weeks').startOf('week'); }, render: function(date) { this.intervalStart = date.clone().stripTime().startOf('week'); this.intervalEnd = this.intervalStart.clone().add(1, 'weeks'); this.start = this.skipHiddenDays(this.intervalStart); this.end = this.skipHiddenDays(this.intervalEnd, -1, true); this.title = this.calendar.formatRange( this.start, this.end.clone().subtract(1), // make inclusive by subtracting 1 ms this.opt('titleFormat'), ' \u2014 ' // emphasized dash ); AgendaView.prototype.render.call(this, this.getCellsPerWeek()); // call the super-method } }); ;; /* A day view with an all-day cell area at the top, and a time grid below ----------------------------------------------------------------------------------------------------------------------*/ fcViews.agendaDay = AgendaDayView; // register the view function AgendaDayView(calendar) { AgendaView.call(this, calendar); // call the super-constructor } AgendaDayView.prototype = createObject(AgendaView.prototype); // define the super-class $.extend(AgendaDayView.prototype, { name: 'agendaDay', incrementDate: function(date, delta) { var out = date.clone().stripTime().add(delta, 'days'); out = this.skipHiddenDays(out, delta < 0 ? -1 : 1); return out; }, render: function(date) { this.start = this.intervalStart = date.clone().stripTime(); this.end = this.intervalEnd = this.start.clone().add(1, 'days'); this.title = this.calendar.formatDate(this.start, this.opt('titleFormat')); AgendaView.prototype.render.call(this, 1); // call the super-method } }); ;; });