PDA

View Full Version : [CLOSED] CalendarPanel: How I insert a icon in Event slot?



supera
Apr 17, 2012, 9:16 PM
Hi!

I wish insert a icon to indicate that the event is a task in event slot.

I insert a property in getTemplateEventData function to indicate that the event is a task and change then getEventBodyMarkup function to add the template to icon of Task... and create a Css of task icon... but the icon donīt appears in event slot. What I do wrong?



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];
if ((evt[M.CalendarId.name] || '0') == 11) { // added
data.isTask = true;
} else {
data.isTask = false;
}
return Ext.applyIf(data, evt);
},

getEventBodyMarkup: function () {
if (!this.eventBodyMarkup) {
this.eventBodyMarkup = [
'<tpl if="isTask">',
'<i class="ext-cal-ic-task">&nbsp;</i>',
'</tpl>',
'{Title}',
'<tpl if="_isReminder">',
'<i class="ext-cal-ic ext-cal-ic-rem">&nbsp;</i>',
'</tpl>',
'<br/>{Notes}', // added
'<br/>{Location}', // added
'<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;
}

});


Style CSS


.ext-cal-ic-task {
background-image:url(/resources/image/toolbar/16x16/agendas.png);
background-repeat:no-repeat;
display:inline-block;
height:11px;
line-height:11px;
margin-left:4px;
width:14px;
}

supera
Apr 17, 2012, 9:19 PM
Oops... I'm sorry... the only problem was a path to icon...

Please, desconsidere this thread.