Calendar View Outer Days / Custom Labels

Hi, I’m trying to test some features before we know if mobiscroll fits our needs.
So I ran into two problems while setting up the calendar view:

  1. Is there a way to hide the entire outer week? I don’t want to display the whole week of the next month, sometimes it’s even 2 weeks.
  2. I used renderLabel to set up the events: I added some padding and changed the styles a bit, but they overlap each other, what can I do about it?

Custom label code:

const MonthEvent = styled(Box, { shouldForwardProp: (prop) => prop !== ‘eventColor’ })
<{ eventColor: string }>(({ theme, eventColor }: any) => ({
padding: ‘5.5px 8px’,
margin: ‘0 4px’,
borderRadius: 4,
backgroundColor: eventColor,
color: ‘white’,

renderLabel: ({ original: { title } }) => (

<MonthEvent eventColor={color}>
    <Typography variant='body2' fontSize='12px' fontWeight={400} lineHeight='15px'>
        { title }


Okay, I solved 2nd issue by defining fixed height in scss:

.mbsc-ios .mbsc-calendar-text {
height: 26px !important;

Used !important because height gets overrided by this selector on higher resolutions

.mbsc-ios.mbsc-calendar-width-md .mbsc-calendar-text

edit: just found out that 1st issue was also fixed by that :smiley:, but answer about hiding outer weeks without changing height still would be helpful