Is there a way to trigger the click event in the week view of an Angular 2+ calendar?

Question

Is there a way to trigger the click event in the week view of an Angular 2+ calendar?

https://i.sstatic.net/Vx2x8.png HTML Templates

 <mwl-calendar-week-view
          [viewDate]="viewDate"
          [refresh]="refresh"
          (click)="weekDayClick($event)">
        </mwl-calendar-week-view>

In the component file

weekDayClick($event){
 console.log("I want to retrieve the date of the clicked week view. How can I do this"); 
}

For example, if I click on the 16th of May, I want to receive the date as 16 May 2018.

Similarly, for the 17th of May, I expect to receive 17 May 2018.

And for the 18th of May, I should receive 18 May 2018 and so on.

Any suggestions would be greatly appreciated.

Thank you for taking the time to read this!

angular typescript calendar angular5 angular-calendar

Answer 1

Answer №1

After much exploration, I have discovered the method to retrieve the date from a click on a week view. By utilizing the (dayHeaderClicked) event, we are able to obtain the desired value.

Here is an example of the component's HTML file:

<mwl-calendar-week-view
          [viewDate]="viewDate"
          [refresh]="refresh"
          (dayHeaderClicked)="dayHeaderClicked($event)">
        </mwl-calendar-week-view>

And now, the component's TypeScript file:

dayHeaderClicked(evn){
    // console.log(evn);
    this.viewDate = evn.day.date; // finally get the clicked date value
  }

Answer 2

After much exploration, I have discovered the method to retrieve the date from a click on a week view. By utilizing the (dayHeaderClicked) event, we are able to obtain the desired value.

Here is an example of the component's HTML file:

<mwl-calendar-week-view
          [viewDate]="viewDate"
          [refresh]="refresh"
          (dayHeaderClicked)="dayHeaderClicked($event)">
        </mwl-calendar-week-view>

And now, the component's TypeScript file:

dayHeaderClicked(evn){
    // console.log(evn);
    this.viewDate = evn.day.date; // finally get the clicked date value
  }

Is there a way to trigger the click event in the week view of an Angular 2+ calendar?

Answer №1

Similar questions

Is it possible to confirm the authenticity of a hashed secret without having knowledge of the salt used

Different results are being obtained when destructuring props in a component

Rxjs: Making recursive HTTP requests with a condition-based approach

Utilize a method categorization while implicitly deducing parameters

The ngx-datatable is returning an error message stating that it cannot read the property 'indexes' of an undefined

The Angular Http Interceptor is failing to trigger a new request after refreshing the token

Encountering an Angular error stating "RangeError: Maximum call stack size exceeded" when trying to input data

Is it possible to use Angular CLI 6 to run ng serve with Angular 4?

Implement dynamic routerLink binding with Angular 11

Discovering ways to fetch an array of objects using object and arrays in JavaScript

Updating nested interface values using React hooks

How to easily scroll to the top of the previous page in Angular 8

Adding or modifying attributes on a component selector in real-time

Setting Angular 2+ FormGroup value in a child component form using data passed from the parent

I am attempting to send an array as parameters in an httpservice request, but the parameters are being evaluated as an empty array

Tips for combining HttpClient's Observables with paramMap to create a dynamically loading component

Building a Custom Dropdown Select List with FormControlName and ControlValueAccessor in Angular 8

Experiencing problem when using Angular Dart material-input with data type set to number

When using Angular and opening a portal in a separate window, what is the best way to connect an overlayRef in order for it to utilize the component's unique styles?

You are unable to define a module within an NgModule since it is not included in the current Angular compilation