The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing
Categories We Write About

Create a desktop calendar widget

Written by

Bernardo Palos

in

To create a simple desktop calendar widget, we can use HTML, CSS, and JavaScript. Here’s a basic example to create an interactive calendar that displays the current month and allows navigation between months.

1. HTML Structure

The HTML will define the layout of the calendar, including the header for the current month, the navigation buttons, and the table structure for the calendar days.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Desktop Calendar Widget</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="calendar-container">
    <header>
      <button id="prev-month">Prev</button>
      <span id="month-name"></span>
      <button id="next-month">Next</button>
    </header>
    <table class="calendar-table">
      <thead>
        <tr>
          <th>Sun</th>
          <th>Mon</th>
          <th>Tue</th>
          <th>Wed</th>
          <th>Thu</th>
          <th>Fri</th>
          <th>Sat</th>
        </tr>
      </thead>
      <tbody id="calendar-body"></tbody>
    </table>
  </div>

  <script src="script.js"></script>
</body>
</html>

2. CSS for Styling

Here’s the CSS to style the calendar and make it look neat.

css
/* style.css */
body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f0f0f0;
}

.calendar-container {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 300px;
  padding: 20px;
  text-align: center;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #45a049;
}

#month-name {
  font-size: 18px;
  font-weight: bold;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 10px;
  text-align: center;
  width: 30px;
}

th {
  background-color: #f2f2f2;
}

td {
  cursor: pointer;
  background-color: #f9f9f9;
}

td:hover {
  background-color: #e0e0e0;
}

3. JavaScript to Handle Functionality

This JavaScript will manage the calendar’s functionality, such as displaying the current month and navigating through the months.

javascript
// script.js

const prevMonthBtn = document.getElementById('prev-month');
const nextMonthBtn = document.getElementById('next-month');
const monthNameDisplay = document.getElementById('month-name');
const calendarBody = document.getElementById('calendar-body');

let currentDate = new Date();

function renderCalendar(date) {
  const month = date.getMonth();
  const year = date.getFullYear();

  // Set the month name
  const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  monthNameDisplay.textContent = `${monthNames[month]} ${year}`;

  // Get the first day of the month
  const firstDay = new Date(year, month, 1).getDay();
  // Get the number of days in the month
  const daysInMonth = new Date(year, month + 1, 0).getDate();

  // Clear the calendar body
  calendarBody.innerHTML = '';

  let row = document.createElement('tr');
  
  // Add empty cells for days before the first day of the month
  for (let i = 0; i < firstDay; i++) {
    row.appendChild(document.createElement('td'));
  }

  // Add the days of the month
  for (let day = 1; day <= daysInMonth; day++) {
    if (row.children.length === 7) {
      calendarBody.appendChild(row);
      row = document.createElement('tr');
    }
    
    const cell = document.createElement('td');
    cell.textContent = day;
    row.appendChild(cell);
  }

  // Append the last row if it has any cells
  if (row.children.length > 0) {
    calendarBody.appendChild(row);
  }
}

// Navigation buttons to change months
prevMonthBtn.addEventListener('click', () => {
  currentDate.setMonth(currentDate.getMonth() - 1);
  renderCalendar(currentDate);
});

nextMonthBtn.addEventListener('click', () => {
  currentDate.setMonth(currentDate.getMonth() + 1);
  renderCalendar(currentDate);
});

// Initial render
renderCalendar(currentDate);

How it Works:

  1. HTML: We structure the calendar with a simple table and navigation buttons.

  2. CSS: The styling ensures that the calendar looks clean and user-friendly with buttons for month navigation.

  3. JavaScript: It handles the calendar logic, including rendering the correct number of days and adjusting for different month lengths and starting days. Navigation between months is handled with buttons.

Running it:

  • Save the HTML, CSS, and JS code into three separate files: index.html, style.css, and script.js.

  • Open the index.html file in your browser to see the working calendar widget.

This is a basic calendar widget that can be enhanced further by adding events, to-do lists, or more advanced features like syncing with Google Calendar.

Share this Page your favorite way: Click any app below to share.
See all the ways to share this page

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Check Out Our Newest Posts we wrote about

Categories We Write About