SharePoint 2016 Logo

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:

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

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

    clickToCreate={'double'} className='timelineRow' 
    dateFormat='YYYY-MM-dd' showControls={true}  timeFormat='hh:mm' 
    allDayText='Full day event'