如何动态更改道具 - 全日历

Question

我使用完整的日历库， 我想在更改网站语言时更改日历语言。 日历的默认语言为"en"。 我想更改区域设置，但这个道具是只读的。 该程序是用 react-redux 编写的。

这里是创建日历的函数

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

这里是日历的减速器

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 };
}
}

Answer 1

如果你想加载所有语言环境，可以在页面加载后在它们之间切换，请做这样的事情：

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

。

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

并在您的用户端 JavaScript 使用

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

动态设置区域设置