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
Top comments (0)