App.jsx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | import React from 'react'; import ReactDOM from 'react-dom'; import { Calendar, momentLocalizer } from 'react-big-calendar'; import moment from 'moment'; import 'react-big-calendar/lib/css/react-big-calendar.css'; // Import necessary styles // Localizer for the calendar using moment.js const localizer = momentLocalizer(moment); // Sample events list const myEventsList = [ { title: 'Team Meeting', start: new Date(2025, 0, 6, 10, 0), // Year, Month (0-indexed), Day, Hours, Minutes end: new Date(2025, 0, 6, 11, 30), }, { title: 'Lunch Break', start: new Date(2025, 0, 7, 13, 0), end: new Date(2025, 0, 7, 14, 0), }, { title: 'Project Review', start: new Date(2025, 0, 8, 15, 0), end: new Date(2025, 0, 8, 16, 30), }, ]; const App = () => { return ( <div style={{ padding: '20px' }}> <h1>My Calendar</h1> <Calendar localizer={localizer} events={myEventsList} startAccessor="start" endAccessor="end" style={{ height: 500 }} /> </div> ); }; export default App |
