{"id":7308,"date":"2025-06-26T19:32:37","date_gmt":"2025-06-26T19:32:37","guid":{"rendered":"https:\/\/namastedev.com\/blog\/?p=7308"},"modified":"2025-06-26T19:32:37","modified_gmt":"2025-06-26T19:32:37","slug":"build-a-calendar-in-react-from-scratch-7","status":"publish","type":"post","link":"https:\/\/namastedev.com\/blog\/build-a-calendar-in-react-from-scratch-7\/","title":{"rendered":"Build a Calendar in React from Scratch"},"content":{"rendered":"<h1>Build a Calendar in React from Scratch<\/h1>\n<p>Creating a calendar from scratch using React is a fantastic project for developers looking to enhance their skills. This tutorial will guide you through the process step-by-step, providing clear instructions and code samples. Whether you are a beginner or an experienced developer, this project will provide valuable insights into React&#8217;s component architecture, state management, and event handling.<\/p>\n<h2>Why Build a Calendar?<\/h2>\n<p>Building a calendar application offers a hands-on experience with core React concepts such as:<\/p>\n<ul>\n<li>Component Composition<\/li>\n<li>State Management<\/li>\n<li>Event Handling<\/li>\n<li>Conditional Rendering<\/li>\n<\/ul>\n<p>Additionally, a calendar app can be a practical addition to your portfolio, showcasing your skills to potential employers or clients.<\/p>\n<h2>Setting Up the React Project<\/h2>\n<p>Before diving into code, let\u2019s set up a new React project using Create React App. Open your terminal and run:<\/p>\n<pre>\n<code>npx create-react-app react-calendar<\/code>\n<\/pre>\n<p>Once the setup is complete, navigate into your project directory:<\/p>\n<pre>\n<code>cd react-calendar<\/code>\n<\/pre>\n<p>Now, you can start the development server:<\/p>\n<pre>\n<code>npm start<\/code>\n<\/pre>\n<p>Your browser will open at <strong>http:\/\/localhost:3000<\/strong>, displaying a new React app!<\/p>\n<h2>Project Structure<\/h2>\n<p>For our calendar application, we&#8217;ll keep things organized. Here is a simple structure we\u2019ll follow:<\/p>\n<pre>\n<code>\nsrc\/\n\u251c\u2500\u2500 components\/\n\u2502   \u251c\u2500\u2500 Calendar.js\n\u2502   \u251c\u2500\u2500 Day.js\n\u2502   \u2514\u2500\u2500 Header.js\n\u2514\u2500\u2500 App.js\n<\/code>\n<\/pre>\n<h2>Creating the Calendar Component<\/h2>\n<p>Start by creating a new component named <strong>Calendar.js<\/strong> inside the <strong>components<\/strong> directory. This component will be the heart of our calendar application.<\/p>\n<pre>\n<code>\n\/\/ src\/components\/Calendar.js\nimport React, { useState } from 'react';\nimport Header from '.\/Header';\nimport Day from '.\/Day';\n\nconst Calendar = () =&gt; {\n    const [currentDate, setCurrentDate] = useState(new Date());\n\n    const getDaysInMonth = (month, year) =&gt; {\n        return new Date(year, month + 1, 0).getDate();\n    };\n\n    const getDayStartIndex = (month, year) =&gt; {\n        return new Date(year, month, 1).getDay();\n    };\n\n    const generateCalendar = () =&gt; {\n        const daysInMonth = getDaysInMonth(currentDate.getMonth(), currentDate.getFullYear());\n        const firstDayIndex = getDayStartIndex(currentDate.getMonth(), currentDate.getFullYear());\n        \n        const daysArray = [];\n        for (let i = 0; i &lt; firstDayIndex; i++) {\n            daysArray.push(<td><\/td>);\n        }\n        for (let day = 1; day &lt;= daysInMonth; day++) {\n            daysArray.push();\n        }\n        \n        return daysArray;\n    };\n\n    return (\n        <div>\n            <Header \/>\n            <table>\n                <thead>\n                    <tr>\n                        <th>Sun<\/th>\n                        <th>Mon<\/th>\n                        <th>Tue<\/th>\n                        <th>Wed<\/th>\n                        <th>Thu<\/th>\n                        <th>Fri<\/th>\n                        <th>Sat<\/th>\n                    <\/tr>\n                <\/thead>\n                <tbody>\n                    <tr>\n                        {generateCalendar()}\n                    <\/tr>\n                <\/tbody>\n            <\/table>\n        <\/div>\n    );\n};\n\nexport default Calendar;\n<\/code>\n<\/pre>\n<h2>Creating the Day Component<\/h2>\n<p>Next, let&#8217;s create a <strong>Day<\/strong> component that will represent each individual day in the calendar. Create a new file named <strong>Day.js<\/strong> inside the <strong>components<\/strong> directory.<\/p>\n<pre>\n<code>\n\/\/ src\/components\/Day.js\nimport React from 'react';\n\nconst Day = ({ day }) =&gt; {\n    return (\n        <td>\n            {day}\n        <\/td>\n    );\n};\n\nexport default Day;\n<\/code>\n<\/pre>\n<h2>Creating the Header Component<\/h2>\n<p>The <strong>Header<\/strong> component will display the current month and year, along with buttons to navigate between months. Create a file named <strong>Header.js<\/strong>.<\/p>\n<pre>\n<code>\n\/\/ src\/components\/Header.js\nimport React from 'react';\n\nconst Header = ({ currentDate, setCurrentDate }) =&gt; {\n    const prevMonth = () =&gt; {\n        const newDate = new Date(currentDate);\n        newDate.setMonth(newDate.getMonth() - 1);\n        setCurrentDate(newDate);\n    };\n\n    const nextMonth = () =&gt; {\n        const newDate = new Date(currentDate);\n        newDate.setMonth(newDate.getMonth() + 1);\n        setCurrentDate(newDate);\n    };\n\n    return (\n        <div>\n            <button>&lt;<\/button>\n            <h1>{currentDate.toLocaleString('default', { month: 'long' })} {currentDate.getFullYear()}<\/h1>\n            <button>&gt;<\/button>\n        <\/div>\n    );\n};\n\nexport default Header;\n<\/code>\n<\/pre>\n<h2>Styling the Calendar<\/h2>\n<p>Now that we have our components set up, it\u2019s time to style our calendar. Create a new file named <strong>Calendar.css<\/strong> in the <strong>src<\/strong> directory and add the following styles:<\/p>\n<pre>\n<code>\n.calendar {\n    max-width: 600px;\n    margin: auto;\n    border: 1px solid #ccc;\n    border-radius: 8px;\n}\n\n.header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 1rem;\n}\n\n.table {\n    width: 100%;\n    border-collapse: collapse;\n}\n\nth, td {\n    width: 14.28%;\n    height: 100px;\n    text-align: center;\n    border: 1px solid #ccc;\n}\n\n.day {\n    background-color: #f9f9f9;\n}\n\n.empty {\n    background-color: #ffffff;\n}\n<\/code>\n<\/pre>\n<p>Finally, import the styles into your <strong>Calendar.js<\/strong> component:<\/p>\n<pre>\n<code>\n\/\/ src\/components\/Calendar.js\nimport '.\/Calendar.css';\n<\/code>\n<\/pre>\n<h2>Integrating Calendar Component in App<\/h2>\n<p>To display our Calendar component, let\u2019s integrate it into our <strong>App.js<\/strong> file.<\/p>\n<pre>\n<code>\n\/\/ src\/App.js\nimport React from 'react';\nimport Calendar from '.\/components\/Calendar';\n\nconst App = () =&gt; {\n    return (\n        <div>\n            <h1>My React Calendar<\/h1>\n            \n        <\/div>\n    );\n};\n\nexport default App;\n<\/code>\n<\/pre>\n<h2>Final Touches and Running the App<\/h2>\n<p>Your calendar application is now complete! Run your development server once again and navigate to <strong>http:\/\/localhost:3000<\/strong>. You should see a fully functional calendar!<\/p>\n<h2>Enhancing Functionality<\/h2>\n<p>Once you have the basic calendar working, here are some features you might consider adding:<\/p>\n<ul>\n<li>Event Management: Allow users to add, edit, and delete events on specific days.<\/li>\n<li>Different Views: Implement views for week and day, in addition to the month view.<\/li>\n<li>Styling Enhancements: Use libraries like <strong>styled-components<\/strong> or <strong>Bootstrap<\/strong> for better UI.<\/li>\n<li>Mobile Responsiveness: Make your calendar responsive for mobile devices.<\/li>\n<\/ul>\n<h2>Conclusion<\/h2>\n<p>Building a calendar in React is not only a great learning experience but also a practical tool that can be extended to meet many needs. By mastering components, state management, and event-driven programming, you can enhance your skills and create more complex applications in the future.<\/p>\n<p>Don\u2019t forget to experiment with additional features and styles to make your calendar unique. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Build a Calendar in React from Scratch Creating a calendar from scratch using React is a fantastic project for developers looking to enhance their skills. This tutorial will guide you through the process step-by-step, providing clear instructions and code samples. Whether you are a beginner or an experienced developer, this project will provide valuable insights<\/p>\n","protected":false},"author":90,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[398],"tags":[224],"class_list":["post-7308","post","type-post","status-publish","format-standard","category-react","tag-react"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/7308","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/users\/90"}],"replies":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/comments?post=7308"}],"version-history":[{"count":1,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/7308\/revisions"}],"predecessor-version":[{"id":7311,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/7308\/revisions\/7311"}],"wp:attachment":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/media?parent=7308"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/categories?post=7308"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/tags?post=7308"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}