create clendar component with constructor in javascript

You can create a calendar component in JavaScript using constructor function as follows:


index.tsx
function Calendar(date = new Date()) {
  // Calendar properties
  this.today = date;
  this.year = this.today.getFullYear();
  this.month = this.today.getMonth();
  this.daysInMonth = new Date(this.year, this.month + 1, 0).getDate();
  
  // Calendar methods
  this.prevMonth = function() {
    if (this.month === 0) {
      this.year--;
      this.month = 11;
    } else {
      this.month--;
    }
    this.daysInMonth = new Date(this.year, this.month + 1, 0).getDate();
  };
  
  this.nextMonth = function() {
    if (this.month === 11) {
      this.year++;
      this.month = 0;
    } else {
      this.month++;
    }
    this.daysInMonth = new Date(this.year, this.month + 1, 0).getDate();
  };
  
  this.render = function() {
    let calendarTable = document.createElement('table');
    let calendarCaption = calendarTable.createCaption();
    calendarCaption.textContent = `${this.getMonthName()} ${this.year}`;
    let calendarHeader = calendarTable.createTHead();
    let dayNamesRow = calendarHeader.insertRow();
    let dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    dayNames.forEach(function(dayName) {
      let dayNameCell = dayNamesRow.insertCell();
      dayNameCell.textContent = dayName;
    });
    let calendarBody = calendarTable.createTBody();
    for (let day = 1; day <= this.daysInMonth; day++) {
      let date = new Date(this.year, this.month, day);
      let dayOfWeek = date.getDay();
      if (day === 1) {
        // Add blank cells for previous month's days
        let prevMonthDays = dayOfWeek === 0 ? 7 : dayOfWeek;
        let prevMonthLastDay = new Date(this.year, this.month, 0).getDate();
        for (let i = 1; i < prevMonthDays; i++) {
          let blankCell = calendarBody.insertRow().insertCell();
          blankCell.classList.add('prev-month-day');
          blankCell.textContent = prevMonthLastDay - prevMonthDays + i + 1;
        }
      }
      let dayCell = calendarBody.insertRow().insertCell();
      dayCell.classList.add('current-month-day');
      dayCell.textContent = day;
      if (date.toDateString() === this.today.toDateString()) {
        dayCell.classList.add('today');
      }
      if (dayOfWeek === 0) {
        dayCell.classList.add('sunday');
      }
    }
    return calendarTable;
  };
  
  this.getMonthName = function() {
    let monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
                      'July', 'August', 'September', 'October', 'November', 'December'];
    return monthNames[this.month];
  };
}
2524 chars
73 lines

Then, you can create a new instance of the Calendar object passing in a Date object as the date parameter of the constructor. For example:


index.tsx
let today = new Date();
let calendar = new Calendar(today);
document.body.appendChild(calendar.render());
106 chars
4 lines

This will create a new calendar object with the current date as the initial date and render it to the HTML body element. You can use the prevMonth and nextMonth methods to move between months of the calendar.

similar javascript code snippets

how to use useeffect in javascript

create a react functional pure component in javascript

cache react component in javascript

how to create a react component that uses a linked list in javascript

how to use usestate in javascript

how to create a functional component that does not re render on state updates in javascript

react in javascript

how to use usestate in vue in javascript

a basic react component rendering a list items from an array in javascript

create a react context in javascript

related categories