How to create a calendar using javascript

As web applications become more and more popular, many developers need to implement a calendar in their website or application to allow users to select dates. It's easy to make a simple yet powerful calendar using JavaScript. In this article, we'll cover the basic steps of implementing a calendar using JavaScript and provide a sample code.

1. HTML Skeleton

First, we need an HTML framework to host our calendar. We need to create a <div> element and assign a unique ID so that we can manipulate it via JavaScript. We need to include two input boxes and a button in this <div> element. One input box is used to display the selected date, and the other is used to receive the input of the new date.

2. Get the current date

In JavaScript, we get the current date by using the Date object. We can get the date of the current month using getDate() method and get the current year using getFullYear() method.

3. Building Calendar

Next, we need to build a calendar. We can create a simple calendar using a table element. We can use a for loop to generate table cells containing dates. One thing we need to note is that the first day of each month is not necessarily Sunday, so we need to use the index value of the first cell to determine which date it should start from.

4. Handling date selection

To allow the user to select a date, we can use JavaScript to listen to the events of the input box to update the calendar when a new date is selected. We can use Date objects to compare two dates and get the number of days between them. If the selected date is greater than the current date then we can scroll the calendar forward else we can scroll the calendar backward.

5. Add button functionality

Finally, we need to add functionality to the dropdown button to show or hide the calendar when the user clicks the button. We can hide or show the calendar by using CSS styles and then adding an event listener on the button to toggle its visibility.

Some additional features include:

• Add classes to highlight the currently selected date as well as the hovered date
• Differentiate between weekends and weekdays
• Solve the problem of crossing years/months

Code sample:

HTML:

<div id="calendar">
  <input type="text" id="selectedDate" placeholder="Select date">
  <input type="text" id="newDate" placeholder="Enter date">
  <button id="calBtn">V</button>
  <table id="calendarTable"></table>
</div>

CSS:

#calendar {
  position: relative;
}
#calendar input[type="text"] {
  padding: 5px;
  border: 1px solid #ccc;
  font-size: 16px;
}
#calendar table {
  display: none;
  position: absolute;
  top: 30px;
  left: 0;
  border-collapse: collapse;
}
#calendar td {
  padding: 5px;
  text-align: center;
  cursor: pointer;
}
#calendar .currentDay {
  background-color: #B6D9FA;
}
#calendar .hoverDay {
  background-color: #EAEAEA;
}
#calendar .weekend {
  color: red;
}

JavaScript:

var currentDate = new Date();
var selectedDate = document.getElementById('selectedDate');
var newDate = document.getElementById('newDate');
var calBtn = document.getElementById('calBtn');
var calendarTable = document.getElementById('calendarTable');

// Update selected date whenever the date input is changed
selectedDate.addEventListener('change', function() {
  currentDate = new Date(selectedDate.value);
  updateCalendar();
});

// Show/hide calendar when button is clicked
calBtn.addEventListener('click', function() {
  if (calendarTable.style.display === 'none') {
    calendarTable.style.display = 'table';
  } else {
    calendarTable.style.display = 'none';
  }
});

// Add event listeners for hovering over calendar dates
calendarTable.addEventListener('mouseover', function(e) {
  if (e.target.nodeName === 'TD' && e.target.innerHTML !== '') {
    e.target.classList.add('hoverDay');
  }
});

calendarTable.addEventListener('mouseout', function(e) {
  if (e.target.nodeName === 'TD' && e.target.innerHTML !== '') {
    e.target.classList.remove('hoverDay');
  }
});

// Generate calendar
function updateCalendar() {
  var currentMonth = currentDate.getMonth();
  var currentYear = currentDate.getFullYear();
  var daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
  var firstDayIndex = new Date(currentYear, currentMonth, 1).getDay();
  var lastDayIndex = new Date(currentYear, currentMonth, daysInMonth).getDay();
  var prevMonthDays = new Date(currentYear, currentMonth, 0).getDate();
  var calendarHtml = '';
  
  // Add table headings
  calendarHtml += '<tr><th colspan="7">' + getMonthName(currentMonth) + ' ' + currentYear + '</th></tr>'
  calendarHtml += '<tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>';
  
  // Add days of previous month before the first day of current month
  var prevMonthDaysToAdd = firstDayIndex === 0 ? 6 : firstDayIndex - 1;
  var prevMonthStartDay = prevMonthDays - prevMonthDaysToAdd + 1;
  for (var i = 0; i < prevMonthDaysToAdd; i++) {
    calendarHtml += &#39;<td class="otherMonth">' + prevMonthStartDay + '</td>';
    prevMonthStartDay++;
  }
  
  // Add days of current month
  for (var i = 1; i <= daysInMonth; i++) {
    if (i === currentDate.getDate() && currentMonth === new Date().getMonth() && currentYear === new Date().getFullYear()) {
      calendarHtml += &#39;<td class="currentDay">' + i + '</td>';
    } else if (isWeekend(new Date(currentYear, currentMonth, i).getDay())) {
      calendarHtml += '<td class="weekend">' + i + '</td>';
    } else {
      calendarHtml += '<td>' + i + '</td>';
    }
    if (new Date(currentYear, currentMonth, i).getDay() === 6) {
      calendarHtml += '</tr><tr>';
    }
  }
  
  // Add days of next month after the last day of current month
  var nextMonthDaysToAdd = lastDayIndex === 0 ? 0 : 7 - lastDayIndex;
  for (var i = 1; i <= nextMonthDaysToAdd; i++) {
    calendarHtml += &#39;<td class="otherMonth">' + i + '</td>';
    if (lastDayIndex === 6 && i === nextMonthDaysToAdd) {
      break;
    }
  }
  
  // Append the calendar to the HTML
  calendarTable.innerHTML = calendarHtml;
}

// Get the name of the month from its numerical value
function getMonthName(month) {
  var monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
    'July', 'August', 'September', 'October', 'November', 'December'
  ];
  return monthNames[month];
}

// Check if a day is a weekend day
function isWeekend(day) {
  return day === 0 || day === 6;
}

updateCalendar();

The above is the detailed content of How to create a calendar using javascript. For more information, please follow other related articles on the PHP Chinese website!