PDA

View Full Version : [CLOSED] ext:CalendarPanel: How to customize the 2.x version of CalendarPanel week numbers



capbarbell
Mar 15, 2013, 8:42 AM
Hi

In version 1.x,
can override Ext.calendar.BoxLayoutTemplate achieve the purpose.
How to do in version 2.x.

Any advice? TIA.

Daniil
Mar 15, 2013, 10:02 AM
Hi @capbarbell,

Welcome to the Ext.NET forums.

I am not sure what "week numbers" you are talking about. Could you clarify?

Also posting a solution (maybe, just a link) for v1 will be good.

capbarbell
Mar 18, 2013, 1:34 AM
Hi Daniil,

I want to change the week number of the calendar(please refer to image attachment). And the 1.x code for this purpose is as follows.

Please take a look and be advised. TIA


Ext.calendar.BoxLayoutTemplate.override({
applyTemplate: function (o) {
Ext.apply(this, o);
var w = 0, title = '', first = true, isToday = false, showMonth = false, prevMonth = false, nextMonth = false,
weeks = [[]],
today = new Date().clearTime(),
dt = this.viewStart.clone(),
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 = Ext.calendar.Date.equalDates(dt, today);
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 ? dt.format('W') : '&nbsp;';
weeks[w].weekLinkId = 'ext-cal-week-' + dt.format('Ymd');
}
if (showMonth) {
if (isToday) {
title = this.getTodayText();
}
else {
//title = dt.format(this.dayCount == 1 ? 'l, F j, Y' : (first ? 'M j, Y' : 'M j'));
title = dt.format(this.dayCount == 1 ? 'l, F j, Y' : (first ? 'j' : 'j'));
}
}
else {
var dayFmt = (w == 0 && this.showHeader !== true) ? 'D j' : 'j';
title = isToday ? this.getTodayText() : dt.format(dayFmt);
}
weeks[w].push({
title: title,
date: dt.clone(),
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.setHours(1);
dt = dt.add(Date.HOUR, 26);
first = false;
}
}
return Ext.calendar.BoxLayoutTemplate.superclass.applyTem plate.call(this, {
weeks: weeks
});
}
});
5839

Daniil
Mar 18, 2013, 7:39 AM
Thank you.

Here is a solution.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script>
Ext.calendar.template.DayBody.override({
applyTemplate: function (o) {
this.today = Ext.calendar.util.Date.today();
this.dayCount = this.dayCount || 1;

var i = 0,
days = [],
dt = Ext.Date.clone(o.viewStart),
times = [];

for (; i < this.dayCount; i++) {
days[i] = Ext.calendar.util.Date.add(dt, {
days: i
});
}

dt = Ext.Date.clearTime(new Date('5/26/1972'));

for (i = 0; i < 24; i++) {
times.push(Ext.Date.format(dt, 'G')); // was 'ga'
dt = Ext.calendar.util.Date.add(dt, {
hours: 1
});
}

return this.applyOut({
days: days,
dayCount: days.length,
times: times
}, []).join('');
}
});
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:CalendarPanel ID="CalendarPanel1" runat="server" ActiveIndex="1">
<EventStore runat="server" />
</ext:CalendarPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>

Daniil
Mar 18, 2013, 7:51 AM
I misunderstood the requirement.

Well, in Ext.NET v2 you aslo need to override the BoxLayout's constructor or/and applyTemplate accordingly actual formatting that you need.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script>
Ext.calendar.template.BoxLayout.override({
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 = [[]],
today = Ext.calendar.util.Date.today(),
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 = Ext.calendar.util.Date.equalDates(dt, today);
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.setHours(1);
dt = Ext.calendar.util.Date.add(dt, {hours: 26});
first = false;
}
}

return this.applyOut({
weeks: weeks
}, []).join('');
}
});
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:CalendarPanel ID="CalendarPanel1" runat="server">
<EventStore runat="server" />
<MonthView runat="server" ShowWeekLinks="true" ShowWeekNumbers="true" />
</ext:CalendarPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>

capbarbell
Mar 19, 2013, 3:27 AM
Hi Daniil,

Thanks very much.
I have solved my problem.