`mobilscrool events paired with TypeScript functions`

I am looking to implement the mobiscroll event for the calendar object (onMonthLoaded) in a way that allows me to have the logic outside of the settings element of mobiscroll.

Here is an example of my code:

   export class CalendarComponent {

    constructor( private sessionService: SessionService,
                private visItemsService: VisibleItemsService,
    ) {
        this.visItemsService.visItems$.subscribe(items => {console.log("got these New visible items : ", items)});
    }



    calendar: Date = new Date();
    calendarSettings: any = {
        theme: 'timelord',
        display: 'inline',
        layout: 'liquid',
        controls: ['calendar'],
        cssClass: 'tl-cal',
        max: new Date(2030,12,31),
        min: new Date(2005,1,1),
        onDayChange: function (event,inst) {
            // event.date returns the selected date in date format
            // console.log('date '+event.date);
        },
        onMonthChange(event,inst) {
            // console.log('changed');
            // console.log(event.year);
            // console.log(event.month); // 0-11
        },
        onMonthLoaded(event,inst) {
            console.log('lloaded');
            // console.log(event.year);
            // console.log(event.month); // 0-11
            // console.log('month :'+inst.getVal());

            // This is where I want to call the loadNewVisItems method
            //loadNewVisItems(year, month);

        }

    };

    loadNewVisItems(year: number,month:number)  {
        console.log('in load New!');
        let timeRangeStart = moment().year(year).month(month).date(1).hour(0).minutes(0).second(0);
        let timeRangeEnd = timeRangeStart.add(1,'month').subtract(1,'second');
        this.visItemsService.setTimeRange(timeRangeStart.unix(),timeRangeEnd.unix());
    }
}

I am trying to figure out how to properly call the loadNewVisItems method from within the onMonthLoaded handler. The syntax currently does not recognize the method when I attempt a simple call using either this or another approach.

Answer №1

whenMonthIsLoaded: (event,inst) => {
    this.fetchAdditionalItems()arguments
}

Answer №2

handleMonthLoad: (e, instance) => this.retrieveNewVisuals(e,instance)

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

Exploring how to access a shared component element in the Angular DOM

Component in Question: pro-image The pro-image component includes an image element with the id proImg <img id="proImg" src="{{imgPath}}"> The imgPath variable is passed as an @input. This particular component is utilized in var ...

Calculating the difference between two dates using moment-jalaali in NodeJS

The query at hand is, "How can I perform date subtraction between two Jalaali dates using the moment-jalaali package in NodeJS?". I have thoroughly checked their API documentation on GitHub, but could not find any built-in method specifically for subtracti ...

Problem with overlapping numbers in the Vis network

I am currently working on a project using Angular 8 and Visnetwork. Everything is going well, but I am facing an issue with overlapping numbers on lines. Is there a way to adjust the position of the numbers on one line without separating the lines? Can s ...

Typescript Guide: When should we explicitly assign the type of each property in a scenario where all properties are identical?

Imagine I have an object: interface Name { first: string; middle: string; last: string; blah: string; blahblah: string; } It's clear that each property is a string type. Is there a way to reduce repetitive typing of "string"? ...

The type 'ClassA<{ id: number; name: string; }>' cannot be assigned to the type 'ClassA<Record<string, any>>'

One requirement I have is to limit the value type of ClassA to objects only. It should also allow users to pass their own object type as a generic type. This can be achieved using Record<string, any> or { [key: string]: any }. Everything seems to be ...

Angular 6 - Ensuring all child components are instances of the same component

My issue has been simplified: <div *ngIf="layout1" class="layout1"> <div class="sidebar-layout1"> some items </div> <child-component [something]="sth"></child-component> </div> <div *ngIf="!layout1" class= ...

Navigating with hashtags in Angular2 and anchors does not change the page position

I recently came across a helpful post that showed me how to append a fragment to the URL. Angular2 Routing with Hashtag to page anchor Although the fragment is successfully added, I'm encountering an issue where the page does not scroll to the speci ...

Angular testing with Jasmine and TypeScript

I've been attempting to create some Angular Controller tests for my App using TypeScript for a few days now, but haven't had any success. Let me start by saying that this is my first time writing tests in Jasmine. My issue is that I'm having ...

Update the URL in an Angular application once the app has finished loading

I have a client who is using an existing angular application without the access to its source code. We are currently in the process of rebuilding the app, but there is an immediate need to edit the content of a specific page. To achieve this, I have extra ...

Step-by-step guide on determining the argument type of a function from an external source

type AppState = { user: { firstName: string, lastName: string, } } const appState = { user: { firstName: 'John', lastName: 'Doe', } } type Action<T> = (state: AppState, payload: any) => T; type Action ...

The process of incorporating the dymo.framework into an Angular project

My Angular project is currently in need of importing dymo.connect.framework. However, I am facing some challenges as the SDK support provided by dymo only explains this process for JavaScript. I have also referred to an explanation found here. Unfortunate ...

Organize based on 2 factors, with emphasis on 1

Looking for a way to sort a list of posts by two variables - date (created) and score (score>). The main goal is to prioritize the sorting based on the score, so that the highest scoring posts appear first.</p> <p>To clarify, the desired so ...

Utilizing Azure Active Directory for Authentication in Angular 13 and .NET Core Web API

I've set up a .NET CORE 6 Api as the backend and an Angular 13 frontend. I'm currently facing authentication issues with Angular using msal to call the protected .NET Core API, specifically the weatherforcast template. While I can successfully au ...

Ngrx/effects will be triggered once all actions have been completed

I've implemented an effect that performs actions by iterating through an array: @Effect() changeId$ = this.actions$.pipe( ofType(ActionTypes.ChangeId), withLatestFrom(this.store.select(fromReducers.getAliasesNames)), switchMap(([action, aliases ...

Organizing validators within reactive forms in Angular

When creating a form in Angular, I have multiple fields that need validation. Below is the code I am using to create the form: requestForm = this.formBuilder.group({ requestorName: ['', [Validators.required]], requestorEmail: ['&apo ...

Tips for simulating a service in Angular unit tests?

My current service subscription is making a promise: getTaskData = async() { line 1 let response = this.getTaskSV.getTaskData().toPromise(); line 2 this.loading = false; } I attempted the following approach: it('should load getTaskData', ...

Errors are not displayed or validated when a FormControl is disabled in Angular 4

My FormControl is connected to an input element. <input matInput [formControl]="nameControl"> This setup looks like the following during initialization: this.nameControl = new FormControl({value: initValue, disabled: true}, [Validators.required, U ...

Implement generics within the `setState` function in a React.js and TypeScript application to ensure that it returns a string value

I'm facing an issue with setting the state in the onChange event by specifying the type of the setState hook. Here is my current setState declaration: const [payer, setPayer] = useState<Number>(0); And this is the radio setter function I am usi ...

Having trouble with npm i after installing the newest versions of node and npm

I recently upgraded my node and npm to the latest versions. However, my ionic 3 project (version 3.9.2) is now encountering issues when I run npm i. Strangely, this problem only occurs with this specific project and not with new projects. Any help in resol ...

Issue with hydration in Next.js while trying to access the persisted "token" variable in Zustand and triggering a loading spinner

Below is the code snippet from _app.tsx where components/pages are wrapped in a PageWrapper component that handles displaying a loading spinner. export default function App(props: MyAppProps) { const updateJWT = useJWTStore((state) => state.setJWT); ...