Как динамически менять реквизит - fullcalendar - PullRequest
Новая
       35

Как динамически менять реквизит - fullcalendar

0 голосов
/ 23 января 2020

Я использую библиотеку fullcalendar, я хочу изменить язык календаря при смене языка сайта. языком календаря по умолчанию является «en». Я хочу изменить локаль, но этот реквизит только для чтения. Программа написана в реаги-редуксе.

здесь функция создания календаря 

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

1 Ответ

1 голос
/ 23 января 2020

Если вы хотите загрузить ВСЕ локали с возможностью переключения между ними после загрузки страницы, сделайте что-то вроде этого: 

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

... 

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

и в вашем пользователе -end JavaScript использовать 

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

Для динамического задания локали

...