Ionic2-calendar, customize styles?

Ionic Framework ionic-v3
1

Using the ionic2-calendar directive how to customize event colors on the calendar? Is there any way to do that? Also how to use my own event-list template instead of native one?

2

Check out the documentation here: Ionic2-calendar, customize styles?

Here’s an example of a custom template for the monthViewEventDetail:

<calendar [monthviewEventDetailTemplate]=“template”
[eventSource]=“eventSource”
[calendarMode]=“calendar.mode”
[currentDate]=“calendar.currentDate”
(onCurrentDateChanged)=“onCurrentDateChanged($event)”
(onEventSelected)=“onEventSelected($event)”
(onTitleChanged)=“onViewTitleChanged($event)”
(onTimeSelected)="onTimeSelected($event)"
step=“30”>

<template #template let-showEventDetail="showEventDetail"
let-selectedDate="selectedDate"
let-noEventsLabel=“noEventsLabel”>

<h4 class="selectedEventDate">{{selectedDate.date | friendlydate}}</h4>
<h5 class="noEvents" *ngIf="selectedDate.events.length == 0">No Events</h5>
<ion-list>
  <ion-item (click)="onEventSelected(event)" *ngFor="let event of selectedDate.events">
    <h2>{{event.title}}</h2>
    <p>Start: {{event.startTime | friendlydatetime}}</p>
    <p>end: {{event.endTime | friendlydatetime}}</p>
  </ion-item>
</ion-list>
1 Like
3

image

4

oh i have asked this question long time ago

5

Incase someone is going through the same issue. It might be useful that’s all

6

but you just posted a screenshot, how can it be helpful?