3 * Copyright(c) 2006-2010 Sencha Inc.
5 * http://www.sencha.com/license
8 * Calendar sample code originally written by Brian Moeskau (brian@ext-calendar.com)
\r
9 * See additional calendar examples at http://ext-calendar.com
\r
15 Ext.BLANK_IMAGE_URL = 'http://extjs.cachefly.net/ext-3.1.0/resources/images/default/s.gif';
\r
17 // This is an example calendar store that enables the events to have
\r
18 // different colors based on CalendarId. This is not a fully-implmented
\r
19 // multi-calendar implementation, which is beyond the scope of this sample app
\r
20 this.calendarStore = new Ext.data.JsonStore({
\r
21 storeId: 'calendarStore',
\r
24 data: calendarList, // defined in calendar-list.js
\r
25 proxy: new Ext.data.MemoryProxy(),
\r
28 {name:'CalendarId', mapping: 'id', type: 'int'},
\r
29 {name:'Title', mapping: 'title', type: 'string'}
\r
32 field: 'CalendarId',
\r
37 // A sample event store that loads static JSON from a local file. Obviously a real
\r
38 // implementation would likely be loading remote data via an HttpProxy, but the
\r
39 // underlying store functionality is the same. Note that if you would like to
\r
40 // provide custom data mappings for events, see EventRecord.js.
\r
41 this.eventStore = new Ext.data.JsonStore({
\r
44 data: eventList, // defined in event-list.js
\r
45 proxy: new Ext.data.MemoryProxy(),
\r
46 fields: Ext.calendar.EventRecord.prototype.fields.getRange(),
\r
53 // This is the app UI layout code. All of the calendar views are subcomponents of
\r
54 // CalendarPanel, but the app title bar and sidebar/navigation calendar are separate
\r
55 // pieces that are composed in app-specific layout code since they could be ommitted
\r
56 // or placed elsewhere within the application.
\r
59 renderTo: 'calendar-ct',
\r
65 contentEl: 'app-header-content'
\r
68 title: '...', // will be updated to view date range
\r
77 xtype: 'datepicker',
\r
78 id: 'app-nav-picker',
\r
79 cls: 'ext-cal-nav-picker',
\r
82 fn: function(dp, dt){
\r
83 App.calendarPanel.setStartDate(dt);
\r
90 xtype: 'calendarpanel',
\r
91 eventStore: this.eventStore,
\r
92 calendarStore: this.calendarStore,
\r
96 activeItem: 2, // month view
\r
98 // CalendarPanel supports view-specific configs that are passed through to the
\r
99 // underlying views to make configuration possible without explicitly having to
\r
100 // create those views at this level:
\r
103 showWeekLinks: true,
\r
104 showWeekNumbers: true
\r
107 // Some optional CalendarPanel configs to experiment with:
\r
108 //showDayView: false,
\r
109 //showWeekView: false,
\r
110 //showMonthView: false,
\r
111 //showNavBar: false,
\r
112 //showTodayText: false,
\r
114 //title: 'My Calendar', // the header of the calendar, could be a subtitle for the app
\r
116 // Once this component inits it will set a reference to itself as an application
\r
117 // member property for easy reference in other functions within App.
\r
118 initComponent: function() {
\r
119 App.calendarPanel = this;
\r
120 this.constructor.prototype.initComponent.apply(this, arguments);
\r
125 fn: function(vw, rec, el){
\r
126 this.showEditWindow(rec, el);
\r
131 'eventover': function(vw, rec, el){
\r
132 //console.log('Entered evt rec='+rec.data.Title+', view='+ vw.id +', el='+el.id);
\r
134 'eventout': function(vw, rec, el){
\r
135 //console.log('Leaving evt rec='+rec.data.Title+', view='+ vw.id +', el='+el.id);
\r
138 fn: function(cp, rec){
\r
139 this.showMsg('Event '+ rec.data.Title +' was added');
\r
144 fn: function(cp, rec){
\r
145 this.showMsg('Event '+ rec.data.Title +' was updated');
\r
150 fn: function(cp, rec){
\r
151 this.showMsg('Event '+ rec.data.Title +' was deleted');
\r
156 fn: function(cp, rec){
\r
162 fn: function(p, vw, dateInfo){
\r
164 this.editWin.hide();
\r
166 if(dateInfo !== null){
\r
167 // will be null when switching to the event edit form so ignore
\r
168 Ext.getCmp('app-nav-picker').setValue(dateInfo.activeDate);
\r
169 this.updateTitle(dateInfo.viewStart, dateInfo.viewEnd);
\r
175 fn: function(vw, dt, ad, el){
\r
176 this.showEditWindow({
\r
185 fn: function(win, dates, onComplete){
\r
186 this.showEditWindow(dates);
\r
187 this.editWin.on('hide', onComplete, this, {single:true});
\r
193 fn: function(vw, rec){
\r
195 var time = rec.data.IsAllDay ? '' : ' \\a\\t g:i a';
\r
196 this.showMsg('Event '+ rec.data.Title +' was moved to '+rec.data.StartDate.format('F jS'+time));
\r
201 fn: function(vw, rec){
\r
203 this.showMsg('Event '+ rec.data.Title +' was updated');
\r
208 fn: function(win, rec){
\r
209 this.eventStore.remove(rec);
\r
210 this.showMsg('Event '+ rec.data.Title +' was deleted');
\r
216 if(this.editWin && this.editWin.isVisible()){
\r
217 this.editWin.hide();
\r
228 // The edit popup window is not part of the CalendarPanel itself -- it is a separate component.
\r
229 // This makes it very easy to swap it out with a different type of window or custom view, or omit
\r
230 // it altogether. Because of this, it's up to the application code to tie the pieces together.
\r
231 // Note that this function is called from various event handlers in the CalendarPanel above.
\r
232 showEditWindow : function(rec, animateTarget){
\r
234 this.editWin = new Ext.calendar.EventEditWindow({
\r
235 calendarStore: this.calendarStore,
\r
238 fn: function(win, rec){
\r
240 rec.data.IsNew = false;
\r
241 this.eventStore.add(rec);
\r
242 this.showMsg('Event '+ rec.data.Title +' was added');
\r
247 fn: function(win, rec){
\r
250 this.showMsg('Event '+ rec.data.Title +' was updated');
\r
255 fn: function(win, rec){
\r
256 this.eventStore.remove(rec);
\r
258 this.showMsg('Event '+ rec.data.Title +' was deleted');
\r
263 fn: function(win, rec){
\r
265 App.calendarPanel.showEditForm(rec);
\r
271 this.editWin.show(rec, animateTarget);
\r
274 // The CalendarPanel itself supports the standard Panel title config, but that title
\r
275 // only spans the calendar views. For a title that spans the entire width of the app
\r
276 // we added a title to the layout's outer center region that is app-specific. This code
\r
277 // updates that outer title based on the currently-selected view range anytime the view changes.
\r
278 updateTitle: function(startDt, endDt){
\r
279 var p = Ext.getCmp('app-center');
\r
281 if(startDt.clearTime().getTime() == endDt.clearTime().getTime()){
\r
282 p.setTitle(startDt.format('F j, Y'));
\r
284 else if(startDt.getFullYear() == endDt.getFullYear()){
\r
285 if(startDt.getMonth() == endDt.getMonth()){
\r
286 p.setTitle(startDt.format('F j') + ' - ' + endDt.format('j, Y'));
\r
289 p.setTitle(startDt.format('F j') + ' - ' + endDt.format('F j, Y'));
\r
293 p.setTitle(startDt.format('F j, Y') + ' - ' + endDt.format('F j, Y'));
\r
297 // This is an application-specific way to communicate CalendarPanel event messages back to the user.
\r
298 // This could be replaced with a function to do "toast" style messages, growl messages, etc. This will
\r
299 // vary based on application requirements, which is why it's not baked into the CalendarPanel.
\r
300 showMsg: function(msg){
\r
301 Ext.fly('app-msg').update(msg).removeClass('x-hidden');
\r
304 clearMsg: function(){
\r
305 Ext.fly('app-msg').update('').addClass('x-hidden');
\r
310 Ext.onReady(App.init, App);
\r