Resize Form

[ginnix]

I am planning a project using the calendar control. I could not find any information on how to resize the calendar

when the user resizes the web browser. Any help would be appreciated.

 

Thanks

[Sherzod]

Hi,

 

Do you mean UniCalendar ?!

[ginnix]

yes, UniCalendar. How do you resize UniCalendar to the size of the web browser?

 

Thanks

[Sherzod]

Hi,

 

We will try to give you a solution

 

Best regards,

[Sherzod]

In the process

 

[Sherzod]

1. UniServerModule -> CustomCSS:

.mycalendar .x-monthpicker {
  height: auto !important; 
  width: auto !important;
}

2. UniCalendar -> ClientEvents -> ExtEvents -> function container.afterrender:

function container.afterrender(sender, eOpts)
{
    sender.addCls('mycalendar');
}

3. UniCalendar -> ClientEvents -> UniEvents -> function picker.beforeInit:

function picker.beforeInit(sender, config)
{
    config.width= "100%"
}

4. UniCalendar -> ClientEvents -> ExtEvents -> function picker.resize:

function picker.resize(sender, width, height, oldWidth, oldHeight, eOpts)
{
    var container=sender.ownerCt;
    var headerHeight=Ext.get(container.el.select('.x-datepicker-header').elements[0]).getHeight();
    var footerHeight=Ext.get(container.el.select('.x-datepicker-footer').elements[0]).getHeight();
    
    var tableHeight=container.el.getHeight()-headerHeight-footerHeight;
    
    container.el.select('.x-datepicker-inner').elements[0].style.height=tableHeight-2;
    container.el.select('.x-datepicker-inner').elements[0].style.top=0;
    
    container.el.select('table td .x-datepicker-date').elements.forEach(function(c){c.style.height="100%"});
    
    container.doLayout();
}

[eduardosuruagy]

On 11/4/2017 at 12:45 PM, Sherzod said:

1. UniServerModule -> CustomCSS:

.mycalendar .x-monthpicker {
  height: auto !important; 
  width: auto !important;
}

2. UniCalendar -> ClientEvents -> ExtEvents -> function container.afterrender:

function container.afterrender(sender, eOpts)
{
    sender.addCls('mycalendar');
}

3. UniCalendar -> ClientEvents -> UniEvents -> function picker.beforeInit:

function picker.beforeInit(sender, config)
{
    config.width= "100%"
}

4. UniCalendar -> ClientEvents -> ExtEvents -> function picker.resize:

function picker.resize(sender, width, height, oldWidth, oldHeight, eOpts)
{
    var container=sender.ownerCt;
    var headerHeight=Ext.get(container.el.select('.x-datepicker-header').elements[0]).getHeight();
    var footerHeight=Ext.get(container.el.select('.x-datepicker-footer').elements[0]).getHeight();
    
    var tableHeight=container.el.getHeight()-headerHeight-footerHeight;
    
    container.el.select('.x-datepicker-inner').elements[0].style.height=tableHeight-2;
    container.el.select('.x-datepicker-inner').elements[0].style.top=0;
    
    container.el.select('table td .x-datepicker-date').elements.forEach(function(c){c.style.height="100%"});
    
    container.doLayout();
}

I have a problem with the TUniCalendar component, I put it inside a UniContainerPanel and aligned UniCalendar = alClient even though it keeps cutting the days.

My form is aligned with uniAlignmentServer

[Sherzod]

12 minutes ago, eduardosuruagy said:

I have a problem with the TUniCalendar component, I put it inside a UniContainerPanel and aligned UniCalendar = alClient even though it keeps cutting the days.

My form is aligned with uniAlignmentServer

Hello,

Please make a simple testcase to see the issue.