[CLOSED] CalendarPanel: customizing the event slot.

  1. #1

    [CLOSED] CalendarPanel: customizing the event slot.

    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?

    Click image for larger version. 

Name:	CalendarPanel 8.png 
Views:	160 
Size:	26.5 KB 
ID:	4108
    Last edited by Daniil; Apr 17, 2012 at 11:42 AM. Reason: [CLOSED]
  2. #2
    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
  3. #3
    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;
            }
    
        });
  4. #4

    corrections for version 1.6

    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.
  5. #5
    Hello @Mimisss,

    Thank you for sharing!

Similar Threads

  1. [CLOSED] CalendarPanel - Add a new slot bellow each regular slot
    By supera in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Jul 11, 2012, 1:02 PM
  2. [CLOSED] CalendarPanel: How I lock moving and resize of Event slot?
    By supera in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Apr 24, 2012, 11:20 AM
  3. Replies: 9
    Last Post: Apr 18, 2012, 2:09 PM
  4. [CLOSED] CalendarPanel: How I insert a icon in Event slot?
    By supera in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 17, 2012, 8:19 PM
  5. Replies: 5
    Last Post: Mar 28, 2012, 7:38 PM

Tags for this Thread

Posting Permissions