Adjust Height of ejSchedule dynamically

[Andreas Schenk]

Hi,

what I try to achieve is to adapt the width and height to the size of the current browser window. The width is easy (=100%), but I don't know, how to reset the height of ejSchedule during resizing the browser window. What I tried is (but without success so far...)

function resize() {

        var heights = window.innerHeight - 60;

        var final = heights + 'px';

        $('#Scheduler1').ejSchedule({ height: final });

    }

    resize();

    window.onresize = function () {

        resize();

    };

[Velmurugan S]

Hi Andreas,
Thank you for using Syncfusion products.

You can reset the height of the ejSchedule control while resizing the browser window. Please find the following code snippet to meet the requirement.
<code>

                $(function () {

            var dManager = ej.DataManager(window.Default).executeLocal(ej.Query().take(10));

            $("#Schedule1").ejSchedule({

                width: "100%",

                height: "100%",

                currentDate:new Date(2014,4,5),

                ---------------------

                ---------------------

            });

        });

                function resize() {

            var heights = window.innerHeight - 60;

            var final = heights + 'px';

            $('#Schedule1').ejSchedule({ height: final });

            // The following code snippets is necessary to the display the schedule control with the scroller properly

            var scrollObj = $("#Schedule1_scroller").data("ejScroller");

            scrollObj.model.height = final;

            scrollObj.refresh();

        }

        resize();

        $(window).resize(function () {

            resize();
        });
</code>

We have prepared the sample with the provided code snippets (resize window) with required changes within the resize method, which can be downloaded from in the following link.


http://jsplayground.syncfusion.com/bn0mze0z

Please let us know if it helps and if you need further assistance on this.
Regards,
Velmurugan

[Andreas Schenk]

Hi Velmurugan,

thanks for your answer, but this doesn't work for me. The schedule component resizes, but after the first adaption, the vertical scrollbar disappears, which leads to an issue in the rendering (please see screenshot attached). Tested with IE and Chrome.

BR

Andreas

Attachment: scrollbar_5eab5c60.zip

[Velmurugan S]

Hi Andreas,

Thanks for your update. 

We suspect that this issue might have occurred due to resize method calling in the initial rendering. We request you to change the resize method name to some other name (ex: ScheduleResize) to overcome this issue. Please refer the following code snippets.

<code>

function scheduleResize() {

            var heights = window.innerHeight - 60;

            var final = heights + 'px';

            $('#Schedule1').ejSchedule({ height: final });

            // The following code snippets is necessary to the display the schedule control with the scroller properly

            var scrollObj = $("#Schedule1_scroller").data("ejScroller");

            scrollObj.model.height = final;

            scrollObj.refresh();

        }

        resize();

        $(window).resize(function () {

            scheduleResize();
        });
</code>

We have modified the sample with the above code snippets, which is available in the following location.

http://jsplayground.syncfusion.com/kspchkid

Please let us know if you need further assistance on this.
Regards,
Velmurugan

[Sebastian Telschow]

more easy to use is 

$(window).on('resize', function() {
    $("#schedule").ejSchedule({ height: '100%' });
});

[Karthigeyan Krishnamurthi]

Hi Sebastian,   

   

The height API of the Scheduler accepts percentage value only when it is placed within the parent container where the height is set with some specific pixel values. Kindly refer to the below code example.   

<Code>   

<div style="height:500px"> 

        <div style="float: left" id="Schedule1"> 

        </div> 

    </div> 

$("#Schedule1").ejSchedule({ 

                width: "100%", 

                height: "100%", 

                --------- 

                --------- 

            }); 

</Code>   

   

When we set Schedule height to 100% as suggested above, schedule height will be adjusted automatically when the browser window resizes. We recommend you to follow our previous suggestion to manually adjust the height of the ejSchedule control while resizing the browser window.  

   

Regards,   

Karthigeyan   

 

[Sebastian Telschow]

Setting the height per initial config to 100% is not working as you mentioned (if I understand right).

http://jsplayground.syncfusion.com/zxdizblx

You need to set it manually when window resizes as I suggest in my previous post

[Karthigeyan Krishnamurthi]

Hi Sebastian,   

 

We regret for the inconvenience caused. 

 

Sorry, it is necessary to set the height of the Schedule control manually while resizing the browser window as per the previous post, but without the need of refreshing the scroller alone now. We have modified your sample as same which can be viewed from the below link: 

http://jsplayground.syncfusion.com/tsc35u0p 

Regards, 

Karthigeyan