2017-02-15 3 views
2

ジャバスクリプト/ HTMLのカレンダーを作成し、私のカレンダーは、まだ私は、カレンダー全体のカレンダーを印刷しようとすると、と、私は現在</p> <p>しかし、今日の日付を印刷したカレンダーを作成しようとしている

空白であります

私はHTMLで表を印刷しないので、代わりにJavaScriptを使用して表を印刷しようとしていました。

var $ = function (id) { return document.getElementById(id); }; 
 

 

 
var getMonthText = function(currentMonth) { 
 
    if (currentMonth === 0) { return "January"; } 
 
    else if (currentMonth === 1) { return "February"; } 
 
    else if (currentMonth === 2) { return "March"; } 
 
    else if (currentMonth === 3) { return "April"; } 
 
    else if (currentMonth === 4) { return "May"; } 
 
    else if (currentMonth === 5) { return "June"; } 
 
    else if (currentMonth === 6) { return "July"; } 
 
    else if (currentMonth === 7) { return "August"; } 
 
    else if (currentMonth === 8) { return "September"; } 
 
    else if (currentMonth === 9) { return "October"; } 
 
    else if (currentMonth === 10) { return "November"; } 
 
    else if (currentMonth === 11) { return "December"; } 
 
}; 
 

 
var getLastDayofMonth = function(currentMonth) { 
 
    var dt = new Date(); 
 
    dt.setMonth(currentMonth +1); 
 
    dt.setDate(0); 
 
    
 
    return dt.getDate(); 
 
    
 
}; 
 

 
window.onload = function() { 
 
    
 
    //var year = 
 
    
 
};
body { 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    background-color: white; 
 
    margin: 0 auto; 
 
    width: 360px; 
 
    border: 3px solid blue; 
 
    padding: 0 2em 1em; 
 
} 
 
h1 { 
 
    color: blue; 
 
    margin-bottom: .25em; 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
    border: 1px solid black; 
 
} 
 
td { 
 
    width: 3em; 
 
    height: 3em; 
 
    vertical-align: top; 
 
    padding: 0.5 0 0 0.5; 
 
    border: 1px solid black; 
 
}
<title>Calendar</title> 
 
    <link rel="stylesheet" href="calendar.css"> 
 
    <script src="calendar.js"></script> 
 

 
<body> 
 
    <main> 
 
     <h1><span id="month_year">&nbsp;</span></h1> 
 

 
     <table id="calendar"> 
 
      <tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr> 
 
      
 
      
 
     </table> 
 
    </main> 
 
</body>

+0

投稿のある投稿 –

+0

https://jsfiddle.net/wtb1s7bf/ – steven

+0

フィドルを気にしないでください。コードはここで実行されます。 – RobG

答えて

1

あなたは、カレンダー部分にスタートの多くを作成する必要があるが、ここであなたが持っているものといくつかの助けです。

getMonthText機能が良く getMonthNameを命名されるだろうとのような単純なことができ

/* Return month name 
 
** @param {number|string} index - integer month number, zero indexed 
 
** @returns {string} Full month name or undefined if index < 0 or > 11. 
 
*/ 
 
function getMonthName(index) { 
 
    return ['January','February','March','April','May','June','July', 
 
      'August','September','October','November','December'][index]; 
 
} 
 

 
var index = new Date().getMonth(); 
 

 
console.log(getMonthName(index));

getLastDayofMonth関数は最初の日付を設定する必要があります1月31日に1ヶ月追加すると3月2〜3月が返ってくるので、月を追加する前の月(または29日前の任意の日付)そうebruary(と同様に少数の日の別の月に続いて任意の月のため)、:

/* Return a date for the last day of the month of the provided date 
 
** @param {Date} date - date to get last day of month for 
 
** @returns {Date} date for last day of month 
 
*/ 
 
function getLastDayOfMonth(date) { 
 
    // Copy date so don't modify original, default to today 
 
    var d = date? new Date(date) : new Date(); 
 
    // Set to start of month 
 
    d.setDate(1); 
 
    // Add a month and set to last day of previous 
 
    // i.e. set to last day of current month 
 
    d.setMonth(d.getMonth() + 1, 0); 
 
    return d; 
 
} 
 

 
console.log(getLastDayOfMonth().toString()); 
 
console.log(getLastDayOfMonth(new Date(2016,1)).toString());

あなたの不足している関数本体の残りの部分は日ごとに細胞を作成する必要があり、その後でそれらを埋めます適切な値。ハッピーコーディング。 ;-)

関連する問題