[FullCalendar 2] How to get a fullcalendar object in  version 4?
Forge component by Grazina
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

mvp_badge
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

mvp_badge
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

Hi,

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

Regards

Tomasz

mvp_badge
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

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


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