React

by bemulima

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

const calendarComponentRef = React.createRef(),
    Schedule = (props) => {
        return (
            <FullCalendar
                minTime={'10:00'}
                slotLabelInterval={'00:30'}
                selectable={true}
                maxTime={'14:00'}
                locales={[ruLocale]}
                defaultView="timeGridWeek"
                plugins={[ timeGridPlugin,interactionPlugin ]}
                ref={ calendarComponentRef }
                dateClick={function(info) {
                    console.log('clicked ', info);
                }}
                // unselectAuto={false}
                select={(info) => {
                    console.log('selected ', info);
                    console.log('calendarComponentRef ', calendarComponentRef);

                    calendarComponentRef.current.calendar.addEvent({
                        start: info.start,
                        end: info.end,
                        rendering: 'background',
                        block: true,
                    });
                    let calendarApi = calendarComponentRef.current.getApi();
                    calendarApi.unselect()
                }}
                unselect={function( jsEvent, view ){
                    console.log('unselected', jsEvent, view)
                }}
                height={'auto'}
                firstDay={'today'}
                selectOverlap={function (event) {
                    console.log('selectOverlap', event)
                    if(event.rendering !== 'background'){
                        calendarComponentRef.current.calendar.addEvent({
                            start: event.start,
                            end: event.end,
                            rendering: 'inverse-background',
                            block: true,
                        });
                    }

                    return true;
                }}

            />
        )

    }

ReactDOM.render(<TodoApp />,...