Calendar data inside markup in Extensible Calendar v1.5.2 and ExtJS v4.2

Question

How can i access the calendar data inside my event, i mean not in the template, but else where. The idea is, change the template based on the "Confirmed" value that originates from the calendar store.

Here is my code, but no luck so far!

Ext.override(Extensible.calendar.view.DayBody, {
    getEventBodyMarkup: function() {
        if(!this.eventBodyMarkup) {

            // can't seem to get this section to work properly
            if (this.data.Confirmed === 1) // I need to access the event store in here...
                 var statusText='Ok';
            else 
                 var statusText='Ko';

            this.eventBodyMarkup = ['<p class="ellipsis">{Title}</br><strong>{ServiceName}</strong></br>'+statusText+'{Notes}</p>',
                '<tpl if="_isReminder">',
                    '<i class="ext-cal-ic ext-cal-ic-rem">&#160;</i>',
                '</tpl>',
                '<tpl if="_isRecurring">',
                    '<i class="ext-cal-ic ext-cal-ic-rcr">&#160;</i>',
                '</tpl>'
            ].join('');
        }
        return this.eventBodyMarkup;
    },
  }
);

Could anyone please help me?

Thanks in advance!

Answer 1

This Post ist pretty old, but i run myself into this problem recently and the function getEventBodyMarkup is only providing seperated template markup and isn't called for each event. I am not that familiar with the Extensible Calendar App but my solution was to override the function getTemplateEventData here is a quick solution to your example but note that i am running v1.0-rc1 on ExtJs 3.4 but the procedure can easly adapted for ExtJs 4+

Ext.apply(Ext.ensible.cal.DayBodyView.prototype,{
  getEventBodyMarkup: function() {
    if(!this.eventBodyMarkup) {
      //just add a template variable/placeholder to your variable
      // in this case i choose _statusText
      this.eventBodyMarkup = ['<p class="ellipsis">{Title}</br>',
        '<strong>{ServiceName}</strong></br>{_statusText}{Notes}</p>',
          '<tpl if="_isReminder">',
            '<i class="ext-cal-ic ext-cal-ic-rem">&#160;</i>',
          '</tpl>',
          '<tpl if="_isRecurring">',
             '<i class="ext-cal-ic ext-cal-ic-rcr">&#160;</i>',
          '</tpl>'
      ].join('');
    }
    return this.eventBodyMarkup;
  }

  // now override the template data provider
  getTemplateEventData : function(evt){
    // --- 
    // essential code from the overwritten function
    // ---
    var M = Extensible.cal.EventMappings,
      extraClasses = [this.getEventSelectorCls(evt[M.EventId.name])],
      colorCls = 'x-cal-default';

    this.getTemplateEventBox(evt);

    if(this.calendarStore && evt[M.CalendarId.name]){
      var rec = this.calendarStore.getById(evt[M.CalendarId.name]);
      colorCls = 'x-cal-' + rec.data[Ext.ensible.cal.CalendarMappings.ColorId.name];
    }
    colorCls += (evt._renderAsAllDay ? '-ad' : '') + (Ext.isIE || Ext.isOpera ? '-x' : '');
    extraClasses.push(colorCls);

    if(this.getEventClass){
      var rec = this.getEventRecord(evt[M.EventId.name]),
      cls = this.getEventClass(rec, !!evt._renderAsAllDay, data, this.store);      
      extraClasses.push(cls);
    }

    // ---
    // Custom code starts here
    // ---
    var data = {}; // is going to store all your custom template vars

    if(this.getEventRecord(evt[M.EventId.name]).data.Confirmed===1) {
      data._statusText="OK";
    } else {
      data._statusText="Ko";
    }

    return Ext.applyIf(data, evt);
  }
});

Hope you get the idea, this is propably not best pratice, but it solves your problem or others who come accros this problem. Make sure that you don't override any reserved variables in the data store, i used Ext.applyIf(...) which prevents such accidents.

Answer 2

Use if condition inside your template:

this.eventBodyMarkup = ['<p class="ellipsis">{Title}</br><strong>{ServiceName}</strong></br>'
            '<tpl if="Confirmed==1">OK<tpl else>KO</tpl>{Notes}</tpl></p>',
            '<tpl if="_isReminder">',
                '<i class="ext-cal-ic ext-cal-ic-rem">&#160;</i>',
            '</tpl>',
            '<tpl if="_isRecurring">',
                '<i class="ext-cal-ic ext-cal-ic-rcr">&#160;</i>',
            '</tpl>'
        ].join('');