/** * For an overview of calendar panels see {@link Ext.calendar.panel.Base} * * A panel for display a series of weeks. Composes a * {@link Ext.calendar.view.Weeks Weeks View} with a * {@link Ext.calendar.header.Base docked header}. * * The Weeks panel shows the events for one or more weeks as full days similar to a * conventional calendar. For a week view including an hourly timeline see * {@link Ext.calendar.panel.Week}. * * The weeks panel shows the week containing the current date (or the date set on the * {@link #value} config) plus any additional weeks totaling the * {@link #visibleWeeks}. The number of days shown per week is set using * {@link #visibleDays}. Each week begins on the day set on the * {@link #firstDayOfWeek}. * * By default the first day is Sunday. If you want to create a "work week" type view * where the weekend days are omitted you can modify the `visibleDays` and * `firstDayOfWeek` to show only Monday - Friday. * * Ext.create({ * xtype: 'calendar-weeksview', * renderTo: Ext.getBody(), * height: 400, * width: 400, * firstDayOfWeek: 1, // starts the view on Monday * visibleDays: 5, // and displays it and the 4 days after * store: { * autoLoad: true, * proxy: { * type: 'ajax', * url: 'calendars.php' * }, * eventStoreDefaults: { * proxy: { * type: 'ajax', * url: 'events.php' * } * } * } * }); * * ### Calendar Events * * Events show on the view with their start and end days correlating to the day * labels. The events will display on the timeline according to your local timezone * offset from GMT. The timezone offset can be applied explicitly using the * {@link #timezoneOffset} config option. * * ### Adding All Day Events * * Dragging / swiping across multiple days will show the event add form with multiple * days pre-populated in the form's start / end dates. A single all day type event can * be added by tapping / clicking on a single day. * * ### Date Range Navigation * * The {@link #movePrevious} and {@link #moveNext} methods modify the displayed * date range by moving the range forward or backward the number of * {@link #visibleWeeks}. * * i.e. `panel.moveNext();` called on a 7-day view with 2 visible weeks will advance the * view 2 weeks. **Note** that a panel configured with 5 `visibleDays` would not advance * 5 days, but rather will show the next full week with only 5 visible days. * * ### Alternative Classes * * For a month view refer to {@link Ext.calendar.view.Month}. */Ext.define('Ext.calendar.panel.Weeks', { extend: 'Ext.calendar.panel.Base', xtype: 'calendar-weeks', requires: [ 'Ext.calendar.header.Weeks', 'Ext.calendar.view.Weeks' ], config: { /** * @cfg dayHeader * @inheritdoc */ dayHeader: { xtype: 'calendar-weeksheader' }, /** * @cfg eventRelayers * @inheritdoc */ eventRelayers: { view: { /** * @event beforeeventdragstart * @inheritdoc Ext.calendar.view.Weeks#beforeeventdragstart */ beforeeventdragstart: true, /** * @event validateeventdrop * @inheritdoc Ext.calendar.view.Weeks#validateeventdrop */ validateeventdrop: true, /** * @event eventdrop * @inheritdoc Ext.calendar.view.Weeks#eventdrop */ eventdrop: true } }, /** * @cfg view * @inheritdoc */ view: { xtype: 'calendar-weeksview' } }, configExtractor: { dayHeader: { /** * @cfg dayHeaderFormat * @inheritdoc Ext.calendar.header.Weeks#cfg-format */ dayHeaderFormat: 'format' }, view: { /** * @cfg addOnSelect * @inheritdoc Ext.calendar.view.Weeks#cfg-addOnSelect */ addOnSelect: true, /** * @cfg allowSelection * @inheritdoc Ext.calendar.view.Weeks#cfg-addOnSelect */ allowSelection: true, /** * @cfg dayFormat * @inheritdoc Ext.calendar.view.Weeks#cfg-addOnSelect */ dayFormat: true, /** * @cfg draggable * @inheritdoc Ext.calendar.view.Weeks#cfg-addOnSelect */ draggable: true, /** * @cfg droppable * @inheritdoc Ext.calendar.view.Weeks#cfg-addOnSelect */ droppable: true, /** * @cfg firstDayOfWeek * @inheritdoc Ext.calendar.view.Weeks#cfg-addOnSelect */ firstDayOfWeek: true, /** * @cfg overflowText * @inheritdoc Ext.calendar.view.Weeks#cfg-addOnSelect */ overflowText: true, /** * @cfg showOverflow * @inheritdoc Ext.calendar.view.Weeks#cfg-showOverflow */ showOverflow: true, /** * @cfg visibleDays * @inheritdoc Ext.calendar.view.Weeks#cfg!visibleDays */ visibleDays: true, /** * @cfg visibleWeeks * @inheritdoc Ext.calendar.view.Weeks#cfg!visibleWeeks */ visibleWeeks: true, /** * @cfg weekendDays * @inheritdoc Ext.calendar.view.Weeks#cfg!weekendDays */ weekendDays: true, /** * @cfg highlightToday * @inheritdoc Ext.calendar.view.Weeks#cfg-highlightToday * @since 7.0 */ highlightToday: true } }});