React-big-calendar: How to change start day in month view

[Mostafasaffari]

Hi guys
I use Persian calendar. everything is OK, except start date in month view.

[jquense]

Sorry i'm not sure what the red lines mean, can you describe what is wrong more specifically?

[Mostafasaffari]

Sorry.
I edited picture.
My problem is, Month must start 01. but when change calendar to Persian calendar Or Jalali moment, month start from 12. and every month shown wrong number of day.

[jquense]

huh, what localizer and configuration are you using?

[Mostafasaffari]

I Use moment-jalali for jalali calendar.
my code is

import React, { Component } from "react";
import BigCalendar from "react-big-calendar";
import dates from "react-big-calendar/lib/utils/dates";
import moment from "moment-jalaali";
import HTML5Backend from "react-dnd-html5-backend";
import { DragDropContext } from "react-dnd";

import withDragAndDrop from "react-big-calendar/lib/addons/dragAndDrop";
import "react-big-calendar/lib/css/react-big-calendar.css";


//moment.loadPersian({ usePersianDigits: true, dialect: "persian-modern" });

BigCalendar.setLocalizer(BigCalendar.momentLocalizer(moment));

const Calendar = withDragAndDrop(BigCalendar);

function EventAgenda({ event }) {
  return (
    <span>
      <em style={{ color: "magenta" }}>{event.title}</em>
      <p>{event.desc}</p>
    </span>
  );
}
let formats = {
  dateFormat: "jDD",
  dayFormat: "ddd jMM/jDD",
  weekdayFormat: "ddd",

  timeGutterFormat: "HH:mm",

  monthHeaderFormat: "jMMMM jYYYY",
  dayHeaderFormat: "ddd jYYYY/jMM/jDD",
  dayRangeHeaderFormat: ({ start, end }, culture, local) =>
    local.format(start, "jMMMM jDD", culture) +
    " - " +
    local.format(
      end,
      dates.eq(start, end, "month") ? "jDD" : "jMMMM jDD",
      culture
    )
  // agendaDateFormat: "ddd MMM dd",
  // agendaTimeFormat: "HH:mm"
};
class FullCalender extends Component {
  render() {
    const calendarOptions = {
      popup: true,
      selectable: true,
      step: 60,
      timeslots: 2,
      className: "isomorphicCalendar",
      agenda: {
        event: EventAgenda
      },
      formats
    };
    return (
      <Calendar
        {...calendarOptions}
        {...this.props}
        views={["month", "week", "day"]}
        rtl={true}
        defaultDate={new Date()}
      />
    );
  }
}
const CalendarExample = DragDropContext(HTML5Backend)(FullCalender);
export default CalendarExample;

[Mostafasaffari]

@jquense
could you understand what problem is?

[jquense]

I haven't had a chance to look but my guess is the localizer is returning the wrong start of the week, maybe this version of moment operates differently?

[Mostafasaffari]

This library(moment-jalaali) work fine in fullcalendar.js
https://github.com/Natico/fullcalendar-Jalaali
My localizer return

 week:
      { dow: 6, // Saturday is the first day of the week.
       doy: 12 // The week that contains Jan 1st is the first week of the year.
      }

react-big-calendar reaction true when I change "dow" , but it doesn't reaction when I change "doy"

[jquense]

to be honest i'm not sure what "working" looks like here. is the year supposed to start on week 12? what would correct look like here.

[Mostafasaffari]

Yes, year in Jalali calendar started from week 12 of Gregorian.
Can I set start week in react-big-calendar?

[Mostafasaffari]

I solved it.
May be anyone need it.

Change this line in date-arithmetic

    switch (unit) {
      case 'century':
      case 'decade':
      case 'year':
          date = dates.month(date, 0);
      case 'month':
          //date = dates.date(date, 1);
//edit by mostafaSaffari          
          date=new Date(moment(`${date.toISOString()}`).startOf("jMonth").format());          
//edit by mostafaSaffari
      case 'week':
      case 'day':

Change this line in month.js in react-big-calendar

//edit by mostafaSaffari
//var isOffRange = _dates2.default.month(date) !== _dates2.default.month(currentDate);
var isOffRange = _dates2.default.month(new Date(moment(date.toISOString()).endOf("jMonth").format())) !== 
                 _dates2.default.month(new Date(moment(currentDate.toISOString()).endOf("jMonth").format()));
//edit by mostafaSaffari

And add this line in BackgroundCells.js

    return _react2
      .default
      .createElement('div', {
        className: 'rbc-row-bg'
      }, range.map(function (date, index) {
        var selected = selecting && index >= startIdx && index <= endIdx;

        var _ref = dayPropGetter && dayPropGetter(date) || {},
          className = _ref.className,
          style = _ref.style;
//edit by mostafaSaffari
currentDate=new Date(moment(currentDate.toISOString()).endOf("jMonth").format());
date=new Date(moment(date.toISOString()).endOf("jMonth").format());
//edit by mostafaSaffari
        return _react2
          .default
          .createElement(Wrapper, {
            key: index,
            value: date,
            range: range
          }, _react2.default.createElement('div', {
            style: style,
            className: (0, _classnames2.default)('rbc-day-bg',
             className, selected && 'rbc-selected-cell',
              _dates2.default.eq(date, current, 'day') && 'rbc-today', 
              currentDate && _dates2.default.month(currentDate) !== _dates2.default.month(date) && 'rbc-off-range-bg')
          }));

[elhampour]

@Mostafasaffari did you contribute your solution to this repository ? I have this problem and I wonder how did you use your solution ?

[Mostafasaffari]

@elhampour, changes are not for this repository. They are for "date-arithmetic" repository. also my changes for jalali calendar only and are not public. I think You should clone repository and change and use

[benamm]

@jquense how fix this???