Highlighting "Today" Column in Week View

[bareqja]

Description:
I am working on implementing a calendar view that highlights the "Today" column in the week view. The goal is to use weekviewNormalEventSectionTemplate to apply the styling for the "Today" column, but I encountered an issue when trying to use it in conjunction with weekviewNormalEventTemplate to render events.

Problem:
When I use weekviewNormalEventSectionTemplate to highlight the "Today" column, it works as expected for highlighting the column.
However, when I try to use weekviewNormalEventTemplate alongside it to render the events, the events do not display and if tried to get the events inside weekviewNormalEventSectionTemplate then they will not be shown correctly (range and styling and so on) i think this because weekviewNormalEventSectionTemplate and weekviewNormalEventTemplate seem to conflict when used together, causing the events to not be rendered properly on the calendar.

my Code:

` <calendar [eventSource]="filteredEvents"
[calendarMode]="defaultCalendarOptions.mode"
[currentDate]="defaultCalendarOptions.currentDate"
(onCurrentDateChanged)="onCurrentDateChanged($event)"
(onEventSelected)="onEventSelected($event)"
(onTitleChanged)="onViewTitleChanged($event)"
[step]="defaultCalendarOptions.step"
[startingDayWeek]="defaultCalendarOptions.startingDayWeek"
[startingDayMonth]="defaultCalendarOptions.startingDayMonth"
[dateFormatter]="defaultCalendarOptions.dateFormatter"
[locale]="defaultCalendarOptions.locale"
[allDayLabel]="defaultCalendarOptions.allDayLabel"
[dayviewAllDayEventSectionTemplate]="dayviewAllDayEventTemplate"
[dayviewNormalEventTemplate]="dayviewNormalEventTemplate"
[weekviewNormalEventSectionTemplate]="weekviewNormalEventSectionTemplate"
[weekviewNormalEventTemplate]="weekviewNormalEventTemplate"
[weekviewAllDayEventSectionTemplate]="weekviewAllDayEventSectionTemplate"
[monthviewEventDetailTemplate]="eventDetailTemplate">

<ng-template #weekviewNormalEventTemplate let-day="day" let-displayEvent="displayEvent">
<ion-item
class="calendar-event-inner event-template"
[ngClass]="{
'current-time-line': displayEvent.event.type === 'currentTime',
'current-day': isToday(day?.date),
'today-column': isToday(day?.date)
}"
[style.--background]="displayEvent.event.color"
[style.color]="displayEvent.event.fontColor"

{{ displayEvent.event.title }}

<ng-template #weekviewNormalEventSectionTemplate let-tm="tm">

`

Expected Outcome:
The "Today" column should be highlighted as expected, while still displaying the events correctly on the calendar without breaking the start-to-end date range for the events.

Any Suggestions?

[twinssbc]

@bareqja your custom template seems not complete, could you provide the full content so that I could give a try at my side?

<ng-template #weekviewNormalEventTemplate let-day="day" let-displayEvent="displayEvent">
<ion-item
class="calendar-event-inner event-template"
[ngClass]="{
'current-time-line': displayEvent.event.type === 'currentTime',
'current-day': isToday(day?.date),
'today-column': isToday(day?.date)
}"
[style.--background]="displayEvent.event.color"
[style.color]="displayEvent.event.fontColor"

{{ displayEvent.event.title }}

<ng-template #weekviewNormalEventSectionTemplate let-tm="tm">

[bareqja]

this is the Whole html :

<ion-content [fullscreen]="true">
  <div class="daily-structure-container">
    <ion-row class="ion-no-padding option-container">
			<ion-col size="12" class="ion-no-padding">
				<ion-row>
					<ion-col class="ion-text-start" size="auto">
						  <ion-button size="small" class="btn-nav" color="medium" (click)="backward()"><</ion-button>
          </ion-col>
          <ion-col class="ion-text-center vertical-center">
						<span class="w-100 date-title">
							{{viewTitle}}
						</span>
          </ion-col>
          <ion-col class="ion-text-end" size="auto">
            <ion-button size="small" class="btn-nav" color="medium" (click)="forward()">></ion-button>
          </ion-col>
          <ion-col class="ion-text-end" size="auto">
            <ion-button size="small" class="btn-nav" color="medium" (click)="toogleOptions()"><i class="fas fa-cog"></i>&nbsp;<i [class]="optionState"></i></ion-button>
          </ion-col>
				</ion-row>
			</ion-col>
			<ion-col size="12" class="ion-no-padding" *ngIf="showOptions">
				<ion-row>
					<ion-col>
						<ion-button size="small" expand="block" class="btn-option" color="medium" (click)="openFilterModal()">
							<i class="fas fa-filter"></i>&nbsp;Filter
						</ion-button>
					</ion-col>
					<ion-col>
						<ion-button size="small" expand="block" class="btn-option" [color]="disableTodayButton ? 'primary' : 'medium'" [disabled]="disableTodayButton" (click)="today()">Heute</ion-button>
					</ion-col>
				</ion-row>
			</ion-col>
			<ion-col size="12" class="ion-no-padding" *ngIf="showOptions">
				<ion-row>
					<ion-col>
						<ion-button size="small" expand="block" [color]="defaultCalendarOptions.mode === 'month' ? 'primary' : 'medium'" class="btn-option" (click)="changeMode('month')">Monat</ion-button>
					</ion-col>
					<ion-col>
						<ion-button size="small" expand="block" [color]="defaultCalendarOptions.mode === 'week' ? 'primary' : 'medium'" class="btn-option" (click)="changeMode('week')">Woche</ion-button>
					</ion-col>
					<ion-col>
						<ion-button size="small" expand="block" [color]="defaultCalendarOptions.mode === 'day' ? 'primary' : 'medium'" class="btn-option" (click)="changeMode('day')">Tag</ion-button>
					</ion-col>
				</ion-row>
			</ion-col>
		</ion-row>

    <ion-row class="calendar-container">
      <ion-col size="12" class="calendar-column">      
        <calendar [eventSource]="filteredEvents"
          [calendarMode]="defaultCalendarOptions.mode"
          [currentDate]="defaultCalendarOptions.currentDate"
          (onCurrentDateChanged)="onCurrentDateChanged($event)"
          (onEventSelected)="onEventSelected($event)"
          (onTitleChanged)="onViewTitleChanged($event)"
          [step]="defaultCalendarOptions.step"
          [startingDayWeek]="defaultCalendarOptions.startingDayWeek"
          [startingDayMonth]="defaultCalendarOptions.startingDayMonth"
          [dateFormatter]="defaultCalendarOptions.dateFormatter"
          [locale]="defaultCalendarOptions.locale"
          [allDayLabel]="defaultCalendarOptions.allDayLabel"
          [dayviewAllDayEventSectionTemplate]="dayviewAllDayEventTemplate"
          [dayviewNormalEventTemplate]="dayviewNormalEventTemplate"
          [weekviewNormalEventSectionTemplate]="weekviewNormalEventSectionTemplate"
          [weekviewNormalEventTemplate]="weekviewNormalEventTemplate"
          [weekviewAllDayEventSectionTemplate]="weekviewAllDayEventSectionTemplate"
          [monthviewEventDetailTemplate]="eventDetailTemplate">
        </calendar>    
      </ion-col>
    </ion-row>
  </div>
</ion-content>

<ng-template #weekviewAllDayEventSectionTemplate let-day="day" let-displayEvent="filteredEvents">
  <div *ngIf="filteredEvents && filteredEvents.length > 0">
    <div *ngFor="let event of filteredEvents">
      <ion-item
        *ngIf="event.allDay && isSameDay(day.date, event.startTime)"
        [style.--background]="event.color"
        [style.color]="event.fontColor"
        (click)="onEventSelected(event)"
      >
        {{ event.title }}
      </ion-item>
    </div>
  </div>
</ng-template>

<ng-template #weekviewNormalEventTemplate let-day="day" let-displayEvent="displayEvent">
  <ion-item
    class="calendar-event-inner event-template"
    [ngClass]="{
      'current-time-line': displayEvent.event.type === 'currentTime',
      'current-day': isToday(day?.date),
      'today-column': isToday(day?.date)
    }"
    [style.--background]="displayEvent.event.color"
    [style.color]="displayEvent.event.fontColor"
  >
  {{ getEventDescription(displayEvent.event.title) }}
</ion-item>
</ng-template>

<ng-template #dayviewNormalEventTemplate let-day="day" let-displayEvent="displayEvent">
  <ion-item
  class="calendar-event-inner event-template"
  [ngClass]="{
    'current-time-line': displayEvent.event.type === 'currentTime',
    'current-day': isToday(day?.date),
    'today-column': isToday(day?.date)
  }"
  [style.--background]="displayEvent.event.color"
  [style.color]="displayEvent.event.fontColor"
>
  {{ displayEvent.event.title }}
</ion-item>
</ng-template>
<ng-template #dayviewAllDayEventTemplate let-day="day" let-displayEvent="filteredEvents">
  <div *ngFor="let event of filteredEvents">
    <div *ngIf="event.allDay">
      <ion-item
      [style.--background]="event.color"
      [style.color]="event.fontColor"
      (click)="onEventSelected(event)"
      >
      {{ event.title }}
      </ion-item>
    </div>
  </div>
</ng-template>

<ng-template #eventDetailTemplate let-showEventDetail="showEventDetail" let-selectedDate="selectedDate" let-noEventsLabel="noEventsLabel">
  <div>
    <div *ngFor="let event of selectedDate.events" class="calendar-event w-100" (click)="onEventSelected(event)">
      <ion-item class="w-100 event-detail">
        <div class="event-detail-description">
          <ion-icon name="square" size="large" [color]="event.type === 0 ? 'warning' : event.type === 1 ? 'success' : event.type === 2 ? 'danger' : 'primary'"></ion-icon>
          <span class="ion-padding-start">{{event.title}}</span>
        </div>
      </ion-item>
    </div>
  </div>
</ng-template>

[twinssbc]

@bareqja I believe you are having issue with weekviewNormalEventSectionTemplate. I don't see it in your whole html code. Could you double check?

[bareqja]

the problem is that i can't use weekviewNormalEventSectionTemplate and weekviewNormalEventTemplate at the same time
like i tried to use weekviewNormalEventSectionTemplate for highlighting the Today column cells but by doing that can't show the events anymore that will be shown using weekviewNormalEventTemplate?
this is my question to find a way heighlighting the the today column?
is that clear what i mean?

[twinssbc]

I tried below code, which directly referencing the normal event template in the normal event section template. It's working.

  <calendar
    [eventSource]="eventSource"
    [queryMode]="calendar.queryMode"
    [calendarMode]="calendar.mode"
    [currentDate]="calendar.currentDate"
    [step]="calendar.step"
    [preserveScrollPosition]="calendar.preserveScrollPosition"
    [startHour]="calendar.startHour"
    [scrollToHour]="calendar.scrollToHour"
    [dayviewShowCategoryView]="calendar.dayviewShowCategoryView"
    (onCurrentDateChanged)="onCurrentDateChanged($event)"
    (onEventSelected)="onEventSelected($event)"
    (onTitleChanged)="onViewTitleChanged($event)"
    (onTimeSelected)="onTimeSelected($event)"
    (onDayHeaderSelected)="onDayHeaderSelected($event)"
    [weekviewNormalEventSectionTemplate]="weekviewNormalEventSectionTemplate"
  >
  </calendar>

<ng-template #weekviewNormalEventSectionTemplate let-tm="tm" let-hourParts="hourParts" let-eventTemplate="eventTemplate" let-date="isToday">
  <div [ngClass]="{'calendar-event-wrap': tm.events, 'is-today': ifToday(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]="weekviewNormalEventTemplate"
                       [ngTemplateOutletContext]="{displayEvent:displayEvent}">
          </ng-template>
      </div>
  </div>
</ng-template>


<ng-template #weekviewNormalEventTemplate let-displayEvent="displayEvent">
  <div class="calendar-event-inner">custom: {{displayEvent.event.title}}</div>
</ng-template>

[bareqja]

you see that if i apply your approach .. then it doesnt work as expected..
in the photo you see that the events then will not be shown within correct range and the line representing the actual hour time will also be shown wrong if there is event on the actual time
by applying your Suggestions:

if i show you the expected behavior (which is be done using my provided code):

the version i use : "ionic2-calendar": "^0.6.9",

[twinssbc]

I think this is more like a css style issue on the html element in weekviewNormalEventTemplate .
Do you set some custom css styling? for example, in my browser, this calendar-event class has "position: absolute", so that the outer element height won't be extended.