The FullCalendarModule does not have a property named 'registerPlugins' in its type definition

Currently in the process of integrating fullcalendar into my Angular 15 project and encountering the following error:

Error: src/app/views/pages/takvim/takvim.module.ts:18:20 - error TS2339: Property 'registerPlugins' does not exist on type 'typeof FullCalendarModule'.

FullCalendarModule.registerPlugins([
  // register FullCalendar plugins
  dayGridPlugin,
  interactionPlugin,
]);

package.json

"fullcalendar": "^6.1.8",
"@fullcalendar/angular": "^6.1.8",
"@fullcalendar/core": "^6.1.8",
"@fullcalendar/daygrid": "^6.1.8",
"@fullcalendar/interaction": "^6.1.8",

app.module.ts

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";

import { TakvimRoutingModule } from "./takvim-routing.module";
import { FormsModule } from "@angular/forms";
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
import { SweetAlert2Module } from "@sweetalert2/ngx-sweetalert2";
import { TableModule } from "primeng/table";
import { ButtonModule } from "primeng/button";
import { NgSelectModule } from "@ng-select/ng-select";
import { TakvimComponent } from "./takvim.component";
import { FullCalendarModule } from "@fullcalendar/angular"; // must go before plugins
import dayGridPlugin from "@fullcalendar/daygrid"; // a plugin!
import interactionPlugin from "@fullcalendar/interaction"; // a plugin!
import { PerfectScrollbarModule } from "ngx-perfect-scrollbar";
import { CalendarModule } from "primeng/calendar";
FullCalendarModule.registerPlugins([
  // register FullCalendar plugins
  dayGridPlugin,
  interactionPlugin,
]);

@NgModule({
  declarations: [TakvimComponent],
  imports: [
    CommonModule,
    TakvimRoutingModule,
    FormsModule,
    NgbModule,
    PerfectScrollbarModule,
    FeahterIconModule,
    CalendarModule,
    SweetAlert2Module.forChild(),
    TableModule,
    ButtonModule,
    NgSelectModule,
    FullCalendarModule, // register FullCalendar with you app
  ],
})
export class TakvimModule {}

Answer №1

I've added the component.ts file

plugins: [dayGridPlugin, interactionPlugin],

 calendarOptions: CalendarOptions = {
    plugins: [dayGridPlugin, interactionPlugin],
    initialView: "dayGridMonth",
    locale: "tr",

    dateClick: this.handleDateClick.bind(this), // make sure to bind correctly!
    eventColor: "#378006",
    eventBackgroundColor: "#FF8C00",
    selectable: false,
    themeSystem: "bootstrap",
    buttonText: {
      today: "Bugün",
    },
    events: [],
  };

This is the solution I implemented for your issue

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

Standing alone, an argument can never be fully validated without

Recently, while delving into the valuable resource titled Effective TypeScript by Dan Vanderkam, I stumbled across an intriguing scenario that left me puzzled. Within a code snippet presented in the book, there was a line - shape; that seemed perplexing ...

Is it possible to consolidate this type definition?

I generated the following code snippet: type NumberFields<T, K extends keyof T> = T[K] extends number ? K : never; type AnsFields<T> = SomeOtherList & NumberFields<T, keyof T>; In the code above, SomeOtherList consists of predefined ...

Is it possible to effortlessly associate a personalized string with an identifier within an HTML element utilizing Angular2?

Check out this cool plunker import {Component} from 'angular2/core' @Component({ selector: 'my-app', template: ` <div *ngFor="#option of myHashMap"> <input type="radio" name="myRadio" id="{{generateId(option[& ...

Creating an Angular component that is flexible in terms of the data type it accepts

Currently, I have successfully implemented a lookup component that is responsible for fetching and filtering a list of users based on the query provided. When a user is selected from this list, they are set as members. This component can be configured with ...

Using TypeScript: Functions incorporating properties

Recently, I made an interesting discovery in JavaScript: function foo() { console.log("FOO"); } foo.bar = "FOOBAR"; foo(); // logs "FOO" console.log(foo.bar); // "FOOBAR" This got me thinking: How would I repres ...

Best location for the classes of the Domain Model suggested

Currently, I am delving into Angular 2 and making use of angular-cli for creating components and services. Adhering to the directory structure suggested by angular-cli (view screenshot below), I am uncertain about where to include domain model objects like ...

Zone.assertZonePatched does not exist as a valid function

I am encountering an error message: Unhandled Promise rejection: Zone.assertZonePatched is not a function Despite importing zonejs correctly in my index.html file: <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_ ...

What is the classification of the socket entity?

After searching through various posts, I couldn't find a solution to my problem so I decided to create my own thread. The issue I'm facing is determining the correct type for the 'socket' instance that I'm passing as a prop to my ...

Unable to load the default value for ion-select in TypeScript

I have reviewed this question, this question, and this question. However, none of them seem to provide a straightforward solution for what I am searching for. <ion-list> <ion-item> <ion-label>Select Book</ion-label> <i ...

Creating customized object mappings in Typescript

In my current Angular project, I am working on mapping the response from the following code snippet: return this.http.get(this.url) .toPromise() .then(response => response as IValueSetDictionary[]) .catch(this.handleError); The respon ...

To properly format the date value from the ngModel in Angular before sending it to the payload, I require the date to be in the format

When working with Angular 9, I am facing an issue where I need to format and send my date in a specific way within the payload. Currently, the code is sending the date in this format: otgStartDate: 2021-07-20T09:56:39.000Z, but I actually want it to be for ...

`Implementing Typescript code with Relay (Importing with System.js)`

Is there a way to resolve the error by including system.js or are there alternative solutions available? I recently downloaded the relay-starter-kit (https://github.com/relayjs/relay-starter-kit) and made changes to database.js, converting it into databas ...

Linking all styles with Angular 2

Is it possible to apply a style when the exact nature of that style is unknown? Consider a scenario where I have a model containing string variables defining styles, as shown below: myStyle1:string="margin-left:10px"; myStyle2:string="margin ...

angular component communication between neighboring elements

Hello everyone, I am looking for guidance on how to facilitate interaction between adjacent components in Angular that are not parent/child. For instance, imagine two components that are neighbors - Component A and Component B. In Component A, there is a b ...

Adding an object to a dynamic Akita store containing an Array in an Angular application can be accomplished by following these steps

Currently, I am working on storing dynamic values in an Akita store without the need to create a Model. My challenge lies in adding an object to an existing array within the store. As someone who is new to Akita, my initial approach involved deep cloning ...

Having difficulty subscribing to multiple observables simultaneously using withLatestFrom

I am facing an issue where I have three observables and need to pass their values to a service as parameters. I attempted to do this using WithLatestFrom(), but it works fine only when all values are observables. this.payment$.pipe( withLatestFrom(this.fir ...

Organizing Activities in Angular Version 5

Looking for an event calendar solution for Angular 5 After thorough research, I came across FullCalendar. However, I encountered several issues while trying to implement it in my Angular project 5. Is there any alternative to FullCalendar that is compati ...

Transforming a plain text field into an input field upon clicking a button or icon using Angular/Typescript

I am a beginner with Angular 6 and I'm trying to implement functionality where clicking a button or icon will change a text field into an input field. See the snippet of code and expected output below. Thank you in advance. <div> <mat-for ...

Transformation of Python code into Blockly blocks

As the founder of edublocks.org, I am interested in adding Python to Blocks functionality on the platform. At the moment, users can only transition from Blocks to Python. Is there anyone who has experience with this and can provide guidance on how to achi ...

Ways to retrieve element values within Angular

Here is an example of an element: <li class="someClass">value1<span>value2</span></li> This list element is created using vanilla JavaScript, and a click event is bound to it as demonstrated below: const list = Array.from(documen ...