1. Home
  2. Forum
  3. Flutter
  4. Flutter - SfCalendar, Weekly View Text disappears on Web when Zoomed

Flutter - SfCalendar, Weekly View Text disappears on Web when Zoomed

Hello,

It appears that on any browser tested so far (Chrome, Firefox and Edge), if the Zoom level for that Browser is set to be at or above 120%, then most of the text disappears in a SfCalendar within the Weekly view (probably other views as well, but that's what's been tested).

Is there a solution for this?

Thanks!


5 Replies
IR Indumathi Ravichandran Syncfusion Team June 2, 2023 01:06 PM UTC

Hi Martin,


As per the shared information, we have checked the mentioned issue “Calendar texts disappear when the zoom level in above 120%” and we are unable to reproduce the mentioned issue, it was working fine as expected from our end. We have attached the screenshots for the same. If possible can you please share your issue details clearly with illustration image? It would be helpful for us to analyze and provide you a solution at the earliest.



Regards,
Indumathi R


MA Martin June 3, 2023 04:52 PM UTC

Hello Indumathi,

Please see the attached image. The test you performed was on an all day event and those seem to be OK.

Other events that are not all day seem to have a problem though when zoomed to 125%.


IR Indumathi Ravichandran Syncfusion Team June 5, 2023 07:29 AM UTC

Hi Martin,


As per the current implementation, appointment texts are disappeared when the available height is not enough to render the appointment text. We have fontSize property in the appointmentTextStyle of the Flutter calendar, using this property you can customize the appointment text with required font size. Kindly use this property for achieving your requirement. Please find the documentation from the following link.


UG link:

https://help.syncfusion.com/flutter/calendar/appointments#appearance-customization


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


Regards,

Indumathi R


MA Martin June 6, 2023 02:57 AM UTC

Hello Indumathi,

The approach you outlined really did not help. 

In the end, setting the "TimeSlotViewSettings" "timeIntervalHeight" property to increase with the Zoom level of the browser seems to be working.

The key was to find the browser Zoom level using the "MediaQuery.devicePixelRatioOf(context)" to return a double value that can then be used to dynamically set the correct timeIntervalHeight as the user Zooms the browser to 110 - 150% for example.

-- Martin


IR Indumathi Ravichandran Syncfusion Team June 6, 2023 09:11 AM UTC

Martin,


Regarding Query 1: The approach you outlined really did not help. 


As per our last update, texts are disappeared when the available height is not enough to render the appointment text. By using fontSize property in the appointmentTextStyle of the Flutter calendar you can change (increase or decrease) the text size as per the appointment height and also using the timIntervalHeight property in the timeSlotViewSettings, you can increase the height value, so appointment view increases height to render the text whenever zooms the browser. We hope that this information helps you. Please let us know if you need further assistance.


Regarding Query 2: In the end, setting the "TimeSlotViewSettings" "timeIntervalHeight" property to increase with the Zoom level of the browser seems to be working.


However, we are glad to know that the reported problem has been resolved at your end. Please let us know if you need any other assistance. As always, we will gladly assist you.


Regards,

Indumathi R


Loader.
Up arrow icon