Custom weekviewAllDayEventTemplate ignores setting for step

[tubauwe]

I'm trying to costumize the week view of events using the following code:

<ng-template #weekviewNormalEventTemplate let-displayEvent="displayEvent"> <div class="calendar-event-inner" [style.top]="(37*displayEvent.startOffset/hourParts)+'px'" [style.left]="100/displayEvent.overlapNumber*displayEvent.position+'%'" [style.width]="100/displayEvent.overlapNumber+'%'" [style.height]="37*(displayEvent.endIndex - displayEvent.startIndex) - 4 + 'px'" [ngStyle]="{'background-color': displayEvent.event.eventColor}" >{{displayEvent.event.title}}</div> </ng-template>

My problem is, that it is ignoring my settings like step="30". How can I achieve a more detailed view by step? Thanks in advance!

[twinssbc]

@tubauwe How do you use your template in your html code? It is bound to which template option? If you check the source code in calendar.ts. The normal event section template already takes care of the position and size of each event for you. You just need to add some style to normal event template to customize the color or font.

        <ng-template #defaultNormalEventSectionTemplate let-tm="tm" let-hourParts="hourParts" let-eventTemplate="eventTemplate">
            <div [ngClass]="{'calendar-event-wrap': tm.events}" *ngIf="tm.events">
                <div *ngFor="let displayEvent of tm.events" class="calendar-event" tappable
                     (click)="eventSelected(displayEvent.event)"
                     [ngStyle]="{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}">
                    <ng-template [ngTemplateOutlet]="eventTemplate"
                                 [ngTemplateOutletContext]="{displayEvent:displayEvent}">
                    </ng-template>
                </div>
            </div>
        </ng-template>

[tubauwe]

Thanks for your response. But if I insert the following code in html

<ng-template #weekviewNormalEventTemplate let-displayEvent="displayEvent">
    <div class="calendar-event-inner" [ngStyle]="{'background-color': displayEvent.event.eventColor}">
        {{ displayEvent.event.title }}
    </div>
</ng-template>

and

<calendar
    ...
   [weekviewNormalEventTemplate]="weekviewNormalEventTemplate"`
    ...
>
</calendar>

then all events have the same height. There's no difference corresponding to their duration. What's the problem?

[twinssbc]

@tubauwe if you check the template I provided, I also use ngStyle to set the position and height of each event.

                     [ngStyle]="{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}">

[tubauwe]

@twinssbc thanks for your response. I've seen this, but using this, all events have the same height. That's my problem and I don't know, how to change.

[twinssbc]

@tubauwe could you provide your current HTML code? Is only height not correct? The position and width of the events are correct?