[vuecalendarproject]JavaScriptを使用してカレンダー-3を作成

カレンダーライブラリがない場合、JavaScriptを使用してカレンダーを作成します.

1.今月のカレンダーをプリントアウトします。

今月のカレンダーには、対応する月の日付だけでなく、先月の最後の週と来月の最初の週も含まれています.そのため、先月の最終日、今月の最終日、来月の初日のデータが必要です.

カレンダーのベースラインの日付(初日と最終日)を求めます

インスタンスを作成した後、Create()にカレンダーを作成してロードできます.

created() {
     this.year = this.today.getFullYear();
     this.month = this.today.getMonth();
     this.date = this.today.getDate();
     this.getDates(); // 달력의 전체 날짜를 출력하는 함수
}

まず、今年の今月を基準に、データを返す関数を作成します.
関数の定義

methods: {
  getFirstAndLastDate(month, year){
            const lastMonthLastDate = new Date(year, month, 0).getDate();
            const lastMonthLastDay = new Date(year, month, 0).getDay();
            const thisMonthLastDate = new Date(year, month+1, 0).getDate();
            const nextMonthFirstDay = new Date(year,month+1).getDay();
            return [this.lastMonthLastDate=lastMonthLastDate, this.lastMonthLastDay=lastMonthLastDay, 
            this.thisMonthLastDate=thisMonthLastDate, this.nextMonthFirstDay=nextMonthFirstDay];
     },
}

関数呼び出し

methods: {
   getDates(){
    	const [lastMonthLastDate, lastMonthLastDay, thisMonthLastDate, nextMonthFirstDay] = 
            this.getFirstAndLastDate(this.currentMonth, this.currentYear);
   }
}

この日付に準じて、先月の最終日、先月の最終日、今月の最終日、来月の初日の曜日を順に求める.
まず、カレンダーの1週間に対応する日付をweek配列にプッシュし、その週の長さが7の場合、カレンダーの日付全体を表すdate配列に割り当て、week配列を空の配列に戻します.これで1週間に1回データをプッシュできます.
先月の最後の週、今月、来月の最初の週の順に印刷されます.

先月の最後の週を印刷

関数の定義

methods: {
	getPrevMonth(prevLastDate, prevLastDay){
            if(prevLastDay!==6){
                for(let date = prevLastDate-prevLastDay; date <= prevLastDate; date++){
                    this.week.push(date);
                    this.checkLength();
                }
            }
        }
}

関数呼び出し

this.getPrevMonth(lastMonthLastDate,lastMonthLastDay);

今月の出力

関数の定義

methods: {
	getThisMonth(thisMonthLastDate){
                for(let date = 1; date<=thisMonthLastDate; date++){
                    this.week.push(date);
                    this.checkLength();
                }
        }
}

関数呼び出し

this.getThisMonth(thisMonthLastDate);

来月の第1週目の出力

関数の定義

methods: {
	getNextMonth(nextMonthFirstDay){
            if(nextMonthFirstDay!==0){
                for(let date = 1 ; date <= 7-nextMonthFirstDay; date++){
                    this.week.push(date);
                    this.checkLength();
                }
           }
        }
}

関数呼び出し

this.getNextMonth(nextMonthFirstDay);

カレンダーに日付を出力

<table class="table table-responsive">
   <thead>
      <tr>
         <th scope="col" v-for="day in days" :key="day">{{ day }}</th> //요일 출력
      </tr>
   </thead>
   <tbody>
      <tr v-for="(weeks, FirstIdx) in dates" :key="FirstIdx">
        <td scope="row" v-for="(date, SecondIdx) in weeks" :key="SecondIdx">
        	<div>{{ date }}</div>
        </td>
      </tr>
   </tbody>
</table>

2.先月、来月

矢印をクリックして、来月と先月に移動します.
まず、別の月に移動する場合は、その月を基準としたカレンダーの日付を再計算して登録する必要があるため、前後のボタン移動の値からmonthを再計算してmonthを更新する必要がある.計算された月をcurrentMonthとして指定し、既存の月データと計算された月を区別します.

前のボタンまたは次のボタンをクリックするたびに、-1または1がmonth値に計算されます。

日付全体を読み込むgetDates()にパラメータを渡し、前のボタンをクリックしてcurrnetMonth-1を計算し、次のボタンをクリックしてcurrentMonth+1を計算します.

getDates(param =0){
  if(param === 1){
                  this.currentMonth++;
                  if(this.currentMonth === 12){
                      this.currentMonth = 0;
                      this.currentYear++;
                  }
              }
              if(param === -1){
                  this.currentMonth--;
                  if(this.currentMonth === -1){
                      this.currentMonth = 11;
                      this.currentYear--;
                  }
              }
  }

カレンダのベースライン日付を取得するにはcurrentMonthを使用します。

getFirstAndLastDate()をupdated currentmonthで呼び出します.次に、更新された基準日に基づいてカレンダーを再ロードします.

3.先月の最後の週と来月の最初の週に、今日の日付が表示されます。

クラスバインドで区別します.

<td scope="row" v-for="(date, SecondIdx) in weeks" :key="SecondIdx"
          :class="{'today': isToday(date, dates, FirstIdx, SecondIdx),
                   'prev-or-next-month': isPrevOrNextMth(dates, FirstIdx, SecondIdx)}"
           class="date">
           <div>{{ date }}</div>
</td>

先月の最後の週と来月の最初の週

isPrevOrNextMth(dates, FirstIdx, SecondIdx){
            if((FirstIdx===0 && SecondIdx <= this.lastMonthLastDay && (this.lastMonthLastDay!==6))
                || ((FirstIdx === dates.length-1 && SecondIdx >= this.nextMonthFirstDay) && (this.nextMonthFirstDay!==0))) 
                {
                    return true;
                }else{
                    return false;
                }
        },

今日の日付

isToday(date, dates, FirstIdx, SecondIdx){
            if(!(this.isPrevOrNextMth(dates, FirstIdx, SecondIdx))
                && date === this.date
                && this.currentMonth === this.month
                && this.currentYear === this.year)
                {
                    return true;
                }else{
                    return false;
            }
        }

結果