how to show date below day of month in react?

Question

I am trying to make simple current month calendar using react + moment js.I am able to get first date and end date of month .Now I want to show my dates below days ( Mon , Tue ...).So first sep 01-08-2020 will come below Tue

here is my code https://codesandbox.io/s/quirky-ellis-xh5tn?file=/src/App.js

Actually it look like this

But currently my dates are look showing in horizontally .like this

here is my code

import React, { useState } from "react";
import "./styles.css";
import moment from "moment";

function fetchMonthDates() {
  let monthDates = [];
  let start = moment().startOf("month").date();
  let end = moment().endOf("month").date();
  for (let i = 0; i < end; i++) {
    let obj = {
      _id: moment().startOf("month").add(i, "days").format("DD-MMM-YYYY"),
      date: moment().startOf("month").add(i, "days").date()
    };
    monthDates.push(obj);
  }

  return monthDates;
}

export default function App() {
  const [state, setState] = useState(() => fetchMonthDates());
  return (
    <div className="App">
      <ul className="header">
        <li className="header-item pd15">Sun</li>
        <li className="header-item pd15">Mon</li>
        <li className="header-item pd15">Tue</li>
        <li className="header-item pd15">Wed</li>
        <li className="header-item pd15">Thu</li>
        <li className="header-item pd15">Fri</li>
        <li className="header-item pd15">Sat</li>
      </ul>
      <ul className="date-items">
        {state.map((i) => (
          <li className="pd15">{i.date}</li>
        ))}
      </ul>
    </div>
  );
}

I am not looking for styling but date should display below day ? can it is possible .I don't want to use datepicker I am making custom current month calender

any update ? it this possible

Answer 1

This is rudimentary, but you can tweak it for permanence:

// App.js
import React, { useState } from "react";
import "./styles.css";
import moment from "moment";

function fetchMonthDates() {
  let monthDates = [];
  let start = moment().startOf("month").date();
  let end = moment().endOf("month").date();
  // this is to offset the starting day, which was a Tues for September
  const firstDayOffSet = moment().startOf("month").day();

  for (let i = 0; i < end; i++) {
    let obj = {
      _id: moment().startOf("month").add(i, "days").format("DD-MMM-YYYY"),
      date: moment().startOf("month").add(i, "days").date()
    };
    monthDates.push(obj);
  }

  // pads the beginning of the array to slide the days to the right
  // you'll want to pad this with the previous months days up to the 
  // offset count
  return [...[...new Array(firstDayOffSet)].map(()=> ({_id: '', date: ''})),...monthDates];
}

export default function App() {
  const [state, setState] = useState(() => fetchMonthDates());
  return (
    <div className="App">
      <ul className="calendar">
        <li className="header-item pd15">Sun</li>
        <li className="header-item pd15">Mon</li>
        <li className="header-item pd15">Tue</li>
        <li className="header-item pd15">Wed</li>
        <li className="header-item pd15">Thu</li>
        <li className="header-item pd15">Fri</li>
        <li className="header-item pd15">Sat</li>
        {state.map((i) => (
          <li className="pd15">{i.date}</li>
        ))}
      </ul>
    </div>
  );
}

// styles.css
.App {
  font-family: sans-serif;
}
ul {
  list-style: none;
}

.pd15 {
  padding: 5px;
  text-align: center;
}

.calendar {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto;
  grid-template-rows: auto;
  border-bottom: 1px solid #eeeeee;
  border-top: 1px solid #eeeeee;
}

I did some styling so I could see it correctly, but you can ignore those if you don't need it.

This gave me this for September: