Question

我正在使用离线日历应用，但我在显示日期方面遇到了困难。

最简单的方法是什么？我不允许使用现有的框架。另外哪个元素最好使用form或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>

Answer 1

有很多可用的例子。以下是少数：Cut & paste calendar script，How to build a beautiful calendar widget，FullCalendar。

从第一个链接尝试此代码，在<script>标记内添加此代码并将其放在<body>内：

＆＃13;

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)
}

＆＃13;

table {
  font-family: arial;
}

＆＃13;

Answer 2

此代码将打印您需要为星期日或星期六格式放置的数组。（我已经修改了当月的问题。）

 (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
    }

如何在JavaScript中显示日历的日期？

2 个答案:

示例输出：