Неправильное отображение дат в react-big-calendar, почему?

Question

[OcelotJungle]

Импортирую календарь и moment.js:

import { Calendar, momentLocalizer } from "react-big-calendar";
import moment from "moment";

Создаю локализатор и список событий, вывожу в консоль для проверки значений:

const localizer = momentLocalizer(moment);
const events = [
	{
		title: "1",
		start: moment().toDate(),
		end: moment().add(1, "days").toDate()
	},
	{
		title: "2",
		start: moment().add(1, "days").toDate(),
		end: moment().add(2, "days").toDate()
	},
	{
		title: "3",
		start: moment().add(2, "days").toDate(),
		end: moment().add(3, "days").toDate()
	},
];
console.log(events);

Создаю календарь:

return <Calendar localizer={localizer} events={events} views={["month"]} />;

Всё в порядке, даты верные:

spoiler

Но календарь так не считает:

spoiler

Пробовал ставить версию календаря и последнюю - 0.31.0, и предыдущую - 0.30.0, и полугодовой давности - 0.27.0, эффекта нет. Соответственно, и настоящий список событий, который я пытался передавать, отображается неправильно.
Кто-нибудь может подсказать, что я делаю не так?

Answer 1

[Александр]

Не получается воспроизвести Вашу проблему. https://codesandbox.io/s/qna-q936059-uonwv

Comments

[OcelotJungle]

Спасибо, благодаря вам решил копнуть в сторону стилей, там оказалась ошибка.

Answer 2

[OcelotJungle]

Проблема решена. Как выяснилось, я изначально копал не туда, пытаясь найти ошибку в алгоритме, но оказалось, что виноват стиль.
Конкретно вот этот стиль ломал календарь:

.rbc-row-segment {
    max-width: 14.24% !important;
}