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!

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
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

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

My method of storing API-Keys involves hashing and saving them in a database. ... async function createToken(userId:number) { ... const salt=await bcrypt.genSalt(15) const hash=await bcrypt.hash(token, salt) await db.store({userId,hash}) } ...

Different results are being obtained when destructuring props in a component

Just diving into the world of React and trying to grasp destructuring. I've been doing some reading on it, but I'm currently stuck. When I try to destructure like this function MList({action}) { // const data = [action];}, I only get 'camera ...

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

To obtain a list of records, I use the following command to retrieve a set number of records. For example, in the code snippet below, it fetches 100 records by passing the pageIndex value and increasing it with each request to get the next 100 records: thi ...

Utilize a method categorization while implicitly deducing parameters

Scenario In my project, I have a unique class setup where methods are passed in as a list and can be called through the class with added functionality. These methods are bound to the class (Foo) when called, creating a specific type FooMethod. class Foo { ...

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

In my project, I am using ngx-datatable version 15.0.2 and Angular version 8.1.0. Recently, I encountered the following error: ngx-logger.js:852 2019-07-30T15:04:42.930Z ERROR [main.js:4696] TypeError: Cannot read property 'indexes' of unde ...

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

In my project, I implemented an HTTP interceptor that manages access token refreshing. If a user's access token expires and the request receives a 401 error, this function is designed to handle the situation by refreshing the token and re-executing ...

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

I am encountering an ERROR message in the console that says "RangeError: Maximum call stack size exceeded" when I input something into one of these fields app.component.html <div class="container-wrap"> <div class="container&qu ...

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

I have a project using Angular 4. I recently updated my Angular CLI version: Angular CLI: 6.1.5 Node: 10.9.0 OS: win32 x64 Now I'm wondering how to run ng serve for my Angular 4 project? However, I noticed that the file angular.json is missing in ...

Implement dynamic routerLink binding with Angular 11

Having a value containing routerLink and queryParams, I am attempting to bind it in the HTML. anchorValue : string = `<a [routerLink]="['../category/new ']" [queryParams]="{ query: 'category' }" routerLinkActive = ...

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

When comparing an array of objects with a single object and listing the arrays in JavaScript, specific conditions need to be met to retrieve the array of objects: If the itemvalue and idvalue are the same, check if the arrobj cid has the same codevalue ...

Updating nested interface values using React hooks

I am looking to develop an application that can seamlessly update a nested configuration file after it has been imported (similar to swagger). To achieve this, I first created a JSON configuration file and then generated corresponding interfaces using the ...

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

In my Angular 8 application, there are buttons that are meant to take the user back to the previous page when clicked. While the functionality works as expected, I am facing an issue where the page does not automatically scroll to the top upon navigating ...

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

@Component({ selector: 'ion-col', templateUrl: 'components-field.html' }) export class FieldComponent { @HostBinding('attr.layout') layout = '¯\_(ツ)_/¯'; element: any; constructor() ...

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

As a beginner in coding, I encountered an issue with sharing a form component between an add member and edit member component. While copying the form code into each component works fine, it goes against the DRY principle and could lead to banning from furt ...

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

Trying to upload multiple images involves converting the image into a base64 encoded string and storing its metadata with an array. The reference to the image path is stored in the database, so the functionality is written in the backend for insertion. Ho ...

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

I am currently working with an HTTPClient 'get' method that returns a JSON array of objects. I also utilize a key from the route params to extract a single object from that array. One interesting aspect of this component is its dynamic nature, w ...

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

Does anyone have a working solution for creating a Material dropdown wrapper (mat-select dropdown) that can be used with formControlName? If so, could you please share a Stackblitz demo of your implementation? Here are the requirements: Should work seam ...

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

I am currently in the process of constructing a web application (essentially an e-commerce platform) using Angular Dart and incorporating elements from materialDirectives to create the app's components. My primary focus at the moment is on developing ...

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?

Within the realm of Angular, there exists the CDK Portal library. I came across a scenario online where someone successfully opened a portal in a separate window. Intrigued by this concept, I attempted to create a dialog that would appear in front of a por ...

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

Something strange is happening here as I am encountering an error message stating 'Cannot declare 'FormsModule' in an NgModule as it's not a part of the current compilation' when trying to import 'FormsModule' and 'R ...