JavaScriptのカレンダー - 日の開始点

私は自分のカレンダーをjavascriptとjQueryで作成しています。JavaScriptのカレンダー - 日の開始点

私はすでに作成していますが、カレンダーの最初の日は金曜日（実際に始まる日によって異なります）に開始する必要があります。

私のカレンダーでも何とか実装する必要がありますが、私はループで混乱します。

これまでのところ、カスタム月を作成するために月と年を引数に取るこのようなものを作成しました。

コードはここにある：

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>

あなたはこのような私

出典

2017-04-24 Pravissimo

'getDay（）'であるあなたが必要なもの：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date/getDay –

@RoryMcCrossan はい、実際に挿入する方法はわかりません。私はループで混乱し、それは壊れます。ありがとう、私は私のquesitonをリファクタリングする必要があります。 – Pravissimo

moment.jsのようなライブラリを使用すると、タスクがずっと簡単になります – charlietfl

何かがあなたを助けるかもしれない助けることができると思います。

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

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

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

出典

2017-04-24 16:38:12 charlietfl

は、月の開始日を計算するために、あなたのコードにヘルパーメソッドのカップルを追加し、ループ戦略を少し変更しました。お役に立てれば。

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>

出典

2017-04-24 16:55:42 Ada

JavaScriptのカレンダー - 日の開始点

答えて

関連する問題