PDA

View Full Version : [CLOSED] CalendarPanel label of today



osef
Sep 25, 2013, 5:50 PM
Hi Team Ext.Net How Can I do to change the label to "Today" in the next images:

693269336934

And with the month view, How Can I do to change the label "more"?:

6933

Regards

osef
Sep 25, 2013, 9:59 PM
Hi Team Ext.Net How Can I do to change the label to "Today" in the next images:

693269336934

And with the month view, How Can I do to change the label "more"?:

6933

Regards

The properties are: TodayText = "Hoy", but by label "more" in Month?

Daniil
Sep 26, 2013, 8:13 AM
Hi @osef,

Currently, it is not configurable.

Please use this override (search for "moreText").

<script>
Ext.calendar.util.WeekEventRenderer.render = function (o) {
var w = 0,
grid = o.eventGrid,
dt = Ext.Date.clone(o.viewStart),
eventTpl = o.tpl,
max = o.maxEventsPerDay != undefined ? o.maxEventsPerDay: 999,
weekCount = o.weekCount < 1 ? 6: o.weekCount,
dayCount = o.weekCount == 1 ? o.dayCount: 7,
cellCfg,
moreText = ' more...';

dt.setHours(1);
for (; w < weekCount; w++) {
if (!grid[w] || grid[w].length == 0) {
// no events or span cells for the entire week
if (weekCount == 1) {
row = this.getEventRow(o.id, w, 0);
cellCfg = {
tag: 'td',
cls: 'ext-cal-ev',
id: o.id + '-empty-0-day-' + Ext.Date.format(dt, 'Ymd'),
html: '&nbsp;'
};
if (dayCount > 1) {
cellCfg.colspan = dayCount;
}
Ext.core.DomHelper.append(row, cellCfg);
}
dt = Ext.calendar.util.Date.add(dt, {days: 7});
} else {
var row,
d = 0,
wk = grid[w],
startOfWeek = Ext.Date.clone(dt),
endOfWeek = Ext.calendar.util.Date.add(startOfWeek, {days: dayCount, millis: -1});

for (; d < dayCount; d++) {
if (wk[d]) {
var ev = 0,
emptyCells = 0,
skipped = 0,
day = wk[d],
ct = day.length,
evt;

for (; ev < ct; ev++) {
if (!day[ev]) {
emptyCells++;
continue;
}
if (emptyCells > 0 && ev - emptyCells < max) {
row = this.getEventRow(o.id, w, ev - emptyCells);
cellCfg = {
tag: 'td',
cls: 'ext-cal-ev',
id: o.id + '-empty-' + ct + '-day-' + Ext.Date.format(dt, 'Ymd')
};
if (emptyCells > 1 && max - ev > emptyCells) {
cellCfg.rowspan = Math.min(emptyCells, max - ev);
}
Ext.core.DomHelper.append(row, cellCfg);
emptyCells = 0;
}

if (ev >= max) {
skipped++;
continue;
}
evt = day[ev];

if (!evt.isSpan || evt.isSpanStart) {
//skip non-starting span cells
var item = evt.data || evt.event.data;
item._weekIndex = w;
item._renderAsAllDay = item[Ext.calendar.data.EventMappings.IsAllDay.name] || evt.isSpanStart;
item.spanLeft = item[Ext.calendar.data.EventMappings.StartDate.name].getTime() < startOfWeek.getTime();
item.spanRight = item[Ext.calendar.data.EventMappings.EndDate.name].getTime() > endOfWeek.getTime();
item.spanCls = (item.spanLeft ? (item.spanRight ? 'ext-cal-ev-spanboth':
'ext-cal-ev-spanleft') : (item.spanRight ? 'ext-cal-ev-spanright': ''));

row = this.getEventRow(o.id, w, ev);
cellCfg = {
tag: 'td',
cls: 'ext-cal-ev',
cn: eventTpl.apply(o.templateDataFn(item))
};
var diff = Ext.calendar.util.Date.diffDays(dt, item[Ext.calendar.data.EventMappings.EndDate.name]) + 1,
cspan = Math.min(diff, dayCount - d);

if (cspan > 1) {
cellCfg.colspan = cspan;
}
Ext.core.DomHelper.append(row, cellCfg);
}
}
if (ev > max) {
row = this.getEventRow(o.id, w, max);
Ext.core.DomHelper.append(row, {
tag: 'td',
cls: 'ext-cal-ev-more',
id: 'ext-cal-ev-more-' + Ext.Date.format(dt, 'Ymd'),
cn: {
tag: 'a',
html: '+' + skipped + moreText
}
});
}
if (ct < o.evtMaxCount[w]) {
row = this.getEventRow(o.id, w, ct);
if (row) {
cellCfg = {
tag: 'td',
cls: 'ext-cal-ev',
id: o.id + '-empty-' + (ct + 1) + '-day-' + Ext.Date.format(dt, 'Ymd')
};
var rowspan = o.evtMaxCount[w] - ct;
if (rowspan > 1) {
cellCfg.rowspan = rowspan;
}
Ext.core.DomHelper.append(row, cellCfg);
}
}
} else {
row = this.getEventRow(o.id, w, 0);
if (row) {
cellCfg = {
tag: 'td',
cls: 'ext-cal-ev',
id: o.id + '-empty-day-' + Ext.Date.format(dt, 'Ymd')
};
if (o.evtMaxCount[w] > 1) {
cellCfg.rowSpan = o.evtMaxCount[w];
}
Ext.core.DomHelper.append(row, cellCfg);
}
}
dt = Ext.calendar.util.Date.add(dt, {days: 1});
}
}
}
}
</script>

osef
Sep 26, 2013, 3:36 PM
Hi @osef,

Currently, it is not configurable.

Please use this override (search for "moreText").

<script>
Ext.calendar.util.WeekEventRenderer.render = function (o) {
var w = 0,
grid = o.eventGrid,
dt = Ext.Date.clone(o.viewStart),
eventTpl = o.tpl,
max = o.maxEventsPerDay != undefined ? o.maxEventsPerDay: 999,
weekCount = o.weekCount < 1 ? 6: o.weekCount,
dayCount = o.weekCount == 1 ? o.dayCount: 7,
cellCfg,
moreText = ' more...';

dt.setHours(1);
for (; w < weekCount; w++) {
if (!grid[w] || grid[w].length == 0) {
// no events or span cells for the entire week
if (weekCount == 1) {
row = this.getEventRow(o.id, w, 0);
cellCfg = {
tag: 'td',
cls: 'ext-cal-ev',
id: o.id + '-empty-0-day-' + Ext.Date.format(dt, 'Ymd'),
html: '&nbsp;'
};
if (dayCount > 1) {
cellCfg.colspan = dayCount;
}
Ext.core.DomHelper.append(row, cellCfg);
}
dt = Ext.calendar.util.Date.add(dt, {days: 7});
} else {
var row,
d = 0,
wk = grid[w],
startOfWeek = Ext.Date.clone(dt),
endOfWeek = Ext.calendar.util.Date.add(startOfWeek, {days: dayCount, millis: -1});

for (; d < dayCount; d++) {
if (wk[d]) {
var ev = 0,
emptyCells = 0,
skipped = 0,
day = wk[d],
ct = day.length,
evt;

for (; ev < ct; ev++) {
if (!day[ev]) {
emptyCells++;
continue;
}
if (emptyCells > 0 && ev - emptyCells < max) {
row = this.getEventRow(o.id, w, ev - emptyCells);
cellCfg = {
tag: 'td',
cls: 'ext-cal-ev',
id: o.id + '-empty-' + ct + '-day-' + Ext.Date.format(dt, 'Ymd')
};
if (emptyCells > 1 && max - ev > emptyCells) {
cellCfg.rowspan = Math.min(emptyCells, max - ev);
}
Ext.core.DomHelper.append(row, cellCfg);
emptyCells = 0;
}

if (ev >= max) {
skipped++;
continue;
}
evt = day[ev];

if (!evt.isSpan || evt.isSpanStart) {
//skip non-starting span cells
var item = evt.data || evt.event.data;
item._weekIndex = w;
item._renderAsAllDay = item[Ext.calendar.data.EventMappings.IsAllDay.name] || evt.isSpanStart;
item.spanLeft = item[Ext.calendar.data.EventMappings.StartDate.name].getTime() < startOfWeek.getTime();
item.spanRight = item[Ext.calendar.data.EventMappings.EndDate.name].getTime() > endOfWeek.getTime();
item.spanCls = (item.spanLeft ? (item.spanRight ? 'ext-cal-ev-spanboth':
'ext-cal-ev-spanleft') : (item.spanRight ? 'ext-cal-ev-spanright': ''));

row = this.getEventRow(o.id, w, ev);
cellCfg = {
tag: 'td',
cls: 'ext-cal-ev',
cn: eventTpl.apply(o.templateDataFn(item))
};
var diff = Ext.calendar.util.Date.diffDays(dt, item[Ext.calendar.data.EventMappings.EndDate.name]) + 1,
cspan = Math.min(diff, dayCount - d);

if (cspan > 1) {
cellCfg.colspan = cspan;
}
Ext.core.DomHelper.append(row, cellCfg);
}
}
if (ev > max) {
row = this.getEventRow(o.id, w, max);
Ext.core.DomHelper.append(row, {
tag: 'td',
cls: 'ext-cal-ev-more',
id: 'ext-cal-ev-more-' + Ext.Date.format(dt, 'Ymd'),
cn: {
tag: 'a',
html: '+' + skipped + moreText
}
});
}
if (ct < o.evtMaxCount[w]) {
row = this.getEventRow(o.id, w, ct);
if (row) {
cellCfg = {
tag: 'td',
cls: 'ext-cal-ev',
id: o.id + '-empty-' + (ct + 1) + '-day-' + Ext.Date.format(dt, 'Ymd')
};
var rowspan = o.evtMaxCount[w] - ct;
if (rowspan > 1) {
cellCfg.rowspan = rowspan;
}
Ext.core.DomHelper.append(row, cellCfg);
}
}
} else {
row = this.getEventRow(o.id, w, 0);
if (row) {
cellCfg = {
tag: 'td',
cls: 'ext-cal-ev',
id: o.id + '-empty-day-' + Ext.Date.format(dt, 'Ymd')
};
if (o.evtMaxCount[w] > 1) {
cellCfg.rowSpan = o.evtMaxCount[w];
}
Ext.core.DomHelper.append(row, cellCfg);
}
}
dt = Ext.calendar.util.Date.add(dt, {days: 1});
}
}
}
}
</script>


Hi Daniil thank you, but is many code, I have tried to do it with AfterRender in Listener of CalendarPanel, but is not working.

Daniil
Sep 27, 2013, 7:51 AM
I added the MoreText property. After updating from the SVN trunk you can do just:

<ext:CalendarPanel runat="server">
<MonthView runat="server" MoreText="+ {0} my more text ...">

The {0} thing is replaced with amount of overflowed events.