How to customize MonthAgenda Cell?

Hi,

Could you please provide some samples to customize the cell in agenda list? For example, I want to have different buttons between title and time, the button is based on the data.  

Thanks,

Attachment: 20190610143134_a1d40624.zip

3 Replies

KK Karthigeyan Krishnamurthi Syncfusion Team June 11, 2019 10:22 AM UTC

Hi Garry, 
 
Syncfusion greetings. 
 
We have prepared the below sample to display the custom button in Agenda view based on event custom field Export using template option. 
 
{ 
        Id: 2, 
        Subject: 'Thule Air Crash Report', 
        Location: 'Newyork City', 
        Export: "Print", 
        StartTime: new Date(2019, 0, 7, 12, 0), 
        EndTime: new Date(2019, 0, 7, 14, 0), 
        CategoryColor: '#357cd2' 
    } 
<e-view option="Agenda"> 
          <ng-template #eventTemplate let-data> 
            <ng-container ngTemplateOutletContext]="{data:data}"> 
              <div class="temp"> 
                <div> 
                  <div class="subject">{{data.Subject}}</div> 
                  <div class="action"><span class="e-icons {{data.Export}}"></span><span class="{{data.Export}}" style=""> {{data.Export}}</span></div> 
                
                <div class="location">{{data.Location}}</div> 
                <div class="time" >Time: {{getTimeString(data.StartTime)}} - {{getTimeString(data.EndTime)}}</div> 
            </div> 
        </div></ng-container> 
        </ng-template>         
      </e-view> 
.e-icons.Excel:before{ 
                content: '\e242'; 
                color:green; 
            } 
   .e-icons.Print:before{ 
                content: '\e813'; 
                color:black; 
            } 
 
Regards, 
Karthi 



GW Garry Wu June 11, 2019 06:28 PM UTC

Thank you for your quick response. It works great.


KK Karthigeyan Krishnamurthi Syncfusion Team June 12, 2019 03:23 AM UTC

Most welcome 😊 


Loader.
Up arrow icon