如何使用 momentjs 在 react-big-calendar 上设置本地化

Question

https://jquense.github.io/react-big-calendar/examples/index.html

我正在尝试实现与上述示例类似的东西，但使用的是 momentjs 而不是 globalizer。

那么如何从 momentjs 导入我需要的时区并在我的日历中使用它，以便用户可以选择时区和语言

编辑：

这是我的代码，目前还很基础

const localizer = momentLocalizer(moment)
const DragAndDropCalendar = withDragAndDrop(Calendar)
const cultures = ['en', 'en-GB', 'es', 'fr', 'ar-AE']

<DragAndDropCalendar
        selectable
        localizer={localizer}
        events={schedule}
        className="cal_height"
        style={{ height: 1550 }}
        onSelectSlot={(e) => handlecreateSchedule(e)}
        onSelectEvent={(e) => handleselectSchedule(e)}
        onEventDrop={handleupdateSchedule}
        defaultView="week"
        min={new Date(today.getFullYear(), today.getMonth(), today.getDate(), 8)}
        scrollToTime={moment().set({ h: 10, m: 0 }).toDate()}
        timeslots={2}
        step={15}
        popup
        tooltipAccessor={(e) => e.title}
        startAccessor="start"
        endAccessor="end"
        components={{
          event: EventComponent,
        }}
        culture={cultures}
      />

Answer 1

您正确设置了本地化，但您的本地化程序首先需要设置默认时区。首先，您必须使用 moment-timezone。默认情况下，它使用您用户的默认（浏览器本地）时区。要更改它，您可以重置 moment 使用的默认时区。

moment.tz.setDefault(String);

你更大的问题是，目前React-Big-Calendar并不完全支持时区切换。这主要是由于它在内部使用 date-fns 库创建时隙，而不是使用本地化方法。这是在 this issue.

中列出的

最终编辑： RBC 的最新版本 (0.36.0) 现在具有完整的时区支持，无论是使用 momentLocalizer 还是新的 luxonLocalizer.文档站点尚未更新，但如果您运行在 'examples' 本地，您会找到所有信息。

如何使用 momentjs 在 react-big-calendar 上设置本地化

How to set up localization on react-big-calendar using momentjs

reactjs

react-big-calendar