I use this component on an Iphone and it has 2 problems
1) it doesn't show the < and > arrows on the movetolastmonth and movetonextmonth buttons. It does show them on Android and in the Chrome browser. Maybe the "/HorizontalCalendar/arrow-left.svg" is not shown properly on an iphone. When I tried to make the buttons bigger the <> arrows are showing very little, so I think they are showing but they are too small. Could I change the Javascript part '<button class="move_to_last_month"> <img src="'+$parameters.IconLeft+'"> </button>', to make the arrow bigger? (in fact it only needs to change for iphone, maybe something with .iphonex{} I think)
2) button movetonextmonth is shown apart from the calendar, it's the result of a break I think.
I changed the javscript in the OnReady of the Horizontal calendar to eliminate this behaviour, no succes yet.
'<div class="columns cols3 gutter phone-portrait-break-none phone-landscape-break-none tablet-portrait-break-none tablet-landscape-break-none break-inside: avoid">',
'<div class="rescalendar_day_cells phone-portrait-break-none phone-landscape-break-none tablet-portrait-break-none tablet-landscape-break-none break-inside: avoid"></div>',
Solved this problem : I added fontsize and font-weight in CSS of Horizontal calendar otherwise the buttons will never show in IOS. This also solved the overflow problem ! :-)
.move_to_last_month, .move_to_next_month { border: 0; width: 10%; font-weight: bold!important; font-size: 9px!important; }
I tried other buttons for < and > but they are not showing either on Iphone, they show properly on Android.