I used EventCalendar component with resources and timeline view, the default interval is 1 month, I also add week numbers to the header. I wanted to fit the calendar to the page without horizontal scroll.

After the research of the mobiscroll forum and classes of the control, I tried to override these classes:

.mbsc-timeline-header-column,   .mbsc-timeline-column {

  width: auto; min-width: 40px;

}

.mbsc-timeline-resource-col, .mbsc-timeline-sidebar-col {

  width: 100px;

}

In July 2003 there are 6 weeks and the last one takes only 1 day, but the width of this cell is more than 1 day because the word “week” is longer than 2 digits. I tried to find how to override the rendering of the week title, but I couldn’t do it. The temporary solution is to override CSS class:

.mbsc-timeline-header-week-text {

  width: auto;

  text-align: center; margin: 0px; padding: 0px;

  font-size: 10px; font-weight: normal;

 }

I use Eventcalendar with React and it’s not good to add CSS classes to JSX code.

But in any case there was a problem with the title of weeks, it is in the format "Week 44". I wanted to make it shorter, for example, 'W 44'. As it turned out, there's a parameter for this and it's called simply 'weekText': w'weekText='W {count}'.

The example of the usage of Eventcalendar component is here:

<Eventcalendar
    theme="ios" themeVariant="light" locale={localeEn} width={'100%'}
     weekText='W {count}' 
    view={
      {

        timeline: {
          type: 'month', size: 1, weekNumbers: true
        }
    }}

    firstDay={1}
    clickToCreate={'double'} className='timelineRow' 
    dateFormat='YYYY-MM-dd' showControls={true}  timeFormat='hh:mm' 
    data={allEvents}
    resources={allResources}
    onEventClick={onEventClick}
    onEventCreated={updateSchedule}
    allDayText='Full day event' 
    renderScheduleEvent={renderScheduleEvent}
    renderDay={renderDayCustom}
    renderResourceHeader={renderResourceHeaderCustom}


/>