Overlay date picker for calendar

[Robert Moller]

We would like to show only one week of the month in the month view of the calendar, but when we do this, the date picker popup displays incorrectly. Is there a way to have the calendar with a set height and the popup overlay in a similar sense to the native drop-down buttons? Or if there isn't, could you look into adding it as a possibility, please?

[Indumathi Ravichandran]

Hi Robert,

As  per the shared information, we have checked the mentioned issue “Date picker overlays in the Flutter Calendar while
numberOfWeeksInView value as 1” and it was working fine and there is no overlay in the date picker of calendar header.
Also we have attached the tested sample for your reference. Please find the sample from the attached link.

Tested devices:

• Samsung M21

• Chrome

• Edge

• Windows

Tested version:

• Flutter Calendar: 22.2.8

If possible can you please share your issue details clearly with sample or code snippet. It would be helpful for us to analyze and provide you a solution at the earliest.

Regards.

Indumathi R

Attachment: number_of_weeks_inview_7d554878.zip

[Robert Moller]

Thank you for your reply, however, this does not address the issue I'm trying to convey.

We do not want a single week in the calendar to have the same height as the default number of 7 weeks, so we sized it to have a height of around 100. This shrinks the calendar to appear the way our clients want it, but the popup for the date picker is restricted to the size of the calendar, making it appear incorrectly. If it could be possible to make this popup into an overlay that is not restricted by the size of the calendar itself, that would be great. Please see the attached example with a `SizedBox(height: 100,` around your provided example.

Kind regards,

Robert

Attachment: one_week_sized_example_480f0844.zip

[Indumathi Ravichandran]

Hi Robert,

Regarding Query:  If it could be possible to make this popup into an overlay that is not restricted by the size of the calendar itself, that would be great. 

By hiding the calendar header (headerHeight as 0) and adding the custom widget you can achieve this requirement. By tapping the custom widget you can show the picker and it is not restricted by calendar size. We have prepared the simple sample for the same. Please find the sample and video from the attached link.

Also please find the UG and KB documentation for the same.

UG link:

https://help.syncfusion.com/flutter/calendar/headers#customize-header-height-in-calendar

KB link:

https://support.syncfusion.com/kb/article/9606/how-to-add-custom-header-and-view-header-in-the-flutter-calendar

We hope that this helps you. Please let us know if you need further assistance.

Regards,

Indumathi R

Attachment: Sample_and_video_aa6b7631.zip