PDA

View Full Version : [CLOSED] CalendarPanel: override DayBody template



supera
May 21, 2012, 8:14 PM
Hi!

I wish override dayBody template, for day view, in CalendarPanel

I wish separate the 'hour' and 'time' of slot with a 'div'! But I can not do this.

"<div class="ext-cal-day-time-inner-Hour">{.:date("H")}</div><div class="ext-cal-day-time-inner-Time">{.:date("i")}</div>

I'm trying this:



Ext.calendar.template.DayBody.override({
constructor: function(config){
Ext.apply(this, config);
this.callParent([
'<table class="ext-cal-bg-tbl" cellspacing="0" cellpadding="0">',
'<tbody>',
'<tr height="1">',
'<td class="ext-cal-gutter"></td>',
'<td colspan="{dayCount}">',
'<div class="ext-cal-bg-rows">',
'<div class="ext-cal-bg-rows-inner">',
'<tpl for="times">',
'<div class="ext-cal-bg-row">',
'<div class="ext-cal-bg-row-div ext-row-{[xindex]}"></div>',
'</div>',
'</tpl>',
'</div>',
'</div>',
'</td>',
'</tr>',
'<tr>',
'<td class="ext-cal-day-times">',
'<tpl for="times">',
'<div class="ext-cal-bg-row">',
'<div class="ext-cal-day-time-inner"><div class="ext-cal-day-time-inner-Hour">{.:date("H")}</div><div class="ext-cal-day-time-inner-Time">{.:date("i")}</div></div>',
'</div>',
'</tpl>',
'</td>',
'<tpl for="days">',
'<td class="ext-cal-day-col">',
'<div class="ext-cal-day-col-inner">',
'<div id="{[this.id]}-day-col-{.:date("Ymd")}" class="ext-cal-day-col-gutter"></div>',
'</div>',
'</td>',
'</tpl>',
'</tr>',
'</tbody>',
'</table>'
]);
},
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 });
}

// use a fixed DST-safe date so times don't get skipped on DST boundaries
dt = Ext.Date.clearTime(new Date('5/26/1972'));

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

return this.applyOut({
days: days,
dayCount: days.length,
times: times
}, []).join('');
},

apply: function(values) {
return this.applyTemplate.apply(this, arguments);
}
});

Daniil
May 22, 2012, 8:34 AM
Hi,

I've not got what you are trying to achieve. Could you clarify the requirement with a draft?

supera
May 22, 2012, 11:16 AM
Hi Daniil!

I want format the calendarPanel as Outlook Calendar...

1 - Hour font size major time font size.
2 - The hour line divisor more detached of time line divisor.

4272

Daniil
May 22, 2012, 5:16 PM
Be careful with the override and callParent methods.

The callParent method calls the "previous" constructor that you override, not the parent one of the initial class.

Please see the example how to achieve your requirements.

Example

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.NET v2 Example</title>

<style type="text/css">
.minutes {
padding-left: 3px;
position: relative;
top: -7px;
}

.ext-cal-bg-row {
text-align: center;
}

.ext-cal-day-time-inner {
padding-top: 15px;
font-size: 15px;
}

<%--The hour line divisor more detached of time line divisor.--%>
.ext-cal-dayview .ext-cal-bg-row-div {
border-top: 2px solid gray;
}
</style>

<script type="text/javascript">
Ext.calendar.template.DayBody.override({

constructor: function(config){

Ext.apply(this, config);

Ext.calendar.template.DayBody.superclass.construct or([
'<table class="ext-cal-bg-tbl" cellspacing="0" cellpadding="0">',
'<tbody>',
'<tr height="1">',
'<td class="ext-cal-gutter"></td>',
'<td colspan="{dayCount}">',
'<div class="ext-cal-bg-rows">',
'<div class="ext-cal-bg-rows-inner">',
'<tpl for="times">',
'<div class="ext-cal-bg-row">',
'<div class="ext-cal-bg-row-div ext-row-{[xindex]}"></div>',
'</div>',
'</tpl>',
'</div>',
'</div>',
'</td>',
'</tr>',
'<tr>',
'<td class="ext-cal-day-times">',
'<tpl for="times">',
'<div class="ext-cal-bg-row">',
'<div class="ext-cal-day-time-inner">{.}<span class="minutes">00</span></div>',
'</div>',
'</tpl>',
'</td>',
'<tpl for="days">',
'<td class="ext-cal-day-col">',
'<div class="ext-cal-day-col-inner">',
'<div id="{[this.id]}-day-col-{.:date("Ymd")}" class="ext-cal-day-col-gutter"></div>',
'</div>',
'</td>',
'</tpl>',
'</tr>',
'</tbody>',
'</table>'
]);
},

// private
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});
}

// use a fixed DST-safe date so times don't get skipped on DST boundaries
dt = Ext.Date.clearTime(new Date('5/26/1972'));

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

return this.applyOut({
days: days,
dayCount: days.length,
times: times
}, []).join('');
}
});
</script>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:CalendarPanel runat="server" ActiveIndex="0">
<EventStore runat="server" />
</ext:CalendarPanel>
</Items>
</ext:Viewport>
</body>
</html>

supera
May 22, 2012, 5:37 PM
Hi Daniil!

Works very fine!

Thanks a lot for the code and the warning!