# vue-calendar2

**Repository Path**: limithacker/vue-calendar2

## Basic Information

- **Project Name**: vue-calendar2
- **Description**: 一个vue日历组件
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-03-28
- **Last Updated**: 2020-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-calendar2

### 安装

```
npm install vue-calendar2 --save-dev
```

### 使用

在vue文件中

```html
<style scoped>
  .calendarbox{
    width:700px;
  }
</style>
<template>
  <div>
    <div class="calendarbox">
      <calendar :year="2018" :month="3" :first-day="0" @dateSelect="dayclick"/>
    </div>
  </div>
</template>
<script>
import calendar from './vue-calendar2'

export default {
  name: 'test',
  components: {
    calendar
  },
  methods: {
    dayclick (date) {
      console.log(date)
    }
  }
}
</script>
```

year 需要显示的年  
month 需要显示的月份  
first-day 显示的第一天是星期几？ 0表示星期天，1-6表示星期一到星期六  

dataSelect 点击日期后执行的函数，传入一个参数，点击的日期的原生data对象  

### 注意事项

可能需要css-loader，或者下载这个包，index.js中注释

```javascript
// import './calendar.css'
```

然后复制css或者自己修改

ul.calendar li.thismonth 这个月  
ul.calendar li.today 今天  
ul.calendar li.select 选定的某一天的样式