Hi Cody,

You have two options. You either use javarcript to determine the height of the calendar's parent container and use the method described in https://fullcalendar.io/docs/display/height/ to set the height:
$('#calendar').fullCalendar('option', 'height', 700);
Or you already know which screen ratio you're working on and toy with aspectRatio like described in https://fullcalendar.io/docs/display/aspectRatio/ on a 100% width calendar to get a fulIscreen calendar, for instance.

If you find a better solution, please share!

Kind Regards,
João Grazina

Hi Joao, thanks for the fast response. So I've setup a javascript function to listen for the window resize, and it works and runs that function whenever the window is resized, however, my calendar is still not resizing. So here is what my javascript looks like in Outsystems:

"
$(window).resize(function() {
    debugger;
    $('"+FullCalendar.Id+"').fullCalendar('option', 'height', 700);
});
"

And here is what it looks like inside my function when I'm inspecting it in Chrome after the event is fired:



I know the code runs because I have the debugger; line in there and I can step through it, but the calendar never changes its height size. Do you have any suggestions? Am I doing it wrong? Right now just to test it I'm initializing the calendar with a pixel height of 500, then when I resize the browser window I'm changing the height to 700, but it doesn't change it just stays 500. I've tried a few different things like calling the calendars render function afterwards, I've also tried having the javascript code exactly like this: "$('#calendar').fullCalendar('option', 'height', 700);" using the value '#calendar' instead of the html name. But nothing seems to work. Any suggestions would be much appreciated. Thanks!

Any thoughts on this? Oh also just to note, I used the # symbol before the calendar id as well. In my screenshot and exaple code I forgot to include the # symbol. But yeah, it just doesn't work I don't get it?? When I'm debugging it seems like it should work. No errors are thrown and it does get the calendar.

Hi Cody,

Four (4!!) thoughts:

1. STRAIGHT FORWARD: You're right, you were missing an entity selector (#) on the jQuery. Just in case you're wondering, on ServiceStudio should look something like "$('#" + CalendarContainer + "').fullcalendar('option', 'height', 700);
2. THIS IS THE KILLER ONE: You need to remove the "contentHeight:400," that is being set on GeneralDisplayJSON parameter and that seems to be overriding the overal height definition.
3. BONUS: You can also add a listener that tracks the exact widow height like:
   $(window).on('resize', function(){
   var win = $(this); //this = window
   $('.CalendarPlaceHolder').fullCalendar('option', 'height', win.height()-200); // adjust this to your case
   });
4. EXTRA BONUS: FullCalendar API also offers a resize callback to adjust your calendar to a different view (switching to month view when there's enough space, switching to day, when you're very limited)
   
   $('#calendar').fullCalendar({
       windowResize: function(view) {
           alert('The calendar has adjusted to a window resize');
       }
   });

Let me know if this worked for you.

Kind Regards,
João Grazina

Hey João, so I tried doing it without setting the contentHeight and it still doesn't work. Also I knew about the bonus and extra bonus options, but those don't seem to work for me either. In fact when I copy paste your code for the extra bonus, it ends up putting prev next and today buttons above the month week and day buttons. I have no idea why. I've tried so many different ways of doing it, like putting the JS inside an expression, putting it in a RunJavascript action in the preparation, etc. I've attached a very very simple straight forward oml file to show you what I mean. It is basically a blank application with the London theme applied with only a HomePage where I dragged out the FullCalendar and have done bascially nothing with it, I've left it as is. I only set the two required properties (defaultDate & Destination). Then in the preparation I've put the following JS code inside of a RunJavascript action:

"
    $(window).resize(function() {
        debugger;
        $('#"+MyCalendar.Id+"').fullCalendar('option', 'height', 20000);
    });

    $(function(){
        debugger;
        $('#"+MyCalendar.Id+"').fullCalendar('option', 'height', 20000);
    });

    $('#"+MyCalendar.Id+"').fullCalendar({
        windowResize: function(view) {
            debugger;
            alert('The calendar has adjusted to a window resize');
        }
    });
"

When I debug, both the resize function and function run and I can step through them, but nothing happens to the calendar's height, it remains the same. The windowResize function doesn't ever run when I change the size of my browser window. Also you will note the extra buttons that get added above the month, week and day buttons when the windowResize JS code is there. If you remove it then those extra buttons go away. Sorry I'm being such a pain, I really don't know what I'm missing here, I would have thought this would be easier than this to do. Is there something you can see that I'm doing wrong. I tried it so many different ways, but nothing works. Are you able to get it to work? Let me know if you can open the oml file I've attached.

Just incase you can't open the oml file, here is a screenshot of the properties of the calendar, as you can see there is not much to it:

OK, I get it now.
So I did two fixes on your code.

1. Included the GeneralDisplayJSON string without these parameters:
               height: 'auto',
               contentHeight:'auto',
               aspectRatio:'1.35',
2. Added a .CalendarPlaceholder on the selector. This is necessary because the widget itself is not where the calendar is rendered, but on an internal container with that class. So it goes something like this:
   " $('#RichWidgets_wt1_block_wtMainContent_FullCalendar_wtMyCalendar_block .CalendarPlaceHolder').fullCalendar('option', 'height', 20000);"

Check the fix in attachment.

Kind Regards,
João Grazina

Just to be clear, if you don't include anything on the JSON parameters, they get their default values. In the GeneralDisplayJSON parameter, the default is:

Oh my gosh!!! Thank you!!! IT WORKS! YEA!!! I was trying everything.... I had tried removing just those 3 properties as you mentioned, but I never knew you had to have the CalendarPlaceholder selector there since your first example did not have it. Well it is working perfectly now, thanks a million!! Sorry to have taken up more time than probably needed. Hopefully for anyone else that tries to do this it will be easier for them now at least.

Great! Really happy to have helped. I'll probably have to think about exposing a jQuery selector builder action, so that getting to the actual full calendar div for these kind of customizations is made easier. You shouldn't have to loose so much time hacking at it.

Thank you for your perseverance!
João

Haha, no worries, thanks for hanging in there with me :)