Xem thêm

Create a Simple Javascript Calendar with Events

Are you looking for a way to create a calendar web app using pure Javascript? Whether it's for a commercial project, school project, or just out of curiosity, you've come to the right place. In...

Are you looking for a way to create a calendar web app using pure Javascript? Whether it's for a commercial project, school project, or just out of curiosity, you've come to the right place. In this tutorial, we will guide you on how to create a simple Javascript calendar using local storage. Plus, we'll provide you with a free code download. Let's get started!

Table of Contents

Part 1) Calendar HTML

  • (A) Period Selector
  • (B) Calendar
  • (C) Event Form

Simple Javascript Calendar With Events

The HTML structure is divided into three main sections:

  1. The period selector, where you can choose the desired month and year.
  2. The calendar section, where we will display the calendar for the selected month and year.
  3. The event form, which allows you to add or edit calendar events.

Part 2) Calendar Initialization

On window load, the cal.init() function will be executed to initialize the calendar. It may seem complicated at first, but let's break it down:

  • Get all the necessary HTML elements.
  • Set up the month/year selector.
  • Attach event handlers for adding/editing events. That's all it takes!

Part 3) Period "Shifter"

Next, we have a simple function called pshift() to shift the current period forward or backward by one month. This allows you to navigate through different months easily.

Part 4) Draw the Calendar

The draw() function is the most complex part of this project. It is responsible for drawing the calendar for the selected month and year. Here's a brief overview of what it does:

  • Perform various calculations to determine the number of days, the start/end days, and the current date.
  • Retrieve events data from local storage for the selected month and year.
  • Generate the HTML structure for the calendar, including day names and individual days with events.
  • Redraw the calendar with the updated data.

Part 5) Show/Edit Calendar Event

When you click on a date cell, a function called show() will be triggered. It fetches the event data from cal.data and displays the add/edit event form.

Part 6) Save/Delete Events Data

To save an event, you can simply fill in the event details and click the "Save" button. The save() function will update the events data in local storage. Alternatively, you can delete an event by clicking the "Delete" button. Both actions will trigger the draw() function to reflect the changes on the calendar.

And there you have it! A simple Javascript calendar with events. Please note the following limitations:

  • Only one event is allowed per day.
  • Events cannot span multiple days.
  • The calendar relies on local storage. If it is disabled or not supported by the browser, event data cannot be saved.

Feel free to customize and improve upon this code. You can download the source code from the link provided and use it in your own projects. Have fun exploring the possibilities of this simple calendar!

1