Calendar Sizing Customization

[Mehmood Ahmed]

Hi,

I want to adjust the width of syncfusion calendar. It seems to be wider than my requirement. I cannot find any attributes to customize the calendar size through Angular 6. I'm attaching the html, scss and screenshot of the calendar.

Regards,

Mehmood

Attachment: Calendar_35e0a4f2.zip

[Deepa Loganathan]

Hi Mehmood, 

 

Thanks for contacting Syncfusion Support. 

 

You can customize the width of Calendar popup element by using the open event of DatePicker. We have prepared a sample based on your requirement and is available in the following Stackblitz link. 

 

Sample: https://stackblitz.com/edit/angular-ug79ub-nnzh5k?file=default.html  

 

In the open event of Datepicker, you need to set the width of the Calendar wrapper element with setAttribute method and then adjust the max-width of the immediate child of Calendar element (highlighted below) to fit in the Calendar pop-up as given in the below code. 

 

The reference to Calendar popup could be obtained by using popupObjectArgs of open event 

 

 

 

 

 

onLoad(args: any) { 

    args.popup.element.setAttribute('width', '400px'); 

    args.popup.element.children[0].classList.add('allow-width') 

  } 

 

 

 

 

Please get back to us if need any further assistance. 

 

 

Regards, 

 

Deepa L.