The parameter type 'DateInput' cannot be assigned to the parameter type 'Date'

I am currently utilizing fullcalendar for my project. However, I would like to utilize my local models instead of fullcalendar's model. The issue arises when attempting to create a new instance of my own model, as it displays the following error message:

Argument of type 'DateInput' is not assignable to parameter of type 'Date'.

Below is my event.model.ts file:

export class EventModel {
  public eventId: string;
  public eventName: string;      
  public eventStart: Date;

  constructor(
    eventId: string,
    eventName: string,  
    eventStart: Date
  ) 
  {
    this.eventId = eventId;
    this.eventName = eventName;
    this.eventStart = eventStart;
  }
}

Here is how fullcalendar is initialized:

import { EventInput } from '@fullcalendar/core';

Usage:

private events: EventInput[] = [
    { id: "1", title: 'Test', start: new Date() }
];

getEvent(id: string) : EventModel {
    var event = this.events.find(x => x.id === id);        
    if (event) {
        EventModel model = new EventModel(event.id, event.title, event.start); //the event.start Throws error!
    } 
}

Answer №1

Appreciation for the insightful comment from @jonrsharpe.

Despite initializing the EventInput's start attribute with a simple start: new Date():

private events: EventInput[] = [
    { id: "1", title: 'Event Now', start: new Date() }
]; 

The structure of the EventInput class appears as follows:

export interface EventDateInput {       
    start?: DateInput;
    //rest of properties.
}

DateInput is defined as:

export type DateInput = Date | string | number | number[];

Therefore, a simple casting resolves the issue:

EventModel model = new EventModel(event.id, event.title, <Date>event.start);

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

Tips for accurately defining the return type for querySelector(All) connections

I enjoy doing this particular task, ensuring the types are correct. const qs = document.querySelector.bind(document) as HTMLElementTagNameMap | null; const qsa = document.querySelectorAll.bind(document) as NodeListOf<any>; While hovering over query ...

The error message "angular 5 httpclient - values is undefined" pops up due to a TypeError

Within my Angular 5 application, I have utilized the httpclient method to integrate a REST API. Specifically, I am working on a login API that sends username and password data in a post request and expects user information in return. let header = new Http ...

What methods can I use to make sure the right side of my React form is properly aligned for a polished appearance?

Trying to create a React component with multiple input field tables, the challenge is aligning the right side of the table correctly. The issue lies in inconsistent alignment of content within the cells leading to disruption in overall layout. Experimente ...

Typescript - ensure only one specific value is in an array of length N

Is there a way to require the 'foo' literal, while allowing the array to have any shape (i.e. not using an X-length tuple with pre-defined positions)? type requireFoo = ??? const works: requireFoo = ['bar','foo'] //This shoul ...

Instructions on how to sign up for a worldwide technique that is known as

I have a file called globalvars.ts where I added a global method. How can I subscribe to this method in the ts page where it is being called? globalvars.ts; httpgetmethod(url:string) { var veri; var headers = new Headers(); headers.append(' ...

Aggregate the data chunks in the antd table into groups

I've been struggling to find a solution for this specific issue. My goal is to group the data in my table based on a particular field, but I need it to be styled as depicted in the image linked below. https://i.stack.imgur.com/OsR7J.png After looking ...

What could be causing the child route to component to not function properly?

Within the file AppRoutingModule, you will find: const routes: Routes = [ { path: "events", component: EventComponent, children: [ { path: 'add', component: AddEventComponent } ] }, ]; @NgModule({ ...

Retrieving information from a data file by implementing a GraphQL Apollo Server within a NextJS application route

Currently working with Next.js 14 (app route), React, and the GraphQL Apollo framework. I have a JSON file containing data saved locally that I'd like to display using the server API. How can I make this happen? Below is the JSON structure I need to r ...

The height of the ion-textarea in Ionic-angular reduces

I've been working on a project using the ionic-angular framework. I've encountered an issue where the height of the ion-textarea is sometimes decreased to 0px. The code for the textarea looks like this: <ion-textarea class="translated&quo ...

The error message "karma jasmine cannot subscribe to an undefined property" is displayed due to the inability to

I'm trying to create a test for this get function, but every time I attempt to do so, I encounter the error message "TypeError: Cannot read property 'subscribe' of undefined" This is my service function: getAPICard(): Observable<any> ...

The object created from winRef.nativeWindow.Razorpay is not a valid constructor

I am currently using Angular 4 for a project and I need to integrate razorpay into the project. While it works perfectly fine in the test and development environments, I encounter an error in a specific environment, the live environment. vendor.cdeb9a87 ...

Tips on updating checkbox background color after being selected

I've been working on creating checkboxes for seat selection in Angular using a TypeScript file, but I'm facing an issue where the background color of the checkbox doesn't change after checking them. Here's my TypeScript function: gener ...

Launching a Chrome App from a website (using Angular)

In the process of building a Chrome app for Chrome OS to communicate with a serial port. Interested in integrating this Chrome App as an API within an Angular application. Seeking documentation on how to establish communication and configuration between ...

Returning self-referencing types in static methods within derived classes

Exploring the concept of Polymorphic this in TypeScript 1.7, which was brought to my attention in a thoughtful discussion thread I found on Stack Overflow, I came across an interesting way to define methods in a class with a return type of this. This has t ...

encountering a problem integrating react-dropzone into a project using react-16.13.1

I'm having an issue adding the package https://www.npmjs.com/package/react-dropzone to my TypeScript React project using Yarn as the package manager. I ran the command yarn add @types/react-dropzone, but it ended up installing a deprecated package h ...

Array of colors for Wordcloud in Angular Highcharts

I am currently utilizing Angular Highcharts 9.1.0 and facing an issue with generating a word cloud that incorporates specific colors. Despite including color values in the array, they do not seem to be applied as intended. Take a look at the code snippet b ...

Was not able to capture the reaction from the Angular file upload

I've been attempting to upload a single file using the POST Method and REST Calling to the server. Despite successfully uploading the module with the code below, I encounter an error afterwards. Is there anyone who can lend assistance in troubleshooti ...

Angular's HttpClient enables you to easily map an object to an array of properties

I have a scenario where I am calling an API that returns a JSON Object, and my task is to map this object to an array. Despite having the following code, I am not receiving any response or error after making the API call. export class Features { MenuId ...

Tips for adding an item to an array within a Map using functional programming in TypeScript/JavaScript

As I embark on my transition from object-oriented programming to functional programming in TypeScript, I am encountering challenges. I am trying to convert imperative TypeScript code into a more functional style, but I'm struggling with the following ...

How to identify alterations in user input within Angular?

I need assistance with my search input functionality. I want to ensure that the this.searchProperties.emit is only triggered when the user interacts with the input field by touching it or making an input. The current issue is that the emit function gets ca ...