Schedule- Customize Cell template in MonthView

[Alberto]

hello, I'm working on Scheduler and I like this component.

I need to customize the month cell display. Each cell represents a single day. I want to divide this cell into 4 parts. Each part represents 6 hours. Automatically when I click on the single piece of the day it must set the date in the modal.

the scheduler in the week view every hour is divided into 2 sections. When I click the single section it sets the time in the modal automatically.

https://ej2.syncfusion.com/react/documentation/schedule/cell-customization

for example:

there are 2 slots in the 9am cell. if I press the first slot, it sets the correct start time and end time in the editing modal (start date 8.00 am - end date 8.30 am). If instead I click on the second slot, the start date will be 8.30 am and the end date 9.00 am.

In the Month View is it possible to divide the cell into several sections as in the week view?

[Venkateshwaran Saravanakumar]

Hi Alberto,

Sample: https://stackblitz.com/edit/react-9y66yf-eqkuvv?file=index.js

By default, it is not possible to achieve your requirement in the month view, but you can achieve your requirement by extending the days in the day views by setting the interval option as 31 and by utilizing timescale option for the Day option within the ViewDirective as depicted in the following code example.

[index.js]

const ExtendedViews = () => {

    useEffect(() => {

        updateSampleSection();

    }, []);

    const data = extend([], dataSource.fifaEventsData, null, true);

    const [currentView, setCurrentView] = useState('Week');

    const onNavigating = (args) => {

        setCurrentView(args.currentView);

    };

    const timeScale = { enable: true, interval: 360, slotCount: 4 };

    const weekTimeScale = { enable: true, interval: 30, slotCount: 2 };

    return (<div className='schedule-control-section'>

      <div className='col-lg-12 control-section'>

        <div className='control-wrapper'>

          <ScheduleComponent width='100%' height='650px' selectedDate={new Date(2021, 5, 1)} eventSettings={{ dataSource: data }} currentView={currentView}>

            <ViewsDirective>

              <ViewDirective option='Day' displayName='Month' timeScale={timeScale} interval={31}/>

              <ViewDirective option='Week' displayName='Week' timeScale={weekTimeScale} interval={1}/>              

            </ViewsDirective>

            <Inject services={[Day, Week, WorkWeek, Month, Resize, DragAndDrop]}/>

          </ScheduleComponent>

        </div>

      </div>

    </div>);

};

export default ExtendedViews;

Regards,
Venkatesh