[FullCalendar 2] How to get a fullcalendar object in version 4?

Back to Forums

Tomasz M Lipinski

Solved

Question

Forge

Traditional Web

Application Type

Traditional Web

Hi,

The use case:

there is a FullCalendar component on a screen
inside some JS function I need to get its object having only its id provided by OutSystems

In version 3 I could do it using jQuery:

var cal = $('#DublinTheme_wt7_block_wtMainContent_wt10_FullCalendar2_wtcalRight_block');

and then ('d' is some variable of a proper type):

cal1.fullCalendar('gotoDate', d);

But in version 4 jQuery is no longer used. I know, it's maybe a lamer's question :-) but: how (in version 4) can I retrieve a calendar object having only its OS supplied id?

Regards

Tomasz

03 Sep 2021

Benjith Sam

MVP

Solution

Hi Tomasz,

This is just a suggestion based on my understanding and experience with JS.

I tried to replicate the mentioned scenario, and I also had the same observation. So, as a solution, I did a slight change in component JS implementation.

Add the below-mentioned highlighted statements in the expression

"<script>
    
    var OSFCInstanceArr = OSFCInstanceArr || [];

    /** 
     
          No code changes...

    **/

    OSFullCalendarInstance.init(options);

    OSFCInstanceArr.push(OSFullCalendarInstance);

</script>"

Solution: Define a variable to hold an array of multiple calendar instances that is created within the screen.

See this sample screen: Multiple_Calendar_Instances

JS Snippet: Reference the instance of a calendar defined within the screen as shown below

OSFCInstanceArr[0].calendar.gotoDate(Date.now());
OSFCInstanceArr[1].calendar.gotoDate(Date.now());

Refer to the attached .oml file

I hope this helps you!

Kind regards,

Benjith Sam

See solution in context

FullCalendar2.oml

06 Sep 2021

Benjith Sam

MVP

Hi Tomasz,

I have observed that the forge component you are referring to does have the initialized full calendar instance leaked or available in the global scope, i.e. you can access the object called OSFullCalendarInstance where ever you required.

Refer to the below-mentioned solution for your use case.

JS Snippet:

OSFullCalendarInstance.calendar.gotoDate(Date.now());

I hope this helps you!

Kind regards,

Benjith Sam

03 Sep 2021

Tomasz M Lipinski

Hi,

But I have TWO calendar webbblocks put on a screen so a SINGLE global variable will not work :-(

Regards

Tomasz

06 Sep 2021

1 reply

06 Sep 2021

Show thread

Hide thread

Benjith Sam

MVP

Solution

Hi Tomasz,

This is just a suggestion based on my understanding and experience with JS.

I tried to replicate the mentioned scenario, and I also had the same observation. So, as a solution, I did a slight change in component JS implementation.

Add the below-mentioned highlighted statements in the expression

"<script>
    
    var OSFCInstanceArr = OSFCInstanceArr || [];

    /** 
     
          No code changes...

    **/

    OSFullCalendarInstance.init(options);

    OSFCInstanceArr.push(OSFullCalendarInstance);

</script>"

Solution: Define a variable to hold an array of multiple calendar instances that is created within the screen.

See this sample screen: Multiple_Calendar_Instances

JS Snippet: Reference the instance of a calendar defined within the screen as shown below

OSFCInstanceArr[0].calendar.gotoDate(Date.now());
OSFCInstanceArr[1].calendar.gotoDate(Date.now());

Refer to the attached .oml file

I hope this helps you!

Kind regards,

Benjith Sam

FullCalendar2.oml

06 Sep 2021

Tomasz M Lipinski

HI Benjith,

Thanks for tips. OK, this works. It's a pity it requires manipulating the source code of FullCalendar but as I understand there is no other option.

Regards

Tomasz

07 Sep 2021

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines