How to customize MonthAgenda Cell?

[Garry Wu]

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

[Karthigeyan Krishnamurthi]

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. 

https://stackblitz.com/edit/angular-xhfwd8-mjjgnc?file=app.component.ts 

https://ej2.syncfusion.com/angular/documentation/schedule/appointments/?no-cache=1#using-template 

 

{ 

        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 

[Garry Wu]

Thank you for your quick response. It works great.

[Karthigeyan Krishnamurthi]

Most welcome 😊