Question

我在javascript和jQuery中创建自己的日历。

我已经创建了它，但是我已经停留在日历第一天应该开始的地方 - 周五（取决于它实际开始的那一天）。

我还需要在我的日历中以某种方式实现它，但我在循环中感到困惑。

到目前为止，我已经创建了类似的东西，需要args月和年创建自定义月份。

代码在这里：

var Calendar = {
  customDate: function(date) {
    return new Date(date)
  },
  currentDay: function() {
    return new Date().getDay();
  },
  currentMonth: function() {
    return new Date().getMonth() + 1;
  },
  currentYear: function() {
    return new Date().getFullYear();
  },
  getMonthDays: function(year, month) {
    return new Date(year, month, 0).getDate();
  },
  currentMonthDays: function() {
    return this.getMonthDays(this.currentYear(), this.currentMonth());
  }
};

Calendar.createCustomCalendar = function(month, year) {
  var currentDays = Calendar.getMonthDays(year, month),
    day = 1,
    monthDay = Calendar.currentDay(month, year),
    calendar = jQuery('.calendar'),
    table = calendar.find('table');

  calendar.prepend('<h2>' + month + ' ' + year + '</h2>');

  for (var row = 1; row <= Math.ceil(currentDays / 7); row++) {
    var tableRow = jQuery('<tr class="calendarRow"></tr>');

    for (col = 1; col <= 7 && day <= currentDays; col++, day++) {
      jQuery(tableRow).append('<td>' + day + '</td>');
    }

    table.append(tableRow);
  }
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="calendar">
  <table>
    <tr>
      <th>
        <h4>PON</h4>
      </th>
      <th>
        <h4>WTO</h4>
      </th>
      <th>
        <h4>SRO</h4>
      </th>
      <th>
        <h4>CZW</h4>
      </th>
      <th>
        <h4>PIĄ</h4>
      </th>
      <th>
        <h4>SOB</h4>
      </th>
      <th>
        <h4>NIE</h4>
      </th>
    </tr>
  </table>
</div>

希望你能帮助我

Answer 1

这样的事可能会对你有所帮助。

＆＃13;

var mo = 3,
  year = 2017,
  // first day of month date object
  monthStart = new Date(year, mo),
  // day index for first day of month
  monthStartDayIdx = monthStart.getDay(),
  // will fill with sub arrays for each week
  weeksArr = [],
  week = 1;

var calStartDay = new Date(monthStart);
// subtract day index of first of month from it's date to get Sunday of first week
calStartDay.setDate(monthStart.getDate() - monthStartDayIdx)

// create 6 weeks of dates for demo simplicity
var dayCount = 0
while (week < 7) {
  if(dayCount==0){
    weeksArr.push([])
  }
  weeksArr[week-1].push(calStartDay.getDate());
  dayCount++;
  calStartDay.setDate(calStartDay.getDate() + 1);
  if (dayCount == 7) {
    week++;
    dayCount = 0
  }
}
// data complete, add rows to table
weeksArr.forEach(function(arr){
  var row ='<tr>';
  row += '<td>' + arr.join('</td><td>') + '</td>';
  row += '</td>';
  $('table').append(row);
});


logArr(weeksArr);

// helper to display demo data
function logArr(arr){
  var res = arr.reduce(function(a,c){
     a.push(JSON.stringify(c)); return a;
  },[]);
  $('pre').text('[\n   '+res.join(',\n   ')+'\n]')
 
}

＆＃13;

table{border-collapse:collapse}
tr,td{text-align:center; border:1px solid #ccc; padding:4px 0}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>
April 2017
</h3>

<table style="float:left;width:50%">
<thead>
  <tr><th>Sun</th>
  <th>Mon</th>
  <th>Tues</th>
  <th>Wed</th>
  <th>Thu</th>
  <th>Fri</th>
  <th>Sat</th>
 </tr>
</thead>
</table>
<div style="float:right;width:40%; margin-left:9%">
<h4>weeksArr data</h4>
<pre></pre>
</div>

＆＃13;

Answer 2

为您的代码添加了几个辅助方法来计算月份的开始日期，并稍微更改了循环策略。希望这会有所帮助。

Calendar.createCustomCalendar(2017, 02);

<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    var Calendar = {
      customDate: function (date) {
        return new Date(date)
      },
      currentDay: function () {
        return new Date().getDay();
      },
      currentMonth: function () {
        return new Date().getMonth() + 1;
      },
      currentYear: function () {
        return new Date().getFullYear();
      },
      getMonthDays: function (year, month) {
        return new Date(year, month, 0).getDate();
      },
      currentMonthDays: function () {
        return this.getMonthDays(this.currentYear(), this.currentMonth());
      }
    };

    Calendar.createCustomCalendar = function (year, month) {
      var currentDays = Calendar.getMonthDays(year, month),
          day = 1,
          monthDay = Calendar.currentDay(year, month),
          calendar = jQuery('.calendar'),
          table = calendar.find('table');

      var firstDayOfWeek = Calendar.weekdays.PON;
      var startDate = new Date(year, month, day).gotoWeekday(firstDayOfWeek);
      var lastDate = new Date(year, month, currentDays);
      var dayStr = "";

      calendar.prepend('<h2>' + month + ' ' + year + '</h2>');

      while(startDate <= lastDate) {
        var tableRow = jQuery('<tr class="calendarRow"></tr>');

        for (col = 1; col <= 7; col++) {
          dayStr = startDate.getMonth() == month ? startDate.getDate() : " ";

          jQuery(tableRow).append('<td>' + dayStr + '</td>');
          startDate = startDate.addDays(1);
        }

        table.append(tableRow);
      }
    };

    // helper methods

    Calendar.weekdays = {
      "NIE": 0, //SUN
      "PON": 1, //MON
      "WTO": 2, //TUE
      "SRO": 3, //WED
      "CZW": 4, //THU
      "PIA": 5, //FRI
      "SOB": 6  //SAT
    };

    Date.prototype.addDays = function (days) {
      var dat = new Date(this.valueOf());
      dat.setDate(dat.getDate() + days);
      return dat;
    }

    Date.prototype.gotoWeekday = function (dayOfWeek) {
      var dat = new Date(this.valueOf());
      while (dat.getDay() != dayOfWeek)
        dat = dat.addDays(-1);
      return dat;
    }

  </script>
  <div class="calendar">
    <table>
      <tr>
        <th>
          <h4>PON</h4>
        </th>
        <th>
          <h4>WTO</h4>
        </th>
        <th>
          <h4>SRO</h4>
        </th>
        <th>
          <h4>CZW</h4>
        </th>
        <th>
          <h4>PIĄ</h4>
        </th>
        <th>
          <h4>SOB</h4>
        </th>
        <th>
          <h4>NIE</h4>
        </th>
      </tr>
    </table>
  </div>
</body>

Javascript日历 - 日起点

2 个答案: