We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Adjust Height of ejSchedule dynamically

Thread ID:

Created:

Updated:

Platform:

Replies:

119963 Aug 19,2015 01:58 AM May 26,2016 09:27 AM JavaScript 7
loading
Tags: ejSchedule
Andreas Schenk
Asked On August 19, 2015 01:58 AM

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 [Syncfusion]
Replied On August 20, 2015 05:00 AM

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
Replied On August 21, 2015 01:32 AM

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 [Syncfusion]
Replied On August 24, 2015 04:40 AM

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
Replied On May 24, 2016 09:17 AM

more easy to use is 

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

Karthigeyan Krishnamurthi [Syncfusion]
Replied On May 25, 2016 04:50 AM

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
Replied On May 25, 2016 05:03 AM

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 [Syncfusion]
Replied On May 26, 2016 09:27 AM

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: 

Regards, 
Karthigeyan 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;