Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Highlighting "Today" Column in Week View #683

Open
bareqja opened this issue Dec 17, 2024 · 10 comments
Open

Highlighting "Today" Column in Week View #683

bareqja opened this issue Dec 17, 2024 · 10 comments

Comments

@bareqja
Copy link

bareqja commented Dec 17, 2024

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
Copy link
Owner

@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
Copy link
Author

bareqja commented Jan 2, 2025

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
Copy link
Owner

twinssbc commented Jan 3, 2025

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

@bareqja
Copy link
Author

bareqja commented Jan 3, 2025

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
Copy link
Owner

twinssbc commented Jan 4, 2025

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
Copy link
Author

bareqja commented Jan 4, 2025

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:

image

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

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

@twinssbc
Copy link
Owner

twinssbc commented Jan 5, 2025

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.

image

@bareqja
Copy link
Author

bareqja commented Jan 7, 2025

yes.. you're correct.. the problem was in the css.. thanks for your support!

@bareqja
Copy link
Author

bareqja commented Jan 7, 2025

well i don't know if i should open a new issue but i will ask my question here:

Events Not Displaying in weekviewAllDayEventSectionTemplate

In the week view of the calendar, events are not appearing within the weekviewAllDayEventSectionTemplate, even though they are present in the filteredEvents array. The events should show up in the corresponding day's section, but they are not rendering.
like if i check the day variable is getting empty events array :
{
"date": "2025-01-07T11:00:00.000Z",
"events": [],
"dayHeader": "Dienstag, 07. Januar",
"selected": true,
"current": true,
"hasEvent": true
}

but if i check the filtered events i check the day has an all-day event .. where can i do something wrong?

i did a workaround which get the all-day events for the days but it doesnt work very good:

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

how i filter the events:

if (this.eventSource && Array.isArray(this.eventSource)) {
// Filter the events based on type, except the current time event
this.filteredEvents = this.eventSource.filter(x => typesToShow.includes(x.type) || x.type === 'currentTime');
}

can the problem be with the locale? or the start and end date?

@twinssbc
Copy link
Owner

twinssbc commented Jan 8, 2025

what's the startTime and endTime of your all day event. It needs to be in UTC date, you could check the EventSource section in README, it has samples.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants