how to personalize ionic2-calendar

[sdore2021]

hello. someone can help me. I want to personnalize my view event detail. so i have to add un new component in my file.ts and call it in my html file. but i don't kwon how to use this TemplateRef:

monthviewEventDetailTemplate: TemplateRef<IMonthViewEventDetailTemplateContext>

myfile.ts

@Component({ selector: 'page-agenda', templateUrl: 'agenda.html', }) //#monthviewDefaultEventDetailTemplate --> dans le template

@Component({ selector: 'my-calendar', template: <template #monthviewDefaultEventDetailTemplate let-showEventDetail="showEventDetail" let-selectedDate="selectedDate" let-noEventsLabel="noEventsLabel"> <ion-list class="event-detail-container" has-bouncing="false" *ngIf="showEventDetail" overflow-scroll="false"> <ion-item *ngFor="let event of selectedDate?.events" (click)="eventSelected(event)"> <span *ngIf="!event.allDay" class="monthview-eventdetail-timecolumn">{{event.startTime|date: 'HH:mm'}} ------------ {{event.endTime|date: 'HH:mm'}} </span> <span *ngIf="event.allDay" class="monthview-eventdetail-timecolumn">All day</span> <span class="event-detail"> | {{event.title}}</span> </ion-item> <ion-item *ngIf="selectedDate?.events.length==0"> <div class="no-events-label">{{noEventsLabel}}</div> </ion-item> </ion-list> </template>, styles: [.event-detail-container { border-top: 2px darkgrey solid; } .no-events-label { font-weight: bold; color: darkgrey; text-align: center; } .event-detail { cursor: pointer; white-space: nowrap; text-overflow: ellipsis; }] })

[sdore2021]

how to use this: monthviewEventDetailTemplate: TemplateRef<IMonthViewEventDetailTemplateContext>

[twinssbc]

@sdore2021 You need to put the template code in HTML file like below:

    <ng-template #template let-showEventDetail="showEventDetail" let-selectedDate="selectedDate" let-noEventsLabel="noEventsLabel">
    ... 
    </ng-template>

    <calendar ... [monthviewEventDetailTemplate]="template"></calendar>

[sdore2021]

Thanks for yours answers.

so i need to create a new component in ionic (e.g : ionic g component calendar) and insert template code in calendar.html like this:

and add this option in my agenda.html but i don't know how to use this component in my agenda.ts code because the onligne documentation said that my problem is how to put this argument {"showEventDetail', "seletedDate ", "noEventLabel "} and Template<Imonth...Contexte> because they are no example using in website internet.

Thank you.

De: "twinssbc" [email protected] À: "twinssbc/Ionic2-Calendar" [email protected] Cc: "Samouka Dore" [email protected], "Mention" [email protected] Envoyé: Jeudi 21 Novembre 2019 15:05:24 Objet: Re: [twinssbc/Ionic2-Calendar] how to personalize ionic2-calendar (#478)

[ https://github.com/sdore2021 | @sdore2021 ] You need to put the template code in HTML file like below: <ng-template #template let-showEventDetail="showEventDetail" let-selectedDate="selectedDate" let-noEventsLabel="noEventsLabel"> ...

<calendar ... [monthviewEventDetailTemplate]="template"></calendar> 

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

[twinssbc]

@sdore2021

You don't need to specify the showEventDetail, selectedDate or noEventsLabel by yourself. It is passed in automatically, you just need to use it.

This link may give you some idea. https://angular.io/api/common/NgTemplateOutlet#description

[sdore2021]

okay thanks. I think I need to learn angular before continue this project because i have not understood yet how to use this in my file.ts

thank you for all.

De: "twinssbc" [email protected] À: "twinssbc/Ionic2-Calendar" [email protected] Cc: "Samouka Dore" [email protected], "Mention" [email protected] Envoyé: Samedi 23 Novembre 2019 07:24:26 Objet: Re: [twinssbc/Ionic2-Calendar] how to personalize ionic2-calendar (#478)

[ https://github.com/sdore2021 | @sdore2021 ]

You don't need to specify the showEventDetail, selectedDate or noEventsLabel by yourself. It is passed in automatically, you just need to use it.

This link may give you some idea. [ https://angular.io/api/common/NgTemplateOutlet#description | https://angular.io/api/common/NgTemplateOutlet#description ]

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

[sdore2021]

thanks. my problem is solved.