Get User index on hourSegmentClicked event of Day View Scheduler

[horsebuzz]

Is your feature request related to a problem? Please describe I would like to get user index when an empty hour segment is clicked along with date

Describe the solution you'd like

Solution could be to emit user index along with date on hourSegmentClicked event of event-day-scheduler

[matts-bot[bot]]

Thanks so much for opening an issue! If you'd like me to give priority to answering your issue or would just like to support this project, then please consider sponsoring me

[billyjov]

@horsebuzz What do you mean by "user index" ?

[no-response[bot]]

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.

[horsebuzz]

I have asked the same question on SO as well.

Here is the link How to get user id on hour segment click

In a day-view-scheduler when an empty hour segment is clicked, how to get column number?

Depending on column number, I can get user details and create event for that user.

[abdulrahman5020]

@mattlewis92 Sir Kindly a minute of your time I have the same question I want to click on an hour segment and get the data of the column header What ever is in the header for example the demos have user names like John So if i click any hour segment below john I want to get the username john

https://github.com/mattlewis92/angular-calendar/issues/1381#issue-758920852

[Nanooneg]

You can retrieve column index on click event like that :

` onClick( mouseDownEvent: MouseEvent, segmentElement: HTMLElement ){

const columnsClicked = Math.round(mouseDownEvent.clientX / segmentElement.offsetWidth);
const userClicked = this.users[columnsClicked - 1];

} `

html <ng-template #dayViewHourSegmentTemplate let-segment="segment" let-locale="locale" let-segmentHeight="segmentHeight" let-isTimeLabel="isTimeLabel"> <div #segmentElement class="cal-hour-segment" [style.height.px]="segmentHeight" [class.cal-hour-start]="segment.isStart" [class.cal-after-hour-start]="!segment.isStart" (mwlClick)="onClick(segment, $event, segmentElement, isTimeLabel)"> <div class="cal-time" *ngIf="isTimeLabel"> {{ segment.date | calendarDate:'weekViewHour':locale }} </div> </div> </ng-template>

<day-view-scheduler [viewDate]="viewDate" [events]="events" [users]="users" [dayStartHour]="dayStartHour" [dayEndHour]="dayEndHour" [hourSegments]="hourSegments" [hourSegmentTemplate]="dayViewHourSegmentTemplate" (eventTimesChanged)="eventTimesChanged($event)" (userChanged)="userChanged($event)" (onEventClicked)="updateEvent($event)"> </day-view-scheduler>

I use custom template for hourSegments but if you don't i think you could implement onClick() method in DayViewScheduler component et get clickAction information threw it...

edit : sorry for the code displayed like that i try to use "insert code" button but ... :/

[abdulrahman5020]

You can retrieve column index on click event like that :

` onClick( mouseDownEvent: MouseEvent, segmentElement: HTMLElement ){

const columnsClicked = Math.round(mouseDownEvent.clientX / segmentElement.offsetWidth);
const userClicked = this.users[columnsClicked - 1];

} `

html <ng-template #dayViewHourSegmentTemplate let-segment="segment" let-locale="locale" let-segmentHeight="segmentHeight" let-isTimeLabel="isTimeLabel"> <div #segmentElement class="cal-hour-segment" [style.height.px]="segmentHeight" [class.cal-hour-start]="segment.isStart" [class.cal-after-hour-start]="!segment.isStart" (mwlClick)="onClick(segment, $event, segmentElement, isTimeLabel)"> <div class="cal-time" *ngIf="isTimeLabel"> {{ segment.date | calendarDate:'weekViewHour':locale }} </div> </div> </ng-template>

<day-view-scheduler [viewDate]="viewDate" [events]="events" [users]="users" [dayStartHour]="dayStartHour" [dayEndHour]="dayEndHour" [hourSegments]="hourSegments" [hourSegmentTemplate]="dayViewHourSegmentTemplate" (eventTimesChanged)="eventTimesChanged($event)" (userChanged)="userChanged($event)" (onEventClicked)="updateEvent($event)"> </day-view-scheduler>

I use custom template for hourSegments but if you don't i think you could implement onClick() method in DayViewScheduler component et get clickAction information threw it...

edit : sorry for the code displayed like that i try to use "insert code" button but ... :/

Hey I have tried your code but the onClick function does not output any value I only get

NaN on columnsClicked and undefined on userClicked

Can you share the whole code or post it online somewhere please

[Nanooneg]

OnClick() method is a method on my custom template. If you don't have one you should use (mwlClick) event inside DayViewScheduler component :

<mwl-calendar-week-view-hour-segment #segmentHTML *ngFor="let segment of hour.segments; trackBy: trackByHourSegment" [style.height.px]="hourSegmentHeight" [segment]="segment" [segmentHeight]="hourSegmentHeight" [locale]="locale" [customTemplate]="hourSegmentTemplate" (mwlClick)=" hourSegmentClicked.emit({ date: segment.date, sourceEvent: $event }) " [clickListenerDisabled]="hourSegmentClicked.observers.length === 0" mwlDroppable [dragOverClass]=" !dragActive || !snapDraggedEvents ? 'cal-drag-over' : null " dragActiveClass="cal-drag-active" (drop)="eventDropped($event, segment.date, false)" ></mwl-calendar-week-view-hour-segment>

[oclockvn]

this is my workaround, it works but don't think this is a best solution:

<mwl-calendar-week-view-hour-segment
  *ngFor="let segment of hour.segments; trackBy: trackByHourSegment"            
   (mwlClick)="onEmptySlotClicked(segment.date, $event)">
</mwl-calendar-week-view-hour-segment>

  onEmptySlotClicked(date: Date, mouseEvent: any) {
    const col = mouseEvent.target.closest(".cal-day-column");
    const colIndex = [...col.parentElement.children].indexOf(col);
    const userId = this.users[colIndex].id;

    this.emptySlotClicked.emit({
      date,
      extra: {
        userId,
      },
    });
  }

result:

[Gassa1999]

@Nanooneg your mistake was that you took round, which split the user column into 2 columns (0 - 0.5 = 0 and 0.5 - 1 = 1) and this caused problems with the array. However if you take floor or ceil it works correctly. then there is only the problem that it is shifted by 70 px because of cal-time-label-column, so you calculate -70 to compensate this. For me it works now fine.

const columnsClicked = Math.floor((mouseDownEvent.clientX-70)/segmentElement.offsetWidth);
const userClicked = this.users[columnsClicked];

or with ceil

const columnsClicked = Math.ceil((mouseDownEvent.clientX-70)/segmentElement.offsetWidth);
const userClicked = this.users[columnsClicked-1];

[tbelmega]

Hey friends, I have the same requirement: Get the userId associated with the column when an empty cell was clicked. Here is how I solved it:

1. Look for the line <div class="cal-day-column" *ngFor="let column of view.hourColumns; trackBy: trackByHourColumn"> and change it to collect the loop index like this: <div class="cal-day-column" *ngFor="let column of view.hourColumns; let i = index; trackBy: trackByHourColumn"> Note that the variables in the demo are poorly named ("hourColumn"), these are actually the user columns. Helps to understand what's going on.

2. Look for the <mwl-calendar-week-view-hour-segment, attribuite (mwlClick)=. Extract the code there into a method of the component and pass in the index i that we introduced above: (mwlClick)="onHourSegmentClicked($event, segment.date, i)"

3. The method me just introduced should be in day-view-scheduler.component.ts. Add the userId to the emitted event like this:

onHourSegmentClicked($event: MouseEvent, date: Date, columnIndex: number) {
    this.hourSegmentClicked.emit({
      date: date,
      sourceEvent: $event,
      userId: this.users[columnIndex].id
    } as any)
  }

Unfortunately, we have to circumvent the type system here, using the cast to any. The reason is that the hourSegmentClicked EventEmitter in the base class is declared to emit events that only contain date and source event. We need to add something to the event, but we can not redeclare the type of the EventEmitter, that's why we're casting the event to any. I'd usually avoid that, but I don't see a better option (other than changing the library code).

4. Now in the parent component that handles the event, we can read the userId out of the event. Not type-safe, but it works.