CODEWITHSUNDEEP
javascripthtml
Ash Sanchez
Ash Sanchez

Reputation: 23

How do I display the dates for a calendar in JavaScript?

I am working on an offline calendar app, but I encounter difficulty with displaying the dates.

What's the simplest way of doing it? I'm not allowed to use existing frameworks though. Also what element is best to use form or table?

JS: 

var monthNames = ["January", "February", "March", "April", "May", 
"June", "July", "August", "September", "October", "November", 
"December"];
var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", 
"Thursday", "Friday", "Saturday"];
var dayPerMonth = ["31", "" + FebNumberOfDays + "", "31", "30", 
"31", "30", "31", "31", "30", "31", "30", "31"]
var now = new Date();
var day = now.getDate();
var month = now.getMonth();
var year = now.getFullYear();

function getMonthDays(month, year) {
  var days;
  if (month === 1 || month === 3 || month === 5 || month === 7 
  || month === 8 || month === 10 || month === 12)
  days = 31;
  else if (month === 4 || month === 6 || month === 9 
  || month === 11)
  days = 30;
  else if (month === 2) {
    if (isLeapYear(year)) {
      days = 29;
    }
    else {
      days = 28;
    }
  }
  return (days);
}

function isLeapYear(Year) {
  if (((Year % 4) === 0) && ((Year % 100) !== 0) 
  || ((Year % 400) === 0)) {
    return (true);
  } else {
    return (false);
  }
}

function calendarDisplay(month, year) {
  var i = 0;
  var days = getMonthDays(month + 1, year);
  var firstDay = new Date(year, month, 1);
  var startDay = firstDay.getDay();
  days += startDay;
}

function today() {
  var now = new Date();
  var day = now.getDate();
  var month = now.getMonth();
  var year = now.getFullYear();
  calendarDisplay(month, year);
}

function setPreviousMonth() {
  var now = new Date();
  var year = now.getFullYear();
  var day = 0;
  var month = now.getMonth() - 1;
  if (month === 0) {
    month = 11;
    if (year > 1000) {
      year--;
    }
  } else {
    month--;
  }
  calendarDisplay(month, year);
}

function setNextMonth() {
  var now = new Date();
  var year = now.getFullYear();
  var day = 0;
  var month = now.getMonth() + 1;
  if (month === 11) {
    month = 0;
    year++;
  } else {
    month++;
  }
  calendarDisplay(month, year);
}

HTML: 

<html>
  <head>
  </head>
  <body onload="">
  </body>
</html>

Upvotes: 0

Views: 12142

Answers (2)

Rijul Zalpuri
Rijul Zalpuri

Reputation: 169

This code will print the array you need to put for a Sunday or Saturday format. (I've modified your question for the current month.)

 (function today() {
      var now = new Date();
      var day = now.getDate();
      var month = now.getMonth();
      var year = now.getFullYear();
      calendarDisplay(month, year);
    }())
    function calendarDisplay(month, year) {
      var days = getMonthDays(month + 1, year);
      var firstDay = new Date(year, month, 1);
      console.log(firstDay,days)
      var startDay = firstDay.getDay();
      console.log(startDay,'the starting day')
      setThePrintLoop(startDay,days)
    }
    function setThePrintLoop(s,d){
        $scope.DayArray=[]
        for(i=0;i<35;i++){
            if(i>=(s) && (i-s)<31){
                $scope.DayArray.push((i-s+1))
            }
            else{
                $scope.DayArray.push('')
            }
        }
        console.log($scope.DayArray,'Values to be Painted')
    }
    function getMonthDays(month, year) {
      var days;
      if (month === 1 || month === 3 || month === 5 || month === 7 
      || month === 8 || month === 10 || month === 12)
      days = 31;
      else if (month === 4 || month === 6 || month === 9 
      || month === 11)
      days = 30;
      else if (month === 2) {
        if (isLeapYear(year)) {
          days = 29;
        }
        else {
          days = 28;
        }
      }
      return (days);
    }
    function isLeapYear(year) {
      if (year % 4 == 0) // basic rule
        return true // is leap year
        /* else */ // else not needed when statement is "return"
      return false // is not leap year
    }

Example Output:

enter image description here

Upvotes: 1

cch
cch

Reputation: 3386

There are tons of examples available out there. Here are few: Cut & paste calendar script, How to build a beautiful calendar widget, FullCalendar.

Try this code from the first link, add this inside <script> tags and place it inside <body>: 

setCal()

function getTime() {
  // initialize time-related variables with current time settings
  var now = new Date()
  var hour = now.getHours()
  var minute = now.getMinutes()
  now = null
  var ampm = ""

  // validate hour values and set value of ampm
  if (hour >= 12) {
    hour -= 12
    ampm = "PM"
  } else
    ampm = "AM"
  hour = (hour == 0) ? 12 : hour

  // add zero digit to a one digit minute
  if (minute < 10)
    minute = "0" + minute // do not parse this number!

  // return time string
  return hour + ":" + minute + " " + ampm
}

function leapYear(year) {
  if (year % 4 == 0) // basic rule
    return true // is leap year
    /* else */ // else not needed when statement is "return"
  return false // is not leap year
}

function getDays(month, year) {
  // create array to hold number of days in each month
  var ar = new Array(12)
  ar[0] = 31 // January
  ar[1] = (leapYear(year)) ? 29 : 28 // February
  ar[2] = 31 // March
  ar[3] = 30 // April
  ar[4] = 31 // May
  ar[5] = 30 // June
  ar[6] = 31 // July
  ar[7] = 31 // August
  ar[8] = 30 // September
  ar[9] = 31 // October
  ar[10] = 30 // November
  ar[11] = 31 // December

  // return number of days in the specified month (parameter)
  return ar[month]
}

function getMonthName(month) {
  // create array to hold name of each month
  var ar = new Array(12)
  ar[0] = "January"
  ar[1] = "February"
  ar[2] = "March"
  ar[3] = "April"
  ar[4] = "May"
  ar[5] = "June"
  ar[6] = "July"
  ar[7] = "August"
  ar[8] = "September"
  ar[9] = "October"
  ar[10] = "November"
  ar[11] = "December"

  // return name of specified month (parameter)
  return ar[month]
}

function setCal() {
  // standard time attributes
  var now = new Date()
  var year = now.getYear()
  if (year < 1000)
    year += 1900
  var month = now.getMonth()
  var monthName = getMonthName(month)
  var date = now.getDate()
  now = null

  // create instance of first day of month, and extract the day on which it occurs
  var firstDayInstance = new Date(year, month, 1)
  var firstDay = firstDayInstance.getDay()
  firstDayInstance = null

  // number of days in current month
  var days = getDays(month, year)

  // call function to draw calendar
  drawCal(firstDay + 1, days, date, monthName, year)
}

function drawCal(firstDay, lastDate, date, monthName, year) {
  // constant table settings
  var headerHeight = 50 // height of the table's header cell
  var border = 2 // 3D height of table's border
  var cellspacing = 4 // width of table's border
  var headerColor = "midnightblue" // color of table's header
  var headerSize = "+3" // size of tables header font
  var colWidth = 60 // width of columns in table
  var dayCellHeight = 25 // height of cells containing days of the week
  var dayColor = "darkblue" // color of font representing week days
  var cellHeight = 40 // height of cells representing dates in the calendar
  var todayColor = "red" // color specifying today's date in the calendar
  var timeColor = "purple" // color of font representing current time

  // create basic table structure
  var text = "" // initialize accumulative variable to empty string
  text += '<CENTER>'
  text += '<TABLE BORDER=' + border + ' CELLSPACING=' + cellspacing + '>' // table settings
  text += '<TH COLSPAN=7 HEIGHT=' + headerHeight + '>' // create table header cell
  text += '<FONT COLOR="' + headerColor + '" SIZE=' + headerSize + '>' // set font for table header
  text += monthName + ' ' + year
  text += '</FONT>' // close table header's font settings
  text += '</TH>' // close header cell

  // variables to hold constant settings
  var openCol = '<TD WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '>'
  openCol += '<FONT COLOR="' + dayColor + '">'
  var closeCol = '</FONT></TD>'

  // create array of abbreviated day names
  var weekDay = new Array(7)
  weekDay[0] = "Sun"
  weekDay[1] = "Mon"
  weekDay[2] = "Tues"
  weekDay[3] = "Wed"
  weekDay[4] = "Thu"
  weekDay[5] = "Fri"
  weekDay[6] = "Sat"

  // create first row of table to set column width and specify week day
  text += '<TR ALIGN="center" VALIGN="center">'
  for (var dayNum = 0; dayNum < 7; ++dayNum) {
    text += openCol + weekDay[dayNum] + closeCol
  }
  text += '</TR>'

  // declaration and initialization of two variables to help with tables
  var digit = 1
  var curCell = 1

  for (var row = 1; row <= Math.ceil((lastDate + firstDay - 1) / 7); ++row) {
    text += '<TR ALIGN="right" VALIGN="top">'
    for (var col = 1; col <= 7; ++col) {
      if (digit > lastDate)
        break
      if (curCell < firstDay) {
        text += '<TD></TD>';
        curCell++
      } else {
        if (digit == date) { // current cell represent today's date
          text += '<TD HEIGHT=' + cellHeight + '>'
          text += '<FONT COLOR="' + todayColor + '">'
          text += digit
          text += '</FONT><BR>'
          text += '<FONT COLOR="' + timeColor + '" SIZE=2>'
          text += '<CENTER>' + getTime() + '</CENTER>'
          text += '</FONT>'
          text += '</TD>'
        } else
          text += '<TD HEIGHT=' + cellHeight + '>' + digit + '</TD>'
        digit++
      }
    }
    text += '</TR>'
  }

  // close all basic table tags
  text += '</TABLE>'
  text += '</CENTER>'

  // print accumulative HTML string
  document.write(text)
}
table {
  font-family: arial;
}

Upvotes: 3

Related Questions