Month Calendar

## Introduction Hello, developers! I'm thrilled to share my latest project: a **Month Calendar**. This project is perfect for anyone looking to create a functional and visually appealing calendar in JavaScript. Whether you're interested in adding a calendar feature to a website or just want to enhance your JavaScript skills, this project will be a valuable addition to your portfolio. ## Project Overview The **Month Calendar** is a web-based application that displays the current month, highlighting today's date and accurately arranging the days of the week. The project showcases how to dynamically generate a calendar using JavaScript, combined with a sleek and responsive interface built with HTML and CSS. ## Features - **Dynamic Month Display**: Automatically displays the current month and year. - **Highlighted Current Date**: Today’s date is highlighted for easy identification. - **Accurate Day Layout**: Days of the week are correctly aligned according to the month. ## Technologies Used - **HTML**: Provides the structure for the Month Calendar. - **CSS**: Styles the calendar, ensuring it is visually appealing and responsive. - **JavaScript**: Handles the logic for generating the calendar, including calculating the days and highlighting the current date. ## Project Structure Here's an overview of the project structure: ``` Month-Calendar/ ├── index.html ├── style.css └── script.js ``` - **index.html**: Contains the HTML structure for the Month Calendar. - **style.css**: Includes CSS styles to create a modern and responsive design. - **script.js**: Manages the calendar generation functionality. ## Installation To get started with the project, follow these steps: 1. **Clone the repository**: ```bash git clone https://github.com/abhishekgurjar-in/Month-Calendar.git ``` 2. **Open the project directory**: ```bash cd Month-Calendar ``` 3. **Run the project**: - Open the `index.html` file in a web browser to view the Month Calendar. ## Usage 1. **Open the website** in a web browser. 2. **View the current month** with today’s date highlighted. 3. **Navigate through the days** to see the layout for the entire month. ## Code Explanation ### HTML The `index.html` file defines the structure of the Month Calendar, including the month display and the grid layout for the days. Here’s a snippet: ```html Month Calendar

Mon

Tue

Wed

Thu

Fri

Sat

Sun

``` ### CSS The `style.css` file styles the Month Calendar, making it both attractive and responsive. Below are some key styles: ```css * { margin: 0; padding: 0; font-family: sans-serif; box-sizing: border-box; } .container { width: 100%; height: 100vh; background-color: salmon; display: flex; justify-content: center; align-items: center; flex-direction: column; } .header { margin: 20px; color: white; text-align: center; } .calendar { background-color: black; color: lightgray; width: 450px; height: 520px; border-radius: 10px; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4); } .month { width: 100%; height: 120px; background-color: lightseagreen; display: flex; justify-content: center; align-items: center; text-align: center; border-radius: 10px 10px 0 0; } .month h1 { font-size: 30px; font-weight: 400; text-transform: uppercase; } .month p { font-size: 16px; } .weekdays { width: 100%; height: 50px; display: flex; } .weekdays div { font-size: 15px; font-weight: bold; letter-spacing: 1px; width: 100%; display: flex; align-items: center; justify-content: center; } .days { width: 100%; display: flex; flex-wrap: wrap; padding: 2px; } .days div { font-size: 14px; margin: 3px; width: 57.5px; height: 50px; display: flex; justify-content: center; align-items: center; } .days div:hover:not(.empty) { border: 2px solid gray; cursor: pointer; } .today { background-color: lightseagreen; } .footer { margin-top: 70px; color: white; text-align: center; } ``` ### JavaScript The `script.js` file contains the logic for generating the calendar and highlighting the current date. Here's a snippet: ```javascript const monthEl = document.querySelector(".date h1"); const fullDateEl = document.querySelector(".date p"); const daysEl = document.querySelector(".days"); const monthInx = new Date().getMonth(); const lastDay = new Date(new Date().getFullYear(), monthInx + 1, 0).getDate(); const firstDay = new Date(new Date().getFullYear(), monthInx, 1).getDay() - 1; const months = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ]; monthEl.innerText = months[monthInx]; fullDateEl.innerText = new Date().toDateString(); let days = ""; for (let i = firstDay; i > 0; i--) { days += `

`; } for (let i = 1; i <= lastDay; i++) { if (i === new Date().getDate()) { days += `

${i}

`; } else { days += `

${i}

`; } } daysEl.innerHTML = days; ``` ## Live Demo You can check out the live demo of the Month Calendar project [here](https://abhishekgurjar-in.github.io/Month-Calendar/). ## Conclusion Creating the Month Calendar was an enjoyable project that allowed me to combine my front-end development skills with practical JavaScript functionality. This tool is useful for displaying calendar dates on websites and can be a great addition to your web development projects. I hope you find it as helpful as I do. Happy coding! ## Credits This project was developed as part of my journey to enhance my JavaScript skills and create functional web tools. ## Author - **Abhishek Gurjar** - [GitHub Profile](https://github.com/abhishekgurjar-in)

monthcalendar

Build a Month Calendar Website

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