Using FullCalendar within an Ionic3 framework powered by Angular 4

Is there a way to initialize fullCalendar in an event (such as a click) on Ionic 3, using Angular 4?

This code works when the calendar options are set in a variable:

 calendarOptions: Object = {
    fixedWeekCount: true,
    editable: true
  };

However, it doesn't work when called within a function:

 buildCalendar(): void{
  this.calendarOptions = {
    fixedWeekCount: true,
    editable: true
  };
 }

HTML code where the calendar is invoked:

<angular2-fullcalendar 
          [options]="calendarOptions" 
          (initialized)="onCalendarInit($event)"></angular2-fullcalendar>

Angular code where buildCalendar is invoked:

getAging(): void {

    this.myProvider.getAging()
      .subscribe(
      (response) => {
//do something...
      }, (error) => {
        console.log(`Backend returned code ${error.status}, body was: ${error.error}`);
      }, () => {
        console.log('aging complete');
        this.buildCalendar();
      }
      )

  }

PS: getAging() is called upon page load.

I need to initialize fullCalendar after retrieving data from the backend API.

Answer №1

This issue is not a general problem with FullCalendar, but rather specific to the angular2-fullcalendar component and its functionality.

If you take a look at this component, the issue becomes evident; it does not monitor changes in the 'options' input and instead uses a hack with a setTimeout function to handle initial changes (with an undesired 100ms delay).

Given that this component is quite basic, it would be more beneficial for the user to customize it based on specific requirements rather than relying on third-party solutions.

To address this particular issue, the use of ngIf is recommended. This directive ensures that the component is only rendered once the options are ready:

<angular2-fullcalendar *ngIf="calendarOptions"
          [options]="calendarOptions" 
          (initialized)="onCalendarInit($event)"></angular2-fullcalendar>

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

How can I incorporate static content files bundled with my JSON object into the API response in Nest.js?

Within my Nest.js API, there is a GET endpoint that needs to retrieve a database row along with up to 6 image files (base64 encoded) in the response. Currently, I am achieving this by extracting unique file names stored in 6 columns of the database and th ...

How to efficiently mock the $window object in Angular unit tests

Attempting to unit test an angular custom service written in Typescript has been a challenge for me. The service is designed to read a global variable defined on the Window object and I have made it promise-based for potential future AJAX calls. Below is a ...

Angular Material: creating a custom sidenav transition from detailed layouts to icon-based designs seamlessly without the need for predefined

I'm currently working on a <sidenav> that has the ability to toggle between displaying text along with icons or just icons using a menu button. The <sidenav-content> section is set to automatically resize with a smooth transition effect. ...

Angular2 Auth Guard causing empty page display when Observable.of(true) is used

While using auth-guard to protect certain routes, I'm encountering an issue where a blank page is displayed when attempting to retrieve a refresh token. The authenticated() method returns an Observable and the code seems to be functioning correctly wi ...

Is there a way to retrieve the timezone based on a province or state in TypeScript on the frontend?

I've been working on an angular app that allows users to select a country and state/province. My current challenge is determining the timezone based on the selected state/province, with a focus on Canada and the US for now (expanding to other countrie ...

Trouble with importing React JSX from a separate file when working with Typescript

This problem bears some resemblance to How to import React JSX correctly from a separate file in Typescript 1.6. Everything seems to be working smoothly when all the code is contained within a single file. However, as soon as I move the component to anoth ...

What obstacles are keeping Stryker from participating in the TypeScript Express project?

Check out my public repository on GitHub. It's a straightforward ExpressJS NodeJs project written in TypeScript and utilizes Jest for unit testing. When I execute npx stryker run --fileLogLevel trace --logLevel debug, I encounter the following output ...

Setting up Firebase push notifications in a NativeScript Angular application is a straightforward process

I am in the process of developing an app using Nativescript, Angular, and Firebase to enable push notifications. I am utilizing the nativescript-plugin-firebase plugin as per their guidelines which state that firebase.init should be called onInit. However, ...

The Dynamic Duo: Typescript and Knex

I'm new to TypeScript and currently working on a node application using Express, Postgresql, and Knex. I'm a bit confused about when to apply type definitions in my code. Looking at other projects for guidance has left me even more puzzled as to ...

Jasmine and Karma encountered a TypeError stating that the function this.role.toLowerCase is not valid

Currently, I am in the process of writing a test case for a page within an application that our team is actively developing. However, I have encountered a challenging error within one of the test cases that I am struggling to overcome. Below is my Spec fil ...

Enhance your React Typescript High Order Component by incorporating additional properties and implementing them

I am in the process of creating a React HOC with specific requirements: It should take a component as input, modify the hidden property (or add it if necessary), and then return the updated component The rendered component should not display anything whe ...

Getting the most out of Kendo Charts for Angular: Avoid cutting off the Line Chart by setting a maximum value

Whenever I specify a maximum value in a line chart, the point that corresponds to that value ends up being cutoff. I attempted to add a margin, but unfortunately, the margin is being applied outside of the chart area. I have thoroughly reviewed the API do ...

Angular application using ngrx-store-localstorage does not retain data after a page refresh

Looking to incorporate ngrx into my authentication flow with the help of ngrx-store-localstorage for token persistence between browser sessions. After logging in, I can see the token value stored like this: {"token":{"token":"e5cb6515-149c-44df-88d1-4ff1 ...

The container struggles to contain the excess of images spilling over

I'm having trouble getting a group of images to stay within their container in a grid layout, as they're overflowing vertically beyond the container's boundaries. Is there a way to adjust their size so they match the height of their parent ...

What is causing the unsubscribe() method to have such a long processing time?

Attempting to identify performance issues within my Angular application. Upon typing in a form input (which is reactive), the characters appear slowly. The structure of my component is as follows: <my-message [selectedFeedObj]="selectedFeedObj" ...

Angular is responsible for generating excessive space

I have a component called members that contains individual member components. When I use the members component as static code, everything works fine: <div class="row bg-light justify-content-center py-4"> <div class="col-lg-8"> <h3 c ...

The promise object is displayed instead of the actual data retrieved from the API call

I am currently working on fetching data from an API and showcasing the name of the returned data on the front end. This function successfully retrieves the data through an API call: async function retrieveData(url){ var _data; let response = await fetch( ...

Troubleshooting Angular and Auth0: Understanding the issue with loginWithRedirect() always returning isAuthenticated$ as false

I have previously posted this issue on the Auth0 Community Help Forum, but I am yet to receive a response despite posting it 2 weeks ago. Here is the link to my original post: Currently, my setup includes angular/cli 15.1.1 and auth0/auth0-angular 2.0.1. ...

Encountering the error "No exported member 'RouteComponentProps' in the 'react-router-dom' module while upgrading to react-router v6"

We are currently in the process of migrating legacy class-based code to the latest version 6 of react router. However, we are encountering the following error during the migration: Module '"react-router-dom"' has no exported member &a ...

Trying to access Clockify API through a browser results in an authentication error

I am still getting acquainted with integrating the Clockify API. My goal is to retrieve all the workspaces. I have been using the '' API and including 'X-Api-Key' in the header. Interestingly, when I make this request through Postman, I ...