Calender in react js

In this post we are going to make a simple calender in react js

run the the following commands in the terminal:

npx create-react-app react-calender
cd react-calender
npm i react-calender

go to src/app.js and erase the content in it,
and import react, react-calender

import React from 'react';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';

next, create a function app and export

export default function App() {
  // main content goes here...
}

and set a value and onchange using react useState

export default function App() {
  const [value, onChange] = React.useState(new Date());
}

and then

export default function App() {
  const [value, onChange] = React.useState(new Date());

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

next go to src/index.js and paste the following code:

import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

app.js full source code:

import React from 'react';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';

export default function App() {
  const [value, onChange] = React.useState(new Date());

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

live demo: https://reactcalenderbyrishi.stackblitz.io/

thankyou

Blog

Rishikesh-Programmer

Join Our Newsletter. No Spam, Only the good stuff.

Related