ionic2-calendar - styling events. Different color according event

[jcmendes9898]

So I've been working on this for the last days, i really strugle to make it work. I'll show my final result, the best i can do for my project. I'm using Ionic4. So base on other people solutions, my final code looks like this:

my Scss looks like this:

`:host ::ng-deep .monthview-primary-with-event { background-color: white !important; color: black !important;

} :host ::ng-deep .monthview-selected { background-color: white !important; color: black !important; }

.calendar-day { border-radius: 6px; padding: 3px 5px;

&.anoAtual { background-color: orange; color: white;
}

&.anoAnterior { background-color: brown; color: white; } }my html:<calendar [monthviewDisplayEventTemplate]="template" [eventSource]="events" [calendarMode]="calendar.mode" [currentDate]="currentDate" [startingDayMonth]="calendar.startingDayMonth" (onTitleChanged)="onViewTitleChanged($event)" (onTimeSelected)="onTimeSelected($event)" (onCurrentDateChanged)="onCurrentDateChanged($event)" step="30" [showEventDetail]="false" [autoSelect]="false" [lockSwipeToPrev]="lockSwipeToPrev" [markDisabled]="markDisabled">

<ng-template #template let-view="view" let-row="row" let-col="col">

{{view.dates[row*7+col].label}}

` and my typescript file: ` this.addEventValue = new EventPush(); var date = new Date(2019,0,11) this.addEventValue.allDay = false; this.addEventValue.title = "Férias"; this.addEventValue.startTime = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(),1)); this.addEventValue.endTime = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(),11)); this.addEventValue.cor = "anoAnterior"; this.events.push(this.addEventValue)`

This is the way I found that worked out for me. I hope i can help someone wich is in the same situation!

[sdore2021]

how to you working this html template "<ng-template #template let-view="view" let-row="row" let-col="col">---" in yours typescript file. I have this problem. i wanna see you extract code about working the <ng-template #template> if that is possible.

[twinssbc]

@sdore2021 You probably want to check the default template used in the calendar and modify them accordingly. https://github.com/twinssbc/Ionic2-Calendar/blob/v5/src/calendar.ts

[sdore2021]

thank you so much. I finaly resolve my problem afther reading many last comment in issue section.

De: "twinssbc" [email protected] À: "twinssbc/Ionic2-Calendar" [email protected] Cc: "Samouka Dore" [email protected], "Mention" [email protected] Envoyé: Mardi 26 Novembre 2019 00:47:45 Objet: Re: [twinssbc/Ionic2-Calendar] ionic2-calendar - styling events. Different color according event (#479)

[ https://github.com/sdore2021 | @sdore2021 ] You probably want to check the default template used in the calendar and modify them accordingly. [ https://github.com/twinssbc/Ionic2-Calendar/blob/v5/src/calendar.ts | https://github.com/twinssbc/Ionic2-Calendar/blob/v5/src/calendar.ts ]

— You are receiving this because you were mentioned. Reply to this email directly, [ https://github.com/twinssbc/Ionic2-Calendar/issues/479?email_source=notifications&email_token=ANBKNDFTH6ZKG7QZRMAATHLQVRP2DA5CNFSM4JQN5NQKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEFEGN3A#issuecomment-558393068 | view it on GitHub ] , or [ https://github.com/notifications/unsubscribe-auth/ANBKNDGONLN47NX2FSK5VFTQVRP2DANCNFSM4JQN5NQA | unsubscribe ] .

[kelokchan]

Can you show me how you solved this issue?

[sdore2021]

you don't need to modify your typescrypt code for working this template, just insert this default template bellow you html code and personnalize the view. for me I just replace list component to card component and delete hour from view.