We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to customize MonthAgenda Cell?


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.  


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 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> 
                content: '\e242'; 
                content: '\e813'; 

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 😊 

Live Chat Icon For mobile
Up arrow icon