How to Display Current time indicator

[Pinkesh-25]

Can you please help me how to display current time indicator in day or weekview section?

[twinssbc]

@Pinkesh-25 How do you want to indicate the current time? One way I can think out is changing the background. You could leverage the customized template. For example,

You could define a weekviewNormalEventSectionTemplate. Notice that I put a calendar-current ngClass in it.

<ng-template #template let-tm="tm" let-hourParts="hourParts" let-eventTemplate="eventTemplate">
  <div [ngClass]="{'calendar-event-wrap': tm.events, 'calendar-current': isCurrentTime(tm.time)}" *ngIf="tm.events">
    <div *ngFor="let displayEvent of tm.events" class="calendar-event" tappable
         (click)="onEventSelected(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>

  <calendar [eventSource]="eventSource"
            [calendarMode]="calendar.mode"
            [currentDate]="calendar.currentDate"
            (onCurrentDateChanged)="onCurrentDateChanged($event)"
            (onEventSelected)="onEventSelected($event)"
            (onTitleChanged)="onViewTitleChanged($event)"
            (onTimeSelected)="onTimeSelected($event)"
            (onDayHeaderSelected)="onDayHeaderSelected($event)"
            [weekviewNormalEventSectionTemplate]="template"
            [step]="calendar.step"

Then in your component ts, you need to implement the isCurrentTime logic

  isCurrentTime = (time: Date) => {
    const now = new Date();
    if(now.getDate() === time.getDate() && now.getHours() === time.getHours()) {
      return true;
    }
    return false;
  };

Last but not least, specify the calendar-current style in your components css

.calendar-current {
  background-color: orange;
  z-index: 10001;
}

[twinssbc]

This is an example, you probably could put some icon on the slot to make it more beautiful.

[Pinkesh-25]

Hi @twinssbc It's working good Thanks. I have one more doubt can we show current time also? Please check the attached screenshot below? https://www.dropbox.com/s/iv3t512h4w3zzv0/Screenshot%202021-08-04%20at%2013.53.38.png?dl=0

[twinssbc]

@Pinkesh-25 Unfortunately this kind of current time indicator is not supported.