jenil94

import React from "react";

const Calendar = () => {
  return <div></div>;
};

export default Calendar;

jenil94

import React from "react";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );

jenil94

import React from "react";

const Calendar = () => {
  return <section>Hello Calendar</section>;
};

export default Calendar;

jenil94

import React from "react";

const Calendar = () => {
  const getHeader = () => {};
  const getWeekDaysNames = () => {};
  const getDates = () => {};

  return (
    <section>
      {getHeader()}

jenil94

import React from "react";
import "./styles.css";
import Calendar from "./Calendar";

export default function App() {
  return (
    <div className="App">
      <Calendar />
    </div>
  );

jenil94

import React, { useState } from "react";

const Calendar = () => {
  const [selectedDate, setSelectedDate] = useState(new Date());
  const [activeDate, setActiveDate] = useState(new Date());

  const getHeader = () => {};
  const getWeekDaysNames = () => {};
  const getDates = () => {};

jenil94

.App {
  font-family: sans-serif;
  text-align: center;
  color: #212121;
}

.changeMonth {
  margin: 0px 20px;
}

jenil94

....
import { AiOutlineLeft, AiOutlineRight } from "react-icons/ai";
import { format } from "date-fns";

const Calendar = () => {
....
  const getHeader = () => {
    return (
      <div class="header">
        <div className="todayButton">Today</div>

jenil94

....
import { format, startOfWeek, addDays } from "date-fns";

const Calendar = () => {
....
  const getWeekDaysNames = () => {
    const weekStartDate = startOfWeek(activeDate);
    const weekDays = [];
    for (let day = 0; day < 7; day++) {
      weekDays.push(

jenil94

....
import {
  format,
  startOfWeek,
  addDays,
  startOfMonth,
  endOfMonth,
  endOfWeek,
  isSameMonth,
  isSameDay