Display 2 calendars (Georgian, and Hijri) per each day

Question

How can I display Georgian and Hijri day on each day using react-day-picker? the target is something like this

Answer 1

Actually, the solution is quite simple, I just was in a rush. If you are using react-day-picker you can leverage renderDay prop to calculate the Hijri date and customize each day cell.

Here is a working example

import React from "react";
import ReactDOM from "react-dom";
import DayPicker from "react-day-picker";
import hijriDate from "hijrah-date";

import "react-day-picker/lib/style.css";
import "./styles.css";

const renderDay = day => {
  const date = day.getDate();
  const hijDate = new hijriDate(day);
  const d = hijDate.getDate();

  return (
    <div>
      <span>{date}</span>
      <br />
      <small>{d}</small>
    </div>
  );
};
function App() {
  return (
    <div className="App">
      <DayPicker renderDay={renderDay} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);