title: How to change props dynamically - fullcalendar
body: <p>I use the fullcalendar library,
  I want to change the calendar language when I change the language of the site.
  the default language of the calendar is 'en'.
  I want to change the locale but this prop is read only.
  The program is written in react-redux.</p>
  
  <p>here the function that create the calendar</p>
  
  <pre><code>export const createCalendar = (title) =&gt; {
    let id = nextId();
    let calendarRef = React.createRef();
    let calendar = &lt;div className='calendar'&gt;
      &lt;h1 className='calendar-title'&gt;{title}&lt;/h1&gt;
      &lt;FullCalendar
        ref={calendarRef}
        id={id}
        defaultView='timeGridWeek'
        plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
        customButtons={{
          save: {
            text: 'Save',
            click: function () {
              alert('clicked the custom button!');
            }
          }
        }}
        header={{
          center: '',
          left: '',
          right: 'save'
        }}
        hiddenDays={[6]}
        allDaySlot={false}
        slotDuration='00:30:00'
        snapDuration='00:05:00'
        minTime="07:00:00"
        maxTime="23:00:00"
        height="auto"
        titleFormat={{ weekday: 'long' }}
        columnHeaderFormat={{ weekday: 'long' }}
        selectable={true}
        selectHelper={true}
        editable={true}
        droppable={true}
        eventDrop={function (info) { eventChanged(info, id); }}
        eventReceive={function (info) { addEvent(info, id); forceSchedsUpdate(id); }}
        eventResize={function (info) { eventChanged(info, id); }}
        eventLimit={true}
        eventClick={eventClick}
        events={[]}
        locales={allLocales}
        locale={store.getState().literals.lang}
        dir={store.getState().literals.dir} /&gt;
    &lt;/div&gt;
    store.dispatch({
      type: CREATE_CALENDAR,
      payload: { calendar, title, id, calendarRef }
    });
  }
  </code></pre>
  
  <p>here the reducer of the calendars</p>
  
  <pre><code>import { GET_SCHEDULES, SET_LOADING, SCHEDULE_ERROR, CREATE_CALENDAR, SELECT_CALENDAR, DELETE_SCHEDULE, ADD_EVENT, DELETE_EVENT, EVENT_CHANGED, CHANGE_LANG_SCHEDS } from '../actions/types';
  
  const initialState = {
    schedules: {},
    counter: 0,
    current: null,
    loading: false,
    error: null
  }
  
  export default (state = initialState, action) =&gt; {
    switch (action.type) {
      case GET_SCHEDULES:
        return {
          ...state,
          schedules: action.payload,
          loading: false
        };
      case CREATE_CALENDAR:
        return {
          ...state,
          current: action.payload.id,
          schedules: { ...state.schedules, [action.payload.id]: action.payload }
        }
      case SELECT_CALENDAR:
        return {
          ...state,
          current: action.payload
        }
      case DELETE_SCHEDULE:
        delete state.schedules[action.payload]
        return {
          ...state,
          counter: state.counter + 1
        }
      case ADD_EVENT:
        state.schedules[action.payload.schedId].calendarRef.current.props.events.push(action.payload.event);
        return {
          ...state
        }
      case EVENT_CHANGED:
        state.schedules[action.payload.schedId].calendarRef.current.props.events.forEach(event =&gt; {
          if (event.eventId === action.payload.eventId) {
            event.endTime = action.payload.endTime;
            event.startTime = action.payload.startTime;
            event.daysOfWeek[0] = action.payload.daysOfWeek;
          }
        });
        return {
          ...state
        }
      case DELETE_EVENT:
        const copySchedsDeleteEvent = state.schedules;
        copySchedsDeleteEvent[action.payload.sched_id].calendarRef.current.props.events.pop(action.payload.event_id);
        return {
          ...state,
          schedules: copySchedsDeleteEvent
        }
      case SET_LOADING:
        return {
          ...state,
          loading: true
        };
      case SCHEDULE_ERROR:
        return {
          ...state,
          error: action.payload
        };
      case CHANGE_LANG_SCHEDS:
        for (let key in state.schedules) {//not working 
          //state.schedules[key].calendarRef.current.setOption('locale', 'en');
          //state.schedules[key].calendarRef.current.props.dir = action.payload.dir;
        }
        return {
          ...state,
          counter: state.counter + 1
        };
      default:
        return { ...state };
    }
  }
  </code></pre>