简体   繁体   中英

How to change props dynamically - fullcalendar

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.

here the function that create the calendar

export const createCalendar = (title) => {
  let id = nextId();
  let calendarRef = React.createRef();
  let calendar = <div className='calendar'>
    <h1 className='calendar-title'>{title}</h1>
    <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} />
  </div>
  store.dispatch({
    type: CREATE_CALENDAR,
    payload: { calendar, title, id, calendarRef }
  });
}

here the reducer of the calendars

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) => {
  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 => {
        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 };
  }
}

If you want to load ALL locales have the ability to switch between them after pageload, do something like this:

import { Calendar } from 
'@fullcalendar/core';
import allLocales from 
'@fullcalendar/core/locales-all';

...

 let calendar = new 
Calendar(calendarEl, {
locales: allLocales,
locale: 'fr' // the initial locale
});

and in your user-end JavaScript use

 calendar.setOption('locale', 'pt- 
 br');

To set locale dynamically

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM