How can change template event item ??!

[lampofdrog]

hi,

how can i use this component ([monthviewEventDetailTemplate]=“template”) ??

thanks

[twinssbc]

@lampofdrog You need to define an template, then reference it in the calendar element attribute.

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

  <calendar ... [monthviewEventDetailTemplate]=“template”></calendar>

The default monthviewEventDetailTemplate code is below:

<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>

[divijm]

@lampofdrog @twinssbc Can you guys expand on this please! I am new to Ionic and trying to customise the events in the weekview but not sure where to add the code in the folder structure exactly?

Can you please help clarify.

Thanks in advance! :)

[twinssbc]

@lampofdrog Below template code is put in the same html file that where you declare the calendar element.

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

[micaz]

<template #template let-showEventDetail="showEventDetail" let-selectedDate="selectedDate" let-noEventsLabel="noEventsLabel"> ... @twinssbc Can I Pass Additinal Paramater (not showEventDetail, selectedDate, noEventsLabel)

Sorry My Mistake Try Use Direct ({{value}} Then It Work..

[twinssbc]

@micaz Unfortunately it doesn't support other parameter. What else info do you want to pass?

[GrindingOgre]

@twinssbc Hi, i'm using this thread to make a question about the monthviewEventDetailTemplate.

I've created a template that is a ion-list with all the events in the selected day of the calendar, but what i get is that all my content (even the calendar) scrolls up. What i'm trying to get done is that only the ion-list should scroll... Can you help me with this behaviour?

this is my component code:

<ion-content padding>
  <template #template let-selectedDate="selectedDate.events" let-noEventsLabel="noEventsLabel">
    <ion-list *ngIf="selectedDate.length > 0">
      <button ion-item *ngFor="let event of selectedDate" (click)="onEventSelected(event)">
        {{event.title}}<br>
        {{printDate(event)}}
      </button>
    </ion-list>
    <h4 class="text-center" *ngIf="selectedDate.length == 0">{{noEventsLabel}}</h4>
  </template>
  <h2 class="month">{{ monthLabel | capitalize:"first-only" }}</h2>
  <calendar [calendarMode]="calendar.mode"
    [noEventsLabel]="calendar.noEventsLabel"
    [monthviewEventDetailTemplate]="template"
    [allDayLabel]="calendar.allDayLabel"
    [currentDate]="calendar.currentDate"
    [locale]="calendar.locale"
    [eventSource]="events"
    (onCurrentDateChanged)="onCurrentDateChanged($event)"
    (onRangeChanged)="reloadSource($event)"
    (onEventSelected)="onEventSelected($event)"
    (onTitleChanged)="onViewTitleChanged($event)"
    step="30">
  </calendar>
</ion-content>

[twinssbc]

@GrindingOgre This is because the scroll bar is at the ion-content level, not ion-list level. So the calendar itself has the css style, height:100%, so it will get the full height of the parent element. While before calendar, you also have the h2 element, so the total height exceeds the parent element, that's why it appears the scroll bar.

This problem actually could be simplified to one parent element has two child elements. The first one has kind of fixed height, while the second element needs to occupy the remaining height. Below link contains couple solutions. https://stackoverflow.com/questions/11225912/make-div-height-occupy-parent-remaining-height

Once you achieve this, the calendar element will occupy the remaining height of the whole page. But you will have the same problem inside the calendar. The calendar contains two sections, the month table and the event detail list. So you will need to make the event detail list occupy the remaining height of the whole calendar height.

[GrindingOgre]

@twinssbc At last i've found a solution to my problem, but i think that it's just for me, because i need just the month view.

In the css i've put this rule .monthview-container { height:auto; }

Thanks :)

[abrseq]

how can i use this in my ionic project? coz using the above codes shows some error like let is not allowed,and using templates is showing no difference.I just want to show the list of events in another ion-segment.Please help me if you already know the solution...Thanks in advance

[GrindingOgre]

@abrseq What i did was configuring the calendar the same way the readme suggests, then i've created a ng-template with a template var name that you should use with the monthViewEventDetailTemplate:

ES: In the ts component class i've created a calendar object with all those properties

calendar = {
    noEventsLabel: 'Nessun evento presente',
    allDayLabel: '',
    mode: 'month',
    locale: 'it',
    currentDate: new Date(),
    dateFormatter: {
      formatMonthViewDay: function (date: Date) {
        return date.getDate().toString();
      },
      formatMonthViewDayHeader: function (date: Date) {
        return 'MonMH';
      },
      formatMonthViewTitle: function (date: Date) {
        return 'testMT';
      },
      formatWeekViewDayHeader: function (date: Date) {
        return 'MonWH';
      },
      formatWeekViewTitle: function (date: Date) {
        return 'testWT';
      },
      formatWeekViewHourColumn: function (date: Date) {
        return 'testWH';
      },
      formatDayViewHourColumn: function (date: Date) {
        return 'testDH';
      },
      formatDayViewTitle: function (date: Date) {
        return 'testDT';
      }
    }
  };

And in the html template file, i've written these things.

<calendar [calendarMode]="calendar.mode" [noEventsLabel]="calendar.noEventsLabel" [monthviewEventDetailTemplate]="template"
    [allDayLabel]="calendar.allDayLabel" [currentDate]="calendar.currentDate" [locale]="calendar.locale" [eventSource]="events"
    (onCurrentDateChanged)="onCurrentDateChanged($event)" (onRangeChanged)="reloadSource($event)" (onEventSelected)="onEventSelected($event)"
    (onTitleChanged)="onViewTitleChanged($event)" [autoSelect]="false" step="30">
  </calendar>
  <ng-template #template let-selectedDate="selectedDate.events" let-noEventsLabel="noEventsLabel">
    <ion-list *ngIf="selectedDate.length > 0" no-lines class="event-list" padding>
      <button ion-item detail-push *ngFor="let event of selectedDate" (click)="onEventSelected(event)" class="event-button">
        <ion-icon name="calendar" item-start></ion-icon>
        <h1>{{event.title}}</h1>
        {{event.citta}} - {{printDate(event)}}
      </button>
    </ion-list>
    <h4 class="text-center" *ngIf="selectedDate.length == 0">{{noEventsLabel}}</h4>
  </ng-template>

What kind of error are you getting?

[abrseq]

aw thank you @GrindingOgre i just followed '