CODEWITHSUNDEEP
reactjsreact-big-calendar
Dhruvil Dave
Dhruvil Dave

Reputation: 109

how to disable event select in react big calender

I want to disable an event for clickEvent I have 2 type of events in react big calendar (holiday and leave). I am using green color to show events of leave and red for holiday. I want to update only holiday event so my question is how can i disable event of leaves so that when i click on it, it should not open any type of form to update. I have used this code

<Calendar
  selectable
  onSelectSlot={this.toggleAddModal}
  onSelectEvent={this.toggleEditModal}
  events={list}
  startAccessor="start"
  endAccessor="end"
  defaultDate={moment().toDate()}
  localizer={localizer}
  eventPropGetter={event => {
    const eventData = list.find(ot => ot.id === event.id);
    const backgroundColor = eventData && eventData.color;
    return { style: { backgroundColor } };
  }}
/>

onSelectEvent={this.toggleEditModal} it is the prop where i am opening the EditEvent dialog.

events={list}

it is the bind event list for both holiday and leaves like this const list = [...holidays, ...leaves]

Thank you in advance.

Upvotes: 1

Views: 2317

Answers (1)

Dhruvil Dave
Dhruvil Dave

Reputation: 36

resolved this issue by updating toggleEditModal into this

toggleEditModal = event => {
        if (event.type == 'holiday') {
            if (!this.state.isAddModalOpen) {
                let fields = this.state.fields;
                fields['is_restricted'] = event.resource;
                fields["occasion"] = event.title;
                fields['for_date'] = event.start;
                fields['id'] = event.id;
                this.setState({
                    fields,
                    currentEvent: event,
                    isEditModalOpen: !this.state.isEditModalOpen,
                });
            }
        }
    };

Upvotes: 2

Related Questions