PDA

View Full Version : [CLOSED] CalendarPanel: customizing the event slot.



supera
Apr 16, 2012, 7:45 PM
Hi...

I wish customizing the event slot in calendarPanel... I wish add the information about 'location' and 'note' in this slot.
How I can do this?

4108

Daniil
Apr 16, 2012, 11:55 PM
Hi,

I can suggest the following solution.

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>

<ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />

<script type="text/javascript">
Ext.calendar.view.Month.override({
getTemplateEventData: function(evt) {
var M = Ext.calendar.data.EventMappings,
selector = this.getEventSelectorCls(evt[M.EventId.name]),
title = evt[M.Title.name];

return Ext.applyIf({
_selectorCls: selector,
_colorCls: 'ext-color-' + (evt[M.CalendarId.name] ?
evt[M.CalendarId.name] : 'default') + (evt._renderAsAllDay ? '-ad': ''),
_elId: selector + '-' + evt._weekIndex,
_isRecurring: evt.Recurrence && evt.Recurrence != '',
_isReminder: evt[M.Reminder.name] && evt[M.Reminder.name] != '',
Title: (evt[M.IsAllDay.name] ? '' : Ext.Date.format(evt[M.StartDate.name], 'g:ia ')) + (!title || title.length == 0 ? '(No title)' : title)
Location : evt[M.Location.name], // added
Notes : evt[M.Notes.name] // added
},
evt);
},

getEventBodyMarkup: function() {
if (!this.eventBodyMarkup) {
this.eventBodyMarkup = ['{Title}',
'<br/>{Location}', // added
'<br/>{Notes}', // added
'<tpl if="_isReminder">',
'<i class="ext-cal-ic ext-cal-ic-rem">&nbsp;</i>',
'</tpl>',
'<tpl if="_isRecurring">',
'<i class="ext-cal-ic ext-cal-ic-rcr">&nbsp;</i>',
'</tpl>',
'<tpl if="spanLeft">',
'<i class="ext-cal-spl">&nbsp;</i>',
'</tpl>',
'<tpl if="spanRight">',
'<i class="ext-cal-spr">&nbsp;</i>',
'</tpl>'
].join('');
}
return this.eventBodyMarkup;
}
});
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:CalendarPanel runat="server">
<EventStore runat="server">
<Events>
<ext:EventModel
Title="My event"
StartDate="2012/4/18 08:00"
EndDate="2012/4/18 10:00"
CalendarId="1"
Location="Some location"
Notes="Some notes" />
</Events>
</EventStore>
</ext:CalendarPanel>
</Items>
</ext:Viewport>
</body>
</html>

Please note that the thread is related to this one:
http://forums.ext.net/showthread.php?18093

supera
Apr 17, 2012, 12:37 PM
Hi Daniil!

Thanks a lot for your javascript code... Works very fine...

For Day View and WeekDay View, I follow your javascript code for month view, merging with your code passed in another thread (http://forums.ext.net/showthread.php?18093)... and works fine too...

Thanks a lot, again... Follow the complete code...



Ext.calendar.view.Month.override({
getTemplateEventData: function (evt) {
var M = Ext.calendar.data.EventMappings,
selector = this.getEventSelectorCls(evt[M.EventId.name]),
title = evt[M.Title.name];

return Ext.applyIf({
_selectorCls: selector,
_colorCls: 'ext-color-' + (evt[M.CalendarId.name] ?
evt[M.CalendarId.name] : 'default') + (evt._renderAsAllDay ? '-ad' : ''),
_elId: selector + '-' + evt._weekIndex,
_isRecurring: evt.Recurrence && evt.Recurrence != '',
_isReminder: evt[M.Reminder.name] && evt[M.Reminder.name] != '',
//Title: (evt[M.IsAllDay.name] ? '' : Ext.Date.format(evt[M.StartDate.name], 'g:ia ')) + (!title || title.length == 0 ? '(No title)' : title)
Title: (evt[M.IsAllDay.name] ? '' : Ext.Date.format(evt[M.StartDate.name], 'H:i ')) + (!title || title.length == 0 ? '(No title)' : title),
Location : evt[M.Location.name], // added
Notes : evt[M.Notes.name] // added
},
evt);
},

getEventBodyMarkup: function () {
if (!this.eventBodyMarkup) {
this.eventBodyMarkup = ['{Title}',
'<br/>{Location}', // added
'<br/>{Notes}', // added
'<tpl if="_isReminder">',
'<i class="ext-cal-ic ext-cal-ic-rem">&nbsp;</i>',
'</tpl>',
'<tpl if="_isRecurring">',
'<i class="ext-cal-ic ext-cal-ic-rcr">&nbsp;</i>',
'</tpl>',
'<tpl if="spanLeft">',
'<i class="ext-cal-spl">&nbsp;</i>',
'</tpl>',
'<tpl if="spanRight">',
'<i class="ext-cal-spr">&nbsp;</i>',
'</tpl>'
].join('');
}
return this.eventBodyMarkup;
}
});

Ext.calendar.view.DayBody.override({
getTemplateEventData: function (evt) {
var selector = this.getEventSelectorCls(evt[Ext.calendar.data.EventMappings.EventId.name]),
data = {},
M = Ext.calendar.data.EventMappings;

this.getTemplateEventBox(evt);

data._selectorCls = selector;
data._colorCls = 'ext-color-' + (evt[M.CalendarId.name] || '0') + (evt._renderAsAllDay ? '-ad' : '');
data._elId = selector + (evt._weekIndex ? '-' + evt._weekIndex : '');
data._isRecurring = evt.Recurrence && evt.Recurrence != '';
data._isReminder = evt[M.Reminder.name] && evt[M.Reminder.name] != '';
var title = evt[M.Title.name];
//data.Title = (evt[M.IsAllDay.name] ? '': Ext.Date.format(evt[M.StartDate.name], 'g:ia ')) + (!title || title.length == 0 ? '(No title)': title);
data.Title = (evt[M.IsAllDay.name] ? '' : Ext.Date.format(evt[M.StartDate.name], 'H:i ')) + (!title || title.length == 0 ? '(No title)' : title);
data.Location = evt[M.Location.name]; // added
data.Notes = evt[M.Notes.name]; // added
return Ext.applyIf(data, evt);
},

getEventBodyMarkup: function () {
if (!this.eventBodyMarkup) {
this.eventBodyMarkup = ['{Title}',
'<br/>{Location}', // added
'<br/>{Notes}', // added
'<tpl if="_isReminder">',
'<i class="ext-cal-ic ext-cal-ic-rem">&nbsp;</i>',
'</tpl>',
'<tpl if="_isRecurring">',
'<i class="ext-cal-ic ext-cal-ic-rcr">&nbsp;</i>',
'</tpl>',
'<tpl if="spanLeft">',
'<i class="ext-cal-spl">&nbsp;</i>',
'</tpl>',
'<tpl if="spanRight">',
'<i class="ext-cal-spr">&nbsp;</i>',
'</tpl>'
].join('');
}
return this.eventBodyMarkup;
}

});

Dimitris
Apr 03, 2013, 8:10 PM
I am working with version 1.6. The following modifications have to be made in order for the above sample code to work:

1.
instead of:

Ext.calendar.view.Month.override({

use:

Ext.calendar.MonthView.override({

2.
instead of:

var M = Ext.calendar.data.EventMappings,

use:

var M = Ext.calendar.EventMappings,


Hope this helps.

Daniil
Apr 04, 2013, 5:40 AM
Hello @Mimisss,

Thank you for sharing!