BoxLayout.js
5.26 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
Ext.define('Ext.calendar.template.BoxLayout', {
extend: 'Ext.XTemplate',
requires: ['Ext.Date'],
constructor: function(config){
Ext.apply(this, config);
var weekLinkTpl = this.showWeekLinks ? '<div id="{weekLinkId}" class="ext-cal-week-link">{weekNum}</div>' : '';
this.callParent([
'<tpl for="weeks">',
'<div id="{[this.id]}-wk-{[xindex-1]}" class="ext-cal-wk-ct" style="top:{[this.getRowTop(xindex, xcount)]}%; height:{[this.getRowHeight(xcount)]}%;">',
weekLinkTpl,
'<table class="ext-cal-bg-tbl" cellpadding="0" cellspacing="0">',
'<tbody>',
'<tr>',
'<tpl for=".">',
'<td id="{[this.id]}-day-{date:date("Ymd")}" class="{cellCls}"> </td>',
'</tpl>',
'</tr>',
'</tbody>',
'</table>',
'<table class="ext-cal-evt-tbl" cellpadding="0" cellspacing="0">',
'<tbody>',
'<tr>',
'<tpl for=".">',
'<td id="{[this.id]}-ev-day-{date:date("Ymd")}" class="{titleCls}"><div>{title}</div></td>',
'</tpl>',
'</tr>',
'</tbody>',
'</table>',
'</div>',
'</tpl>', {
getRowTop: function(i, ln){
return ((i-1)*(100/ln));
},
getRowHeight: function(ln){
return 100/ln;
}
}
]);
},
applyTemplate : function(o){
Ext.apply(this, o);
var w = 0, title = '', first = true, isToday = false, showMonth = false, prevMonth = false, nextMonth = false,
weeks = [[]],
dt = Ext.Date.clone(this.viewStart),
thisMonth = this.startDate.getMonth();
for(; w < this.weekCount || this.weekCount == -1; w++){
if(dt > this.viewEnd){
break;
}
weeks[w] = [];
for(var d = 0; d < this.dayCount; d++){
isToday = dt.getTime() === Ext.calendar.util.Date.today().getTime();
showMonth = first || (dt.getDate() == 1);
prevMonth = (dt.getMonth() < thisMonth) && this.weekCount == -1;
nextMonth = (dt.getMonth() > thisMonth) && this.weekCount == -1;
if(dt.getDay() == 1){
// The ISO week format 'W' is relative to a Monday week start. If we
// make this check on Sunday the week number will be off.
weeks[w].weekNum = this.showWeekNumbers ? Ext.Date.format(dt, 'W') : ' ';
weeks[w].weekLinkId = 'ext-cal-week-'+Ext.Date.format(dt, 'Ymd');
}
if(showMonth){
if(isToday){
title = this.getTodayText();
}
else{
title = Ext.Date.format(dt, this.dayCount == 1 ? 'l, F j, Y' : (first ? 'M j, Y' : 'M j'));
}
}
else{
var dayFmt = (w == 0 && this.showHeader !== true) ? 'D j' : 'j';
title = isToday ? this.getTodayText() : Ext.Date.format(dt, dayFmt);
}
weeks[w].push({
title: title,
date: Ext.Date.clone(dt),
titleCls: 'ext-cal-dtitle ' + (isToday ? ' ext-cal-dtitle-today' : '') +
(w==0 ? ' ext-cal-dtitle-first' : '') +
(prevMonth ? ' ext-cal-dtitle-prev' : '') +
(nextMonth ? ' ext-cal-dtitle-next' : ''),
cellCls: 'ext-cal-day ' + (isToday ? ' ext-cal-day-today' : '') +
(d==0 ? ' ext-cal-day-first' : '') +
(prevMonth ? ' ext-cal-day-prev' : '') +
(nextMonth ? ' ext-cal-day-next' : '')
});
dt = Ext.calendar.util.Date.add(dt, {days: 1});
first = false;
}
}
return this.applyOut({
weeks: weeks
}, []).join('');
},
getTodayText : function(){
var dt = Ext.Date.format(new Date(), 'l, F j, Y'),
todayText = this.showTodayText !== false ? this.todayText : '',
timeText = this.showTime !== false ? ' <span id="'+this.id+'-clock" class="ext-cal-dtitle-time">' +
Ext.Date.format(new Date(), 'g:i a') + '</span>' : '',
separator = todayText.length > 0 || timeText.length > 0 ? ' — ' : '';
if(this.dayCount == 1){
return dt + separator + todayText + timeText;
}
fmt = this.weekCount == 1 ? 'D j' : 'j';
return todayText.length > 0 ? todayText + timeText : Ext.Date.format(new Date(), fmt) + timeText;
}
},
function() {
this.createAlias('apply', 'applyTemplate');
});