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 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 ?! 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 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, Link to comment Share on other sites More sharing options...
Sherzod Posted November 3, 2017 Share Posted November 3, 2017 In the process 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(); } 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 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now