Overflow of many events in one day in week callendar view

[piechoo]

Hi, I am facing some issue when I have many events in one day. Problem is visible in callendar view calendar: { type: 'week' }. My default view is calendar: { labels: true }, I have code used in yours demo and when I change view to week callendar events overflow the day grid and when I chage the view back to month callendar, the overflow is even bigger. First render : Changing view: Changing view again:

Here is my code:

 import React from 'react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';
import { Eventcalendar, getJson, setOptions, CalendarNav, SegmentedGroup, SegmentedItem, CalendarPrev, CalendarToday, CalendarNext,Button } from '@mobiscroll/react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

function App() {

  const [view, setView] = React.useState('month');

  const singleEvent = {
    start: '2021-09-02T09:00',
    end: '2021-09-02T18:00',
    title: 'Business of Software Conference',
    color: '#ff6d42',
  };
  const myEvents = [];
  for (let i = 0; i < 100; i++) {
    myEvents.push(singleEvent);
  }
  const [calView, setCalView] = React.useState(
      {
        calendar: { labels: true }
      }
  );

  const changeView = (event) => {
    let calView;

    switch (event.target.value) {
      case 'month':
        calView = {
          calendar: { labels: true }
        }
        break;
      case 'week':
        calView = {
          calendar: { type: 'week', size:2 }
        }
        break;
      case 'day':
        calView = {
          schedule: { type: 'day' }
        }
        break;
      case 'agenda':
        calView = {
          calendar: { type: 'week' },
          agenda: { type: 'week' }
        }
        break;
    }

    setView(event.target.value);
    setCalView(calView);
  }

  const customWithNavButtons = () => {
    return <React.Fragment>
      <CalendarNav className="cal-header-nav" />
      <div className="cal-header-picker">
        <SegmentedGroup value={view} onChange={changeView}>
          <SegmentedItem value="month">
            Month
          </SegmentedItem>
          <SegmentedItem value="week">
            Week
          </SegmentedItem>
          <SegmentedItem value="day">
            Day
          </SegmentedItem>
          <SegmentedItem value="agenda">
            Agenda
          </SegmentedItem>
        </SegmentedGroup>
      </div>
      <CalendarPrev className="cal-header-prev" />
      <CalendarToday className="cal-header-today" />
      <CalendarNext className="cal-header-next" />
    </React.Fragment>;
  }

  const renderScheduleEvent = (data) => {
      return <div className="md-custom-event-cont" >
        <div className="md-custom-event-wrapper">
          <div className="md-custom-event-details">
            <div className="md-custom-event-title">{data.title}</div>
            <div className="md-custom-event-time">{data.start} - {data.end}</div>
            <Button className="md-custom-event-btn" color="dark" variant="outline" >Edit</Button>
          </div>
        </div>
      </div>
  };

  return (
      <div className="md-switching-view-cont" style={{height:"100vh"}}>
        <Eventcalendar
            renderHeader={customWithNavButtons}
             view={calView}
            data={myEvents}
            renderScheduleEvent={renderScheduleEvent}
            theme="material"
        />
      </div>
  );
}

export default App;

[dioslaska]

The problem is you're pushing the same event object 100 times in the event array. You need to create individual objects for each event. Correct would be:

const myEvents = [];
for (let i = 0; i < 100; i++) {
  myEvents.push({
    start: '2021-09-02T09:00',
    end: '2021-09-02T18:00',
    title: 'Business of Software Conference',
    color: '#ff6d42',
  });
}