[Vue] 캘린더 만들기

[Vue] 캘린더 만들기

Vue를 사용하다보면 캘린더를 만들어야 할 때가 있다.

Vue에서 캘린더를 Datepicker라고 부른다

install 및 사용 방법은 밑에 참고문서 확인하면 된다.

Data  선언

data () {
    return {
      state: {
        highlighted : {
        dates:[
        ],
      },
      disabledDates:{
      }},

특정 요일 higlight하기

methods: {
setScenarioDatesList(){
      var list =[]
      for(var i =0;i<this.scenario_dates.objectList.length;i++){
        var today_year = this.scenario_dates.objectList[i].substring(0,4);
        var today_month = this.scenario_dates.objectList[i].substring(4,6);
        if(today_month.substring(0,1)==="0"){
          today_month=today_month.substring(1,2)
         }
        var today_date = this.scenario_dates.objectList[i].substring(6);
        this.state.highlighted.dates.push(new Date(today_year,today_month-1,today_date))
        list.push(new Date(today_year,today_month-1,today_date))
      }

특정 요일 제외 disabled하기

this.state.disabledDates.customPredictor= function(date){
          var disabled = list;
          if(date){
            var index=0
            for(var i = 0 ; i<disabled.length;i++){
              if(
                ((disabled[i].getFullYear() != date.getFullYear() ||
              disabled[i].getMonth() != date.getMonth()) ||
              disabled[i].getDate() != date.getDate()) 
              ){ index++}
            }
            if(date && index==disabled.length){
              return true
            }
          }
        }

출처

• https://github.com/charliekassel/vuejs-datepicker