-
Notifications
You must be signed in to change notification settings - Fork 200
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
Comments
@bareqja your custom template seems not complete, could you provide the full content so that I could give a try at my side?
|
this is the Whole html :
|
@bareqja I believe you are having issue with weekviewNormalEventSectionTemplate. I don't see it in your whole html code. Could you double check? |
the problem is that i can't use weekviewNormalEventSectionTemplate and weekviewNormalEventTemplate at the same time |
I tried below code, which directly referencing the normal event template in the normal event section template. It's working.
|
yes.. you're correct.. the problem was in the css.. thanks for your support! |
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. 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:
how i filter the events: if (this.eventSource && Array.isArray(this.eventSource)) { can the problem be with the locale? or the start and end date? |
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. |
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?
The text was updated successfully, but these errors were encountered: