ginnix Posted October 30, 2017 Share Posted October 30, 2017 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 Quote Link to comment Share on other sites More sharing options...
Sherzod Posted October 31, 2017 Share Posted October 31, 2017 Hi, Do you mean UniCalendar ?! Quote Link to comment Share on other sites More sharing options...
ginnix Posted October 31, 2017 Author Share Posted October 31, 2017 yes, UniCalendar. How do you resize UniCalendar to the size of the web browser? Thanks Quote Link to comment Share on other sites More sharing options...
Sherzod Posted November 1, 2017 Share Posted November 1, 2017 Hi, We will try to give you a solution Best regards, Quote Link to comment Share on other sites More sharing options...
Sherzod Posted November 3, 2017 Share Posted November 3, 2017 In the process Quote Link to comment Share on other sites More sharing options...
Sherzod Posted November 4, 2017 Share Posted November 4, 2017 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(); } Quote Link to comment Share on other sites More sharing options...
eduardosuruagy Posted November 5, 2020 Share Posted November 5, 2020 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 Quote Link to comment Share on other sites More sharing options...
Sherzod Posted November 5, 2020 Share Posted November 5, 2020 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.