Web code

Follow us on Instagram for updates link
Home

Project 1 – Custom Calendar with Events, Festivals & Dark Mode

Project 1 – Custom Calendar

Date: April 23, 2025

Introduction

In this project, I created a Custom Calendar Web App with interactive features like event management, festival highlights, dark mode toggle, and a responsive design. It’s built with just HTML, CSS, and vanilla JavaScript — no frameworks!

What is this project?

  • View festivals and special days (with preloaded data)
  • Add their own events with customizable dot colors
  • Switch between light and dark mode .
  • Navigate through months
  • Highlight today's date
  • Save events in local storage

Features

  • Dynamic Calendar View – Automatically updates based on current month and year with navigation controls.
  • Festival Highlights – Predefined festivals appear with colored dots and labels when clicked.
  • Event Management – Users can double-click on dates to add/edit/delete events with a title and color dot.
  • Dark Mode Support – Toggle light/dark mode for a better viewing experience.
  • Local Storage Integration – Events persist across sessions using browser localStorage.
  • Responsive Design – Fully mobile-friendly and adapts to different screen sizes.

Tech Stack

  • HTML5: For page structure
  • CSS3: Styling, dark mode, and responsive design
  • JavaScript: Logic, event handling, DOM manipulation, local storage

Screenshots

Calendar in Light Mode

Light Mode View

Calendar in Dark Mode

Dark Mode View

Adding an Event

Adding a Custom Event

How It Works

On page load, the calendar displays the current month. Dates can be clicked or double-clicked. A double-click opens a modal where users can input their event name and color. Events are stored locally and shown as small dots. Clicking any date also displays festival info if available.

Improvements Coming Soon

  • Export/Import feature for events
  • Google Calendar sync
  • Event reminders
  • Monthly/Weekly view toggle

Live Preview

You can try the live version here: Live Calendar Project

Buy Source Code - ₹99

Conclusion

This project helped me explore DOM manipulation, working with modals, using local storage, and creating dynamic interfaces. It’s a perfect practice project for any aspiring front-end developer!