/**
 * @class Ext.calendar.view.Base
 * @extend Ext.Gadget
 * @abstract
 * This is a base class for calendar views.  Calendar views display events for a date /
 * time range specified by the view subclasses:
 *
 * - {@link Ext.calendar.view.Day Day}
 * - {@link Ext.calendar.view.Days Days}
 * - {@link Ext.calendar.view.Week Week}
 * - {@link Ext.calendar.view.Weeks Weeks}
 * - {@link Ext.calendar.view.Month Month}
 * - {@link Ext.calendar.view.Multi Multi}
 *
 * By default, the view will display the current date along with any other dates surround
 * that date as specified by the particular view type.  A target date can be specified
 * by setting the {@link #cfg-value} config option.
 *
 * ### Sample View
 *
 * Below is a sample view instance.  The following example shows how to create a day view,
 * but the basic configuration applies to all view subclasses with the exception of the
 * xtype used.
 *
 *     store = new Ext.data.Store({
 *         autoLoad: true,
 *         proxy: {
 *             type: 'ajax',
 *             url: 'calendars.php'
 *         },
 *         eventStoreDefaults: {
 *             proxy: {
 *                 type: 'ajax',
 *                 url: 'events.php'
 *             }
 *         }
 *     });
 *
 *     <Calendar_DayView
 *         height={400}
 *         width={400}
 *         store={this.store} 
 *         firstDayOfWeek="1" // starts the view on Monday
 *         visibleDays="5" // and displays it and the 4 days after
 *     />
 *
 * **Note:** For more information on possible store configurations and the expected
 * server response for both Calendars and Events stores see:
 * {@link Ext.calendar.store.Calendars}.
 *
 * ### In-View Calendar Events
 *
 * Events show on the view timeline with their start and end times correlating to either
 * the date or the time slots depending on the view type.  The events will display on the
 * timeline according to your local timezone offset from GMT (the expected format for
 * start / end times for events is UTC).  The timezone offset can be applied explicitly
 * using the {@link #cfg-timezoneOffset} config option.  If the view has multiple source
 * calendars, their events will attempt to share overlapping space within their
 * corresponding date / time slots.  Events will be displayed as a different color for
 * each source calendar and their appearance will vary slightly depending on their
 * {@link Ext.calendar.Event.html#cfg-mode mode}.  The overlapping behavior of events
 * competing for the same time slot can be managed using the {@link #cfg-displayOverlap}
 * config option.
 *
 * ### Adding / Editing Events
 *
 * Events may be added to the view by dragging / swiping across the timeline to create
 * the event endpoints.  Doing so shows the {@link Ext.calendar.form.Add add event form}
 * with the dates / times pre-populated from the drag selection.  The
 * {@link #cfg-allowSelection} config can be set to false to prevent user from creating
 * events in this way.  Events added programmatically by calling the
 * {@link #method-showAddForm} method to present the add input form.  Set the view's
 * {@link #cfg-addForm} config to `null` to prevent events from being added to the
 * calendar.
 *
 * Double clicking / tapping an event within the view shows the
 * {@link Ext.calendar.form.Edit edit event form} allowing events to be edited by users.
 * The add form and edit form can be configured using the view's {@link #cfg-addForm} and
 * {@link #cfg-editForm} configs.  For views with time displayed on the y axis of the
 * view (Day, Days, and Week), existing events can be resized using the resize handle on
 * the event widget as well as dragged across the view.  The {@link #cfg-resizeEvents},
 * {@link #cfg-draggable}, and {@link #cfg-droppable} configs may be used to manage event
 * interactions.
 *
 * ### View Navigation
 *
 * The calendar view does not create controls for navigating the view's date range,
 * however the view can be navigated programmatically.  The view's target date can be set
 * explicitly using the {@link #method-setValue} method.  The
 * {@link #method-movePrevious} and {@link #method-moveNext} methods may be called to
 * move the displayed date range forward or back.  And the {@link #method-navigate} lets
 * you move the date an arbitrary amount relative to the current date {@link #cfg-value}.
 *
 * ### Compact Mode
 * The base view class has a {@link #cfg-compact} config.  This boolean configures
 * whether or not the view is in compact mode.  It’s expected that this will be used as a
 * platform config or a responsive config.  Setting compact mode by itself does not
 * modify how the view displays.  What it does do is apply the
 * {@link #cfg-compactOptions} config over the top over the current configuration
 * options.  These `compactOptions` are what is used to specify what compactness means
 * for a particular view.  Check out the `compactOptions` for each calendar view type to
 * see its default `compactOptions`.
 */
 
/**
 * @cfg {Object} addForm
 * The configuration for the {@link Ext.calendar.form.Add add form} to be used
 * when an event is to be created.  Use `null` to disable creation.
 * @accessor
 */
 
/**
 * @cfg {Boolean} [compact=false]
 * `true` to display this view in compact mode, typically used
 * for smaller form factors.  Setting to `true` applies any configured
 * {@link #cfg-compactOptions}.
 * @accessor
 */
 
/**
 * @cfg {Object} [compactOptions=null]
 * A series of config options for this class to set when this class is in
 * {@link #cfg-compact} mode.
 * @accessor
 */
 
/**
 * @cfg {Object} editForm
 * The configuration for the {@link Ext.calendar.form.Edit edit form} to be used
 * when an event is to be modified. Use `null` to disable editing.
 * @accessor
 */
 
/**
 * @cfg {Object} eventDefaults
 * The default configuration for {@link Ext.calendar.Event event} widgets
 * @accessor
 */
 
/**
 * @cfg {Boolean} [gestureNavigation=true]
 * Allow the view to have the value (displayed date range) changed via swipe
 * navigation on devices that support it
 * @accessor
 */
 
/**
 * @cfg {Object/Ext.calendar.store.Calendars} [store=null]
 * A {@link Ext.calendar.store.Calendars calendar store} instance or
 * configuration
 * @accessor
 */
 
/**
 * @cfg {Number} [timezoneOffset=undefined]
 * The timezone offset to display this calendar in. The value should be
 * specified in the same way as the native Date offset. That is, the number
 * of minutes between UTC and local time. For example the offset for UTC+10
 * would be -600 (10 hours * 60 minutes ahead).
 *
 * Defaults to the current browser offset.
 * @accessor
 */
 
/**
 *
 * @cfg {Date} [value=undefined]
 * The value for the current view.
 *
 *     value: new Date('10-02-2016') // to set the date to Oct 2nd 2016
 *
 * @accessor
 */
 
/**
 * @event beforeeventadd
 * Fired before an event {@link #addForm} is shown.
 * @param {Ext.calendar.view.Base} this This view.
 * @param {Object} context The context.
 * @param {Ext.calendar.model.EventBase} context.event The new event to be added.
 *
 * Return `false` to cancel the form being shown.
 */
 
/**
 * @event beforeeventedit
 * Fired before an event {@link #editForm} is shown.
 * @param {Ext.calendar.view.Base} this This view.
 * @param {Object} context The context.
 * @param {Ext.calendar.model.EventBase} context.event The event to be edited.
 *
 * Return `false` to cancel the form being shown.
 */
 
/**
 * @event eventadd
 * Fired when an event has been added via the {@link #addForm}.
 * @param {Ext.calendar.view.Base} this This view.
 * @param {Object} context The context.
 * @param {Ext.calendar.model.EventBase} context.event The newly added event with data.
 * @param {Object} context.data The data provided by the form.
 */
 
/**
 * @event eventedit
 * Fired when an event has been edited via the {@link #editForm}.
 * @param {Ext.calendar.view.Base} this This view.
 * @param {Object} context The context.
 * @param {Ext.calendar.model.EventBase} context.event The edited event with data.
 * @param {Object} context.data The data provided by the form.
 */
 
/**
 * @event eventdrop
 * Fired when an event has been deleted via the {@link #editForm}.
 * @param {Ext.calendar.view.Base} this This view.
 * @param {Object} context The context.
 * @param {Ext.calendar.model.EventBase} context.event The removed event.
 */
 
/**
 * @event eventtap
 * Fired when an event is tapped.
 * @param {Ext.calendar.view.Base} this This view.
 * @param {Object} context The context.
 * @param {Ext.calendar.model.EventBase} context.event The event model.
 */
 
/**
 * @event validateeventadd
 * Fired after the {@link #addForm} has been completed, but before the event
 * is added. Allows the add to be validated.
 * @param {Ext.calendar.view.Base} this This view.
 * @param {Object} context The context.
 * @param {Ext.calendar.model.EventBase} context.event The new event to be added, the
 * data is not yet set on the event.
 * @param {Object} context.data The data provided by the form. This will be used to set the
 * event data using {@link Ext.calendar.model.EventBase#setData}.
 * @param {Ext.Promise} context.validate A promise that allows validation to occur.
 * The default behavior is for no validation to take place. To achieve asynchronous
 * validation, the promise on the context object must be replaced:
 *
 *     {
 *         listeners: {
 *             validateeventadd: function(view, context) {
 *                 context.validate = context.then(function() {
 *                     return Ext.Ajax.request({
 *                         url: '/checkAdd'
 *                     }).then(function(response) {
 *                         return Promise.resolve(response.responseText === 'ok');
 *                     });
 *                 });
 *             }
 *         }
 *     }
 */
 
/**
 * @event validateeventedit
 * Fired after the {@link #editForm} has been completed, but before the event
 * is saved. Allows the edit to be validated.
 * @param {Ext.calendar.view.Base} this This view.
 * @param {Object} context The context.
 * @param {Ext.calendar.model.EventBase} context.event The event to be edited, the data
 * is not yet set on the event.
 * @param {Object} context.data The data provided by the form. This will be used to set the
 * event data using {@link Ext.calendar.model.EventBase#setData}.
 * @param {Ext.Promise} context.validate A promise that allows validation to occur.
 * The default behavior is for no validation to take place. To achieve asynchronous
 * validation, the promise on the context object must be replaced:
 *
 *     {
 *         listeners: {
 *             validateeventedit: function(view, context) {
 *                 context.validate = context.then(function() {
 *                     return Ext.Ajax.request({
 *                         url: '/checkEdit'
 *                     }).then(function(response) {
 *                         return Promise.resolve(response.responseText === 'ok');
 *                     });
 *                 });
 *             }
 *         }
 *     }
 */
 
/**
 * @event validateeventdrop
 * Fired when the delete button has been tapped on the {@link #editForm}, but before the event
 * is removed. Allows the removal to be validated.
 * @param {Ext.calendar.view.Base} this This view.
 * @param {Object} context The context.
 * @param {Ext.calendar.model.EventBase} context.event The event to be removed.
 * @param {Ext.Promise} context.validate A promise that allows validation to occur.
 * The default behavior is for no validation to take place. To achieve asynchronous
 * validation, the promise on the context object must be replaced:
 *
 *     {
 *         listeners: {
 *             validateeventdrop: function(view, context) {
 *                 context.validate = context.then(function() {
 *                     return new Promise(function(resolve, reject) {
 *                         Ext.Msg.confirm('Delete', 'Really delete this event?', function(btn) {
 *                             return Promise.resolve(btn === 'yes');
 *                         });
 *                     });
 *                 });
 *             }
 *         }
 *     }
 */
 
/**
 * @event valuechange
 * Fired when the {@link #cfg-value} changes.
 * @param {Ext.calendar.view.Base} this This view.
 * @param {Object} context The context.
 * @param {Date} context.value The new value.
 */
 
/**
 * @method getDisplayRange
 * Get the display range for this view.
 * @return {Ext.calendar.date.Range} The display range.
 */
 
/**
 * @method getForm
 * Get the active {@link #cfg-editForm} or {@link #cfg-addForm} if it exists.
 * @return {Ext.calendar.form.Base} The active form. `null` if not active.
 */
 
/**
 * @method getVisibleRange
 * Get the visible range for this view.
 * @return {Ext.calendar.date.Range} The visible range.
 */
 
/**
 * @method moveNext
 * Move the view forward to view the "next" portion of the view based
 * on the current {@link #cfg-value}.
 * This amount depends on the current view.
 */
 
/**
 * @method movePrevious
 * Move the view forward to view the "next" portion of the view based
 * on the current {@link #cfg-value}.
 * This amount depends on the current view.
 */
 
/**
 * @method navigate
 * Move the current view by an amount based off of the current {@link #cfg-value}.
 * @param {Number} amount The number of intervals to move
 * @param {String} [interval=Ext.Date.DAY] The interval to navigate by. See {@link Ext.Date}
 * for valid intervals.
 */
 
/**
 * @method showAddForm
 * Show the {@link #cfg-addForm} for this calendar. Has no behavior if
 * {@link #cfg-addForm} is `null`.
 * @param {Ext.calendar.model.EventBase} [event] A new event record containing
 * any data to be passed to the form. If not specified, default dates from
 * this view will be chosen.
 * @param {Object} [options] Callback options for form creation.
 * @param {Function} [options.onSave] A save callback function.
 * @param {Function} [options.onCancel] A cancel callback function.
 * @param {Object} [options.scope] A scope for the callback functions.
 */
 
/**
 * @method showEditForm
 * Show the {@link #cfg-editForm} for this calendar. Has no behavior if
 * {@link #cfg-editForm} is `null`.
 * @param {Ext.calendar.model.EventBase} event The event to be passed to the form.
 * @param {Object} [options] Callback options for form creation.
 * @param {Function} [options.onSave] A save callback function.
 * @param {Function} [options.onCancel] A cancel callback function.
 * @param {Object} [options.scope] A scope for the callback functions.
 */
 
/**
 * @method getEventSource
 * Get the {@link Ext.calendar.store.EventSource event source} for this view.
 * @return {Ext.calendar.store.EventSource} The event source.
 */