Jump to content
uniGUI Discussion Forums
ginnix

Resize Form

Recommended Posts

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

Share this post


Link to post
Share on other sites

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();
}

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×