├── .browserslistrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── LICENSE
├── README.md
├── babel.config.js
├── doc
    └── tw.md
├── index.js
├── jest.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   ├── RecordIt.svg
    │   ├── baseline-remove_circle-24px.svg
    │   ├── logo.png
    │   └── round-warning-24px.svg
    ├── components
    │   ├── MonthCalendar.vue
    │   └── YearCalendar.vue
    └── main.js
├── tests
    └── unit
    │   ├── .eslintrc.js
    │   ├── __snapshots__
    │       └── month.spec.js.snap
    │   └── month.spec.js
└── vue.config.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not ie <= 8
4 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     '@vue/standard'
 9 |   ],
10 |   rules: {
11 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
13 |   },
14 |   parserOptions: {
15 |     parser: 'babel-eslint'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 
 2 |                     Version 2, December 2004 
 3 | 
 4 |  Copyright (C) 2004 Sam Hocevar <sam@hocevar.net> 
 5 | 
 6 |  Everyone is permitted to copy and distribute verbatim or modified 
 7 |  copies of this license document, and changing it is allowed as long 
 8 |  as the name is changed. 
 9 | 
10 |             DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 
11 |    TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 
12 | 
13 |   0. You just DO WHAT THE FUCK YOU WANT TO.
14 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | English | [繁體中文](./doc/tw.md)
  2 | ![](https://i.imgur.com/7rinsub.png)
  3 | <!-- ![](https://i.imgur.com/0JRDuTV.png) -->
  4 | <p align="center">
  5 | <a href="https://www.npmjs.com/package/vue-material-year-calendar"><img src="https://img.shields.io/npm/v/vue-material-year-calendar.svg"  alt="Versions"></a> <a  href="https://www.npmjs.com/package/vue-material-year-calendar"><img  src="https://img.shields.io/npm/dm/vue-material-year-calendar.svg"  alt="Downloads"></a> <a  href="https://www.npmjs.com/package/vue-material-year-calendar"><img src="https://img.shields.io/npm/l/vue-material-year-calendar.svg"  alt="License"></a>
  6 | </p>  
  7 | 
  8 | > There is no full year (12 months on a page) calendar right now, the Vue-material-year-calendar is designed to solve this problem.  
  9 | 
 10 | * 🔥 12 Months on a page
 11 | * 🌈 Material style
 12 | * 🕒 depend on [dayjs](https://github.com/iamkun/dayjs)
 13 | * 🍀 by Vue.js  
 14 | 
 15 | 
 16 | ### [Simple Live Demo](https://nono1526.github.io/vue-material-year-calendar)
 17 | 
 18 | ## Basic usage  
 19 | 
 20 | ![Basic_demo](https://media.giphy.com/media/LXQxkdBrhmVzOEMbQf/giphy.gif)  
 21 | ## Draggable
 22 | ![demo](https://media.giphy.com/media/BZkjvL89E4dDvUikAl/giphy.gif)  
 23 | ## Classification
 24 | ![Classification](https://i.imgur.com/3KB3RK7.png)---
 25 | ## Getting Started
 26 | 
 27 | ### 📚 Installation
 28 | 
 29 | ```console
 30 | npm install vue-material-year-calendar --save
 31 | ```
 32 | 
 33 | ### 📚 Example
 34 | ```vue
 35 | <template>
 36 |   <YearCalendar
 37 |     v-model="year"
 38 |     :activeDates.sync="activeDates"
 39 |     @toggleDate="toggleDate"
 40 |     prefixClass="your_customized_wrapper_class"
 41 |     :activeClass="activeClass"
 42 |   ></YearCalendar>
 43 | </template>
 44 | 
 45 | <script>
 46 | import YearCalendar from 'vue-material-year-calendar'
 47 | 
 48 | export default {
 49 |   components: { YearCalendar },
 50 |   data () {
 51 |     return {
 52 |       year: 2019,
 53 |       activeDates: [
 54 |         { date: '2019-02-13' },
 55 |         { date: '2019-02-14', className: 'red' },
 56 |         { date: '2019-02-15', className: 'blue' },
 57 |         { date: '2019-02-16', className: 'your_customized_classname' }
 58 |       ],
 59 |       activeClass: '',
 60 |     }
 61 |   },
 62 |   methods: {
 63 |     toggleDate (dateInfo) {
 64 |       console.log(dateInfo)  // { date: '2010-10-23', selected: true }
 65 |     }
 66 |   }
 67 | }
 68 | </script>
 69 | 
 70 | <style lang="stylus">
 71 | .your_customized_wrapper_class
 72 |   background-color: #0aa
 73 |   color: white
 74 |   &.red
 75 |     background-color: red
 76 |     color: white
 77 |     &:after
 78 |       background-image url('./assets/baseline-remove_circle-24px.svg')
 79 |       background-size 100% 100%
 80 |   &.blue
 81 |     background-color: #0000aa
 82 |     color: white
 83 |   &.your_customized_classname
 84 |     background-color: yellow
 85 |     color: black
 86 | 
 87 | </style>
 88 | ```
 89 | 
 90 | 
 91 | ## 📚 props
 92 | ### v-model
 93 |    * Type: `String` | `Number`
 94 |    * Required: `true`
 95 | 
 96 | The year to be display.
 97 | 
 98 | ### activeDates.sync
 99 |    * Type: `Array of objects`  
100 |    * Required: `true`  
101 |    * Default: `[]`
102 | Your selected dates.
103 | 
104 | If you set `className` attributes, you can customize it style in CSS.
105 | 
106 | ex:
107 | ```javascript
108 |   [
109 |     { date: '2019-02-13' },
110 |     { date: '2019-02-14', className: 'red' },
111 |     { date: '2019-02-15', className: 'blue' },
112 |     { date: '2019-02-16', className: 'your_customized_classname' }
113 |   ],
114 | ```
115 | 
116 | ### prefixClass
117 |   * Type: `String`  
118 |   * Default: `calendar--active`  
119 |   * Required: `true`
120 | 
121 | A wrapper classname for customized css. Set `prefixClass`'s value, then use it value as a class wrapper in CSS.
122 | 
123 | ex:  
124 | 
125 | ```vue
126 | <template>
127 | <year-calendar
128 |   ...
129 |   prefixClass="your_customized_wrapper_class"
130 | ></year-calendar>
131 | </template>
132 | 
133 | <style lang="stylus">
134 | 
135 | .your_customized_wrapper_class
136 |   background-color: #0aa
137 |   color: white
138 |   &.red
139 |     background-color: #a00
140 |     color: white
141 |     &:after
142 |       background-image url('./assets/baseline-remove_circle-24px.svg')
143 |       background-size 100% 100%
144 |   &.blue
145 |     background-color: #0000aa
146 |     color: white
147 |   &.your_customized_classname
148 |     background-color: yellow
149 |     color: black
150 | 
151 | </style>
152 | ```
153 | 
154 | ### activeClass
155 | 
156 |   * Type: `String` (default class: info or warning )
157 |   * Default: `''`(empty string)
158 | 
159 | The classname you want to toggle. For example, set `activeClass` to `my_red` first. Then you click a date on calendar, the date will be add/remove with `my_red` class.
160 | ![](https://i.imgur.com/Lmp3RG1.png)
161 | 
162 | 
163 | ### lang
164 |    * Type: `String`
165 |    * Default: `en`
166 | 
167 | Choose language to displayed.
168 | 
169 | `en`: English, `tw`: 繁體中文, `pt`: Português, `de`: Deutsch, `pl`: Polish, `ru`: Русский
170 | 
171 | 
172 | 
173 | ### showYearSelector
174 |    * Type: `Boolean`
175 |    * Default: `true`
176 | 
177 | Show or hide the years selector on top of the calendar.
178 | 
179 | ex:
180 | ```javascript
181 | :showYearSelector="false"
182 | ```
183 | 
184 | 
185 | ### hideSunday
186 |    * Type: `Boolean`
187 |    * Default: `false`
188 | 
189 | Hide or show all sundays in the calendar.
190 | 
191 | ex:
192 | ```javascript
193 | :hideSunday="true"
194 | ```
195 | 
196 | 
197 | 
198 | ### hideWeekend
199 |    * Type: `Boolean`
200 |    * Default: `false`
201 | 
202 | Hide or show all weekends (saturdays and sundays) in the calendar.
203 | 
204 | ex:
205 | ```javascript
206 | :hideWeekend="true"
207 | ```
208 | 
209 | 
210 | 
211 | ## 📚 event
212 | ### @toggleDate
213 |    * Type: `function`
214 | 
215 | Function will be called when you select/unselect a date.  
216 | 
217 | ex:  
218 | 
219 | ```vue
220 | <template>
221 |   <YearCalendar
222 |     @toggleDate="myToggleDate"
223 |   ></YearCalendar>
224 | </template>
225 | 
226 | <script>
227 |   .....
228 |   methods: {
229 |     myToggleDate (dateInfo) {
230 |       console.log(dateInfo) // { date: '2010-10-23', selected: true }
231 |     }
232 |   }
233 | </script>
234 | ```
235 | 
236 | 
237 | ### @monthClick
238 |    * $event: `{ year: 2021, month: 1, monthTitle: 'January' }`
239 | 
240 | 
241 | Trigger when user click month title.
242 | 
243 | 
244 | 
245 | ex: 
246 | 
247 | ```vue
248 | <template>
249 |   <YearCalendar
250 |     @monthClickEvent="monthClick"
251 |   ></YearCalendar>
252 | </template>
253 | 
254 | <script>
255 |   .....
256 |   methods: {
257 |     monthClick (monthYearInfo) {
258 |       console.log(monthYearInfo) // { year: 2021, month: 1, monthTitle: 'January' }
259 |     }
260 |   }
261 | </script>
262 | ```


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/doc/tw.md:
--------------------------------------------------------------------------------
  1 | [English](../README.md) | 繁體中文
  2 | # Vue Material Year Calendar
  3 | <p align="center">
  4 | <a href="https://www.npmjs.com/package/vue-material-year-calendar"><img src="https://img.shields.io/npm/v/vue-material-year-calendar.svg"  alt="Versions"></a> <a  href="https://www.npmjs.com/package/vue-material-year-calendar"><img  src="https://img.shields.io/npm/dm/vue-material-year-calendar.svg"  alt="Downloads"></a> <a  href="https://www.npmjs.com/package/vue-material-year-calendar"><img src="https://img.shields.io/npm/l/vue-material-year-calendar.svg"  alt="License"></a>
  5 | </p>  
  6 | 
  7 | > 目前2019年3月為止，市場上還沒有能一次顯示12個月份的月曆元件。 vue-material-year-calendar 來解決此問題。 
  8 | 
  9 | * 🔥 一次顯示12個月份
 10 | * 🌈 Material 風格
 11 | * 🕒 依賴容量小的 [dayjs](https://github.com/iamkun/dayjs)
 12 | * 🍀 在 Vue.js 2 下使用
 13 | 
 14 | 
 15 | ### [Simple Live Demo](https://nono1526.github.io/vue-material-year-calendar)
 16 | 
 17 | ## 基本用法  
 18 | 
 19 | ![Basic_demo](https://media.giphy.com/media/LXQxkdBrhmVzOEMbQf/giphy.gif) 
 20 | 
 21 | ## 支援滑鼠拖拉
 22 | ![demo](https://media.giphy.com/media/BZkjvL89E4dDvUikAl/giphy.gif)  
 23 | ## 分類
 24 | ![Classification](https://i.imgur.com/3KB3RK7.png)---
 25 | ## Getting Started
 26 | ---
 27 | ## 快速開始
 28 | 
 29 | ### 📚 安裝
 30 | 
 31 | ```console
 32 | npm install vue-material-year-calendar --save
 33 | ```
 34 | 
 35 | ### 📚 範例
 36 | ```vue
 37 | <template>
 38 |   <YearCalendar
 39 |     v-model="year"
 40 |     :activeDates.sync="activeDates"
 41 |     @toggleDate="toggleDate"
 42 |     prefixClass="your_customized_wrapper_class"
 43 |     :activeClass="activeClass"
 44 |   ></YearCalendar>
 45 | </template>
 46 | 
 47 | <script>
 48 | import YearCalendar from 'vue-material-year-calendar'
 49 | 
 50 | export default {
 51 |   components: { YearCalendar },
 52 |   data () {
 53 |     return {
 54 |       year: 2019,
 55 |       activeDates: [
 56 |         { date: '2019-02-13' },
 57 |         { date: '2019-02-14', className: 'red' },
 58 |         { date: '2019-02-15', className: 'blue' },
 59 |         { date: '2019-02-16', className: 'your_customized_classname' }
 60 |       ],
 61 |       activeClass: '',
 62 |     }
 63 |   },
 64 |   methods: {
 65 |     toggleDate (dateInfo) {
 66 |       console.log(dateInfo)  // { date: '2010-10-23', selected: true }
 67 |     }
 68 |   }
 69 | }
 70 | </script>
 71 | 
 72 | <style lang="stylus">
 73 | .your_customized_wrapper_class
 74 |   background-color: #0aa
 75 |   color: white
 76 |   &.red
 77 |     background-color: red
 78 |     color: white
 79 |     &:after
 80 |       background-image url('./assets/baseline-remove_circle-24px.svg')
 81 |       background-size 100% 100%
 82 |   &.blue
 83 |     background-color: #0000aa
 84 |     color: white
 85 |   &.your_customized_classname
 86 |     background-color: yellow
 87 |     color: black
 88 | 
 89 | </style>
 90 | 
 91 | ```
 92 | 
 93 | 
 94 | ## 📚 props
 95 | ### v-model
 96 |    * Type: `String` | `Number`
 97 |    * Required: `true`
 98 | 
 99 | 要顯示的年份。
100 | 
101 | ### activeDates.sync
102 |    * Type: `Array of objects`  
103 |    * Required: `true`
104 |    * Default: `[]`
105 | 
106 | 使用者選擇的日期。
107 | 
108 | 若有設定 `className` 的屬性，則可以在CSS裡控制該日期的樣式。
109 | 
110 | ex:
111 | ```javascript
112 |   [
113 |     { date: '2019-02-13' },
114 |     { date: '2019-02-14', className: 'red' },
115 |     { date: '2019-02-15', className: 'blue' },
116 |     { date: '2019-02-16', className: 'your_customized_classname' }
117 |   ],
118 | ```
119 | 
120 | ### prefixClass
121 |   * Type: `String`  
122 |   * Default: `calendar--active`  
123 |   * Required: `true`
124 | 
125 | 包在外層的CSS calss。 
126 | 
127 | 例如你設定 `prefixClass` 為`your_customized_wrapper_class`，則你可以在CSS裡面，透過`your_customized_wrapper_class`來做外層的CSS包覆。
128 | 
129 | ex:  
130 | 
131 | ```vue
132 | <template>
133 | <year-calendar
134 |   ...
135 |   prefixClass="your_customized_wrapper_class"
136 | ></year-calendar>
137 | </template>
138 | 
139 | <style lang="stylus">
140 | 
141 | .your_customized_wrapper_class
142 |   background-color: #0aa
143 |   color: white
144 |   &.red
145 |     background-color: #a00
146 |     color: white
147 |     &:after
148 |       background-image url('./assets/baseline-remove_circle-24px.svg')
149 |       background-size 100% 100%
150 |   &.blue
151 |     background-color: #0000aa
152 |     color: white
153 |   &.your_customized_classname
154 |     background-color: yellow
155 |     color: black
156 | 
157 | </style>
158 | ```
159 | 
160 | 
161 | ### activeClass
162 | 
163 |   * Type: `String` (default class: info or warning )
164 |   * Default: `''`(empty string)
165 | 
166 | 點擊日期時，會切換的 class name. 例如當你指定 `activeClass` 為 `my_red`後，點擊某個日期，該日期就會新增/移除對應的 class name.
167 | 
168 | ![](https://i.imgur.com/Lmp3RG1.png)
169 | 
170 | 
171 | ### lang
172 |    * Type: `String`
173 |    * Default: `en`
174 | 
175 | 選擇語系。預設為英文。
176 | 
177 | `en`: English, `tw`: 繁體中文, `pt`: Português, `de`: Deutsch, `pl`: Polish, `ru`: Русский
178 | 
179 | ### showYearSelector 
180 |    * Type: `Boolean`
181 |    * Default: true
182 | 
183 | 是否顯示選擇年份的 Bar
184 | 
185 | ex: 
186 | ```javascript
187 | :showYearSelector="false"
188 | ```
189 | 
190 | 
191 | ## 📚 事件
192 | ### @toggleDate
193 |    * Type: `function`
194 | 
195 | 點選/取消日期時，會觸發這個函數。
196 | 
197 | ex: 
198 | 
199 | ```vue
200 | <template>
201 |   <YearCalendar
202 |     @toggleDate="myToggleDate"
203 |   ></YearCalendar>
204 | </template>
205 | 
206 | <script>
207 |   .....
208 |   methods: {
209 |     myToggleDate (dateInfo) {
210 |       console.log(dateInfo) // { date: '2010-10-23', selected: true }
211 |     }
212 |   }
213 | </script>
214 | ```
215 | 
216 | 
217 | ### @monthClickEvent
218 |    * $event: `{ year: 2021, month: 1, monthTitle: 'January' }`
219 | 
220 | 點選月份時，觸發這個函數。
221 | 
222 | ex: 
223 | 
224 | ```vue
225 | <template>
226 |   <YearCalendar
227 |     @monthClickEvent="monthClick"
228 |   ></YearCalendar>
229 | </template>
230 | 
231 | <script>
232 |   .....
233 |   methods: {
234 |     monthClick (monthYearInfo) {
235 |       console.log(monthYearInfo) // { year: 2021, month: 1, monthTitle: 'January' }
236 |     }
237 |   }
238 | </script>
239 | ```


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | import YearCalendar from './src/components/YearCalendar.vue'
2 | export default YearCalendar
3 | if (typeof window !== 'undefined' && window.Vue) {
4 |   window.Vue.component('year-calendar', YearCalendar)
5 | }
6 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   moduleFileExtensions: [
 3 |     'js',
 4 |     'jsx',
 5 |     'json',
 6 |     'vue'
 7 |   ],
 8 |   transform: {
 9 |     '^.+\\.vue$': 'vue-jest',
10 |     '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
11 |     '^.+\\.jsx?$': 'babel-jest'
12 |   },
13 |   moduleNameMapper: {
14 |     '^@/(.*)$': '<rootDir>/src/$1'
15 |   },
16 |   snapshotSerializers: [
17 |     'jest-serializer-vue'
18 |   ],
19 |   testMatch: [
20 |     '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
21 |   ],
22 |   testURL: 'http://localhost/'
23 | }
24 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-material-year-calendar",
 3 |   "main": "index.js",
 4 |   "version": "1.2.6",
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint",
 9 |     "test:unit": "jest --clearCache && vue-cli-service test:unit"
10 |   },
11 |   "dependencies": {
12 |     "dayjs": "^1.8.13",
13 |     "gh-pages": "^2.0.1",
14 |     "stylus": "^0.54.5",
15 |     "stylus-loader": "^3.0.2",
16 |     "vue": "^2.5.17"
17 |   },
18 |   "devDependencies": {
19 |     "@vue/cli-plugin-babel": "^3.0.1",
20 |     "@vue/cli-plugin-eslint": "^3.0.1",
21 |     "@vue/cli-plugin-unit-jest": "^3.0.1",
22 |     "@vue/cli-service": "^3.0.1",
23 |     "@vue/eslint-config-standard": "^4.0.0",
24 |     "@vue/test-utils": "^1.0.0-beta.20",
25 |     "babel-core": "7.0.0-bridge.0",
26 |     "babel-eslint": "^10.0.1",
27 |     "babel-jest": "^23.6.0",
28 |     "eslint": "^5.8.0",
29 |     "eslint-plugin-vue": "^5.0.0-0",
30 |     "vue-template-compiler": "^2.5.17"
31 |   },
32 |   "description": "A full 12-Month view calendar made by vue.js",
33 |   "repositories": [
34 |     {
35 |       "type": "git",
36 |       "url": "https://github.com/nono1526/vue-material-year-calendar"
37 |     }
38 |   ],
39 |   "license": "WTFPL"
40 | }
41 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nono1526/vue-material-year-calendar/988a63020986eaa5dabfa30b301eeeb6af637283/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>vue-material-year-calendar</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-material-year-calendar doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <button @click="addWeekendCurrentYear">Add all weekend of current year</button>
  4 |     <button @click="removeWeekendCurrentYear">Remove all weekend of current year</button>
  5 |     <select v-model="lang">
  6 |       <option value="tw">繁體中文</option>
  7 |       <option value="en">English</option>
  8 |       <option value="pt">Português</option>
  9 |       <option value="de">Deutsch</option>
 10 |       <option value="pl">Polski</option>
 11 |       <option value="ru">Русский</option>
 12 |     </select>
 13 | 
 14 |     <select v-model="activeClass">
 15 |       <option selected value="">(none)</option>
 16 |       <option value="red">red</option>
 17 |       <option value="blue">blue</option>
 18 |       <option value="your_customized_classname">your_customized_classname</option>
 19 |     </select>
 20 |     &emsp;
 21 |     <label for="">
 22 |       Show years selector?
 23 |       <input type="checkbox" v-model="showYearSelector" >
 24 |     </label>
 25 |     &emsp;
 26 |     <label>
 27 |       Hide weekend
 28 |       <input type="checkbox" v-model="hideWeekend" >
 29 |     </label>
 30 |     &emsp;
 31 |     <label>
 32 |       Hide sunday
 33 |       <input type="checkbox" v-model="hideSunday" >
 34 |     </label>
 35 | 
 36 |     <year-calendar
 37 |       v-model="year"
 38 |       :activeDates.sync="activeDates"
 39 |       @toggleDate="toggleDate"
 40 |       :lang="lang"
 41 |       prefixClass="your_customized_wrapper_class"
 42 |       :activeClass="activeClass"
 43 |       :showYearSelector="showYearSelector"
 44 |       :hideWeekend="hideWeekend"
 45 |       :hideSunday="hideSunday"
 46 |       @monthClick="monthClicked"
 47 |     ></year-calendar>
 48 |   </div>
 49 | </template>
 50 | 
 51 | <script>
 52 | import YearCalendar from './components/YearCalendar.vue'
 53 | import dayjs from 'dayjs'
 54 | 
 55 | export default {
 56 |   name: 'app',
 57 |   components: {
 58 |     YearCalendar
 59 |   },
 60 |   data () {
 61 |     return {
 62 |       lang: 'en', // 'en', 'tw', 'pt', 'ru'
 63 |       year: 2019,
 64 |       activeDates: [
 65 |         { date: '2019-02-13' },
 66 |         { date: '2019-02-14', className: 'red' },
 67 |         { date: '2019-02-15', className: 'blue' },
 68 |         { date: '2019-02-16', className: 'your_customized_classname' }
 69 |       ],
 70 |       activeClass: '',
 71 |       showYearSelector: true,
 72 |       hideWeekend: false,
 73 |       hideSunday: false
 74 |     }
 75 |   },
 76 |   methods: {
 77 |     toggleDate (dateInfo) {
 78 |       console.log(dateInfo)
 79 |     },
 80 | 
 81 |     add_sat_and_sun_of_year () {
 82 |       let theDate = dayjs(`${this.year}-01-01`)
 83 | 
 84 |       while (theDate.diff(theDate.endOf('year'), 'day') !== 0) {
 85 |         if (theDate.day() === 6 || theDate.day() === 0) {
 86 |           // 將週六或週日加入 activeDates 中
 87 |           // add weekend to activeDates
 88 |           this.activeDates.push(theDate.format('YYYY-MM-DD'))
 89 |         }
 90 |         theDate = theDate.add(1, 'day')
 91 |       }
 92 |     },
 93 |     addWeekendCurrentYear () {
 94 |       this.removeWeekendCurrentYear()
 95 |       let theDate = dayjs(`${this.year}-01-01`)
 96 |       let isActiveDateUsingString = this.activeDates.length && typeof this.activeDates[0] === 'string'
 97 |       while (theDate.diff(theDate.endOf('year'), 'day') !== 0) {
 98 |         if (theDate.day() === 6 || theDate.day() === 0) {
 99 |           // add weekend to activeDates
100 |           let oDate = isActiveDateUsingString ? theDate.format('YYYY-MM-DD') : { date: theDate.format('YYYY-MM-DD') }
101 |           this.activeDates.push(oDate)
102 |         }
103 |         theDate = theDate.add(1, 'day')
104 |       }
105 |     },
106 |     removeWeekendCurrentYear () {
107 |       this.activeDates = this.activeDates.filter(oDate => {
108 |         let date = typeof oDate === 'string' ? oDate : oDate.date
109 |         let day = dayjs(date).day()
110 |         let isCurrentYear = dayjs(date).year() === this.year
111 |         let isWeekend = [6, 0].includes(day)
112 |         return !(isCurrentYear && isWeekend)
113 |       })
114 |     },
115 |     monthClicked (monthYearInfo) {
116 |       console.log(monthYearInfo)
117 |     }
118 |   }
119 | }
120 | </script>
121 | 
122 | <style lang="stylus">
123 | *
124 |   margin 0
125 |   padding 0
126 |   box-sizing border-box
127 | #app
128 |   padding 60px
129 |   background-color #eaeaea
130 | .your_customized_wrapper_class
131 |   background-color: #0aa
132 |   color: white
133 |   &.red
134 |     background-color: #a00
135 |     color: white
136 |     &:after
137 |       background-image url('./assets/baseline-remove_circle-24px.svg')
138 |       background-size 100% 100%
139 |   &.blue
140 |     background-color: #0000aa
141 |     color: white
142 |   &.your_customized_classname
143 |     background-color: yellow
144 |     color: black
145 | 
146 | </style>
147 | 


--------------------------------------------------------------------------------
/src/assets/RecordIt.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#17a2b8" d="M0 0h24v24H0V0z"/><path fill="white" d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>


--------------------------------------------------------------------------------
/src/assets/baseline-remove_circle-24px.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="#FF6060" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z"/></svg>


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nono1526/vue-material-year-calendar/988a63020986eaa5dabfa30b301eeeb6af637283/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/round-warning-24px.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path  fill="#ffc107" d="M4.47 21h15.06c1.54 0 2.5-1.67 1.73-3L13.73 4.99c-.77-1.33-2.69-1.33-3.46 0L2.74 18c-.77 1.33.19 3 1.73 3zM12 14c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z"/></svg>


--------------------------------------------------------------------------------
/src/components/MonthCalendar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class="c-wrapper">
  3 |   <div class="calendar"
  4 |     @mouseup="mouseUp"
  5 |     @mouseleave.stop="mouseUp"
  6 |   >
  7 |     <div class="calendar__title" @click="monthClickEvent(year)">{{ monthTitle }}</div>
  8 |     <div class="calendar__body">
  9 |       <div v-for="(day, key) in 7" :key="`title${day}`" class="calendar__day day__weektitle" :style="{fontSize: weekTitleFontSizeAdjustLang}">{{ showDayTitle(key) }}</div>
 10 |       <div v-for="(dayObj, key) in showDays" class="calendar__day" :key="`day${key}`">
 11 |         <div
 12 |           @mouseover="dragDay(dayObj)"
 13 |           @mousedown="mouseDown(dayObj)"
 14 |           class="day"
 15 |           :class="classList(dayObj)">{{ dayObj.value }}</div>
 16 |       </div>
 17 |     </div>
 18 |   </div>
 19 | </div>
 20 | </template>
 21 | 
 22 | <script>
 23 | import dayjs from 'dayjs'
 24 | export default {
 25 |   name: 'month-calendar',
 26 |   props: {
 27 |     activeDates: {
 28 |       type: Array,
 29 |       default: () => []
 30 |     },
 31 |     month: {
 32 |       type: [String, Number],
 33 |       default: () => dayjs().month() + 1
 34 |     },
 35 |     year: {
 36 |       type: [String, Number],
 37 |       default: () => dayjs().year()
 38 |     },
 39 |     lang: {
 40 |       type: String,
 41 |       default: 'en'
 42 |     },
 43 |     activeClass: {
 44 |       type: String,
 45 |       default: () => ''
 46 |     },
 47 |     prefixClass: {
 48 |       type: String,
 49 |       default: () => 'calendar--active'
 50 |     }
 51 |   },
 52 |   data () {
 53 |     return {
 54 |       showDays: [],
 55 |       isMouseDown: false
 56 |     }
 57 |   },
 58 |   computed: {
 59 |     weekTitleFontSizeAdjustLang () {
 60 |       const fontSizeMapping = {
 61 |         tw: '16px',
 62 |         en: '14px',
 63 |         pt: '14px',
 64 |         de: '14px',
 65 |         es: '14px',
 66 |         pl: '12px',
 67 |         ru: '14px'
 68 |       }
 69 |       return fontSizeMapping[this.lang]
 70 |     },
 71 |     monthTitle () {
 72 |       const monthMapping = {
 73 |         tw: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
 74 |         en: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
 75 |         pt: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
 76 |         de: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
 77 |         es: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
 78 |         pl: ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'],
 79 |         ru: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь']
 80 |       }
 81 |       return monthMapping[this.lang][this.month - 1]
 82 |     }
 83 |   },
 84 |   methods: {
 85 |     initCalendar () {
 86 |       if (!this.year || !this.month) return []
 87 |       const activeMonth = dayjs()
 88 |         .set('date', 1)
 89 |         .set('year', this.year)
 90 |         .set('month', this.month - 1)
 91 |       let firstDay = activeMonth.startOf('month').day() - 1
 92 |       if (firstDay < 0) firstDay += 7
 93 |       const lastDate = activeMonth.endOf('month').date()
 94 |       const weekRow = firstDay >= 5 ? 6 : 5
 95 |       const WEEK = 7
 96 |       let day = 0
 97 |       const fullCol = Array.from(Array(weekRow * WEEK).keys())
 98 |         .map(i => {
 99 |           let value = firstDay <= i
100 |             ? day++ % lastDate + 1
101 |             : ''
102 |           return {
103 |             value,
104 |             active: false,
105 |             isOtherMonth: firstDay > i || day > lastDate
106 |           }
107 |         })
108 |       this.showDays = fullCol
109 | 
110 |       // 把 toggleDate 的內容合併在 initCalendar 裡。
111 |       this.activeDates.forEach(date => {
112 |         let oDate
113 | 
114 |         if (typeof date === 'string') {
115 |           oDate = {
116 |             date: date,
117 |             className: this.activeClass
118 |           }
119 |         } else if (typeof date === 'object') {
120 |           oDate = date
121 |         }
122 | 
123 |         let dayjsObj = dayjs(oDate.date)
124 |         if (dayjsObj.year() !== this.year) return
125 |         let activeDate = dayjsObj.date()
126 |         let row = Math.floor(activeDate / 7)
127 |         let activeArrayKey = (activeDate % 7) - 1 + firstDay + 7 * row
128 |         this.showDays[activeArrayKey].active = true // to array index
129 |         this.showDays[activeArrayKey].className = oDate.className
130 |       })
131 |     },
132 |     showDayTitle (day) {
133 |       const dayMapping = {
134 |         tw: ['一', '二', '三', '四', '五', '六', '日'],
135 |         en: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
136 |         pt: ['2ª', '3ª', '4ª', '5ª', '6ª', 'Sa', 'Do'],
137 |         de: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'],
138 |         es: ['Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sá', 'Do'],
139 |         pl: ['Pon', 'Wt', 'Śr', 'Czw', 'Pt', 'Sob', 'Nie'],
140 |         ru: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс']
141 |       }
142 |       return dayMapping[this.lang][day]
143 |     },
144 |     toggleDay (dayObj) {
145 |       if (dayObj.isOtherMonth) return
146 |       this.$emit('toggleDate', {
147 |         month: this.month,
148 |         date: dayObj.value,
149 |         selected: !dayObj.active,
150 |         className: this.activeClass
151 |       })
152 |     },
153 |     dragDay (dayObj) {
154 |       if (this.isMouseDown) this.toggleDay(dayObj)
155 |     },
156 |     mouseDown (dayObj) {
157 |       this.toggleDay(dayObj)
158 |       this.isMouseDown = true
159 |     },
160 |     mouseUp () {
161 |       this.isMouseDown = false
162 |     },
163 |     classList (dayObj) {
164 |       let oClassList = {
165 |         'calendar__day--otherMonth': dayObj.isOtherMonth,
166 |         [this.prefixClass]: dayObj.active
167 |       }
168 | 
169 |       if (dayObj.active) oClassList[dayObj.className] = true
170 | 
171 |       return oClassList
172 |     },
173 |     monthClickEvent (year) {
174 |       let monthYearInfo = {
175 |         monthTitle: this.monthTitle,
176 |         month: this.month,
177 |         year: year
178 |       }
179 |       this.$emit('monthClickEvent', monthYearInfo)
180 |     }
181 |   },
182 |   watch: {
183 |     year (val) {
184 |       this.initCalendar()
185 |     },
186 |     // 外層來的資料有變化時
187 |     activeDates (after, before) {
188 |       this.initCalendar()
189 |     }
190 |   },
191 |   created () {
192 |     this.initCalendar()
193 |   }
194 | 
195 | }
196 | </script>
197 | 
198 | <style lang="stylus" scoped>
199 | 
200 | .c-wrapper
201 |   padding: 10px
202 | .calendar
203 |   background-color #fff
204 |   min-height 295px
205 |   text-align center
206 |   color rgba(#353C46, .8)
207 |   border-radius 2px
208 |   min-width 0
209 |   position relative
210 |   text-decoration none
211 |   box-shadow 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12)
212 |   transition transform .3s ease
213 |   &:hover
214 |     z-index: 2
215 |     @media (min-width: 1024px)
216 |       transform: scale(1.15)
217 |       box-shadow 0 7px 21px 0 rgba(0,0,0,.1)
218 |   .calendar__title
219 |     font-weight bold
220 |     flex 100%
221 |     display flex
222 |     align-items center
223 |     justify-content center
224 |     border-bottom 1px solid rgba(#C4C4C4, 0.3)
225 |     font-size 18px
226 |     height: 50px
227 |     margin-bottom 12px
228 |     cursor pointer
229 |   .calendar__body
230 |     display flex
231 |     flex-wrap: wrap
232 |     justify-content flex-start
233 |     align-content flex-start
234 |     padding: 0px 20px
235 |     min-width: 194px
236 |   .calendar__day
237 |     flex 14.28%
238 |     display flex
239 |     justify-content center
240 |     align-items center
241 |     font-size 16px
242 |     height 31px
243 |     color #5DB3D4
244 |   .day__weektitle
245 |     color rgba(#353C46, .8)
246 |   .day
247 |     font-size 14px
248 |     cursor pointer
249 |     user-select none
250 |     width: 22px
251 |     height 22px
252 |     display flex
253 |     justify-content center
254 |     align-items center
255 |     position relative
256 |     border-radius 5px
257 |     &:after
258 |       content ''
259 |       display block
260 |       height: 10px
261 |       width 10px
262 |       position absolute
263 |       top -5px
264 |       right -5px
265 |       border-radius 50%
266 |       z-index: 1
267 |       background-color transparent
268 |     &.calendar--active:after
269 |       background-image url('../assets/baseline-remove_circle-24px.svg')
270 |       background-size 100% 100%
271 |     &:not(.calendar__day--otherMonth):hover
272 |       background-color rgba(#666, 0.1)
273 |       border-radius 5px
274 |     &.calendar--active
275 |       background-color rgba(#FFBABA, .5)
276 |       color #BCBCBC
277 |       &.info
278 |         background-color rgba(#17a2b8, .8)
279 |         color #fff
280 |         &:after
281 |           background-image url('../assets/RecordIt.svg')
282 |           background-size 100% 100%
283 |       &.warning
284 |         background-color rgba(#ffc107, .7)
285 |         color #fff
286 |         &:after
287 |           background-image url('../assets/round-warning-24px.svg')
288 |           background-color rgba(#eaeaea, .3)
289 |           background-size 100% 100%
290 |   & .calendar__day--otherMonth
291 |     color: #eaeaea
292 |     cursor: auto
293 | </style>
294 | 


--------------------------------------------------------------------------------
/src/components/YearCalendar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="vue-calendar__container">
  3 |     <div v-if="showYearSelector" class="container__year">
  4 |       <!-- <span><button @click="addYear(-1)">back</button></span> -->
  5 |       <span
  6 |         v-for="i in 5"
  7 |         :key="i"
  8 |         class="year__chooser"
  9 |         @click="changeYear(i)"
 10 |       >
 11 |         {{ i + activeYear - 3 }}
 12 |       </span>
 13 |       <!-- <span><button @click="addYear(1)">next</button></span> -->
 14 |     </div>
 15 |     <div class="container__months" :class="{'hide-weekend': hideWeekend, 'hide-sunday': hideSunday}">
 16 |       <month-calendar
 17 |         class="container__month"
 18 |         v-for="n in 12"
 19 |         :key="`month-${n}`"
 20 |         :year="activeYear"
 21 |         :month="n"
 22 |         :activeDates="month[n]"
 23 |         :activeClass="activeClass"
 24 |         @toggleDate="toggleDate"
 25 |         :lang="lang"
 26 |         :prefixClass="prefixClass"
 27 |         @monthClickEvent="monthClick"
 28 |       >
 29 |       </month-calendar>
 30 |       <div class="container__month p-0"></div>
 31 |       <div class="container__month p-0"></div>
 32 |       <div class="container__month p-0"></div>
 33 |       <div class="container__month p-0"></div>
 34 |       <div class="container__month p-0"></div>
 35 |     </div>
 36 |   </div>
 37 | </template>
 38 | 
 39 | <script>
 40 | import dayjs from 'dayjs'
 41 | import MonthCalendar from './MonthCalendar'
 42 | export default {
 43 |   name: 'year-calendar',
 44 |   props: {
 45 |     showYearSelector: {
 46 |       type: Boolean,
 47 |       default: () => true
 48 |     },
 49 |     activeDates: {
 50 |       type: Array,
 51 |       default: () => [],
 52 |       validator: (dateArray) => {
 53 |         let isGood = true
 54 |         let curDate = null
 55 | 
 56 |         dateArray.forEach(date => {
 57 |           if (typeof date === 'string') {
 58 |             curDate = date
 59 |           } else if (typeof date === 'object' && date.hasOwnProperty('date')) {
 60 |             curDate = date.date
 61 |           }
 62 | 
 63 |           // 以下程式碼參考「How to validate date with format mm/dd/yyyy in JavaScript?」in Stackoverflow
 64 |           // 由於 「^\d{4}\-\d{1,2}\-\d{1,2}$」會被ESLint 判為錯誤，所以暫時關閉 EsLint 對下一行的驗證 by丁丁
 65 |           // eslint-disable-next-line no-useless-escape
 66 |           if (!/^\d{4}\-\d{1,2}\-\d{1,2}$/.test(curDate)) {
 67 |             isGood = false
 68 |           }
 69 |           // Parse the date parts to integers
 70 |           var parts = curDate.split('-')
 71 |           var day = parseInt(parts[2], 10)
 72 |           var month = parseInt(parts[1], 10)
 73 |           var year = parseInt(parts[0], 10)
 74 | 
 75 |           if (year < 1000 || year > 3000 || month === 0 || month > 12) isGood = false
 76 |           let monthLength = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ]
 77 |           if (year % 400 === 0 || (year % 100 !== 0 && year % 4 === 0)) monthLength[1] = 29
 78 |           if (!(day > 0 && day <= monthLength[month - 1])) isGood = false
 79 |         })
 80 |         return isGood
 81 |       }
 82 |     },
 83 |     value: {
 84 |       type: [String, Number],
 85 |       default: dayjs().year()
 86 |     },
 87 |     lang: {
 88 |       type: String,
 89 |       default: 'en'
 90 |     },
 91 |     activeClass: {
 92 |       type: String,
 93 |       default: () => ''
 94 |     },
 95 |     prefixClass: {
 96 |       type: String,
 97 |       default: () => 'calendar--active'
 98 |     },
 99 |     hideWeekend: {
100 |       type: Boolean,
101 |       default: false
102 |     },
103 |     hideSunday: {
104 |       type: Boolean,
105 |       default: false
106 |     }
107 |   },
108 |   data () {
109 |     return {
110 |       isUsingString: true
111 |     }
112 |   },
113 |   components: {
114 |     MonthCalendar
115 |   },
116 |   computed: {
117 |     month () {
118 |       const month = {}
119 |       this.activeDates.forEach(date => {
120 |         let oDate
121 | 
122 |         if (typeof date === 'string') {
123 |           oDate = {
124 |             date: date,
125 |             className: this.activeClass
126 |           }
127 |         } else {
128 |           // 若 activeDate 裡的物件少了 className 屬性，就自動填入空字串。否則會變成undefined
129 |           oDate = {
130 |             date: date.date,
131 |             className: date.className || ''
132 |           }
133 |         }
134 |         if (dayjs(oDate.date).year() !== parseInt(this.value)) return // 讓2020年1月的資料，不會放到 2019年的1月資料裡
135 |         let m = (dayjs(oDate.date).month() + 1).toString()
136 |         if (!month[m]) month[m] = []
137 |         month[m].push(oDate)
138 |       })
139 |       return month
140 |     },
141 |     activeYear: {
142 |       get () {
143 |         return parseInt(this.value) // this.value 為從外層傳進來的 v-model="year"
144 |       },
145 |       set (val) {
146 |         this.$emit('input', val)
147 |       }
148 |     }
149 |   },
150 |   methods: {
151 |     changeYear (idx) {
152 |       this.activeYear = idx + this.activeYear - 3
153 |     },
154 |     toggleDate (dateObj) {
155 |       const activeDate = dayjs()
156 |         .set('year', this.value)
157 |         .set('month', dateObj.month - 1)
158 |         .set('date', dateObj.date)
159 |         .format('YYYY-MM-DD')
160 |       this.$emit('toggleDate', {
161 |         date: activeDate,
162 |         selected: dateObj.selected,
163 |         className: dateObj.className
164 |       })
165 | 
166 |       let dateIndex
167 |       let newDates
168 | 
169 |       if (this.isUsingString) {
170 |         dateIndex = this.activeDates.indexOf(activeDate)
171 |         newDates = this.modifiedActiveDates(dateIndex, activeDate)
172 |       } else {
173 |         let oDate = {
174 |           date: activeDate,
175 |           className: dateObj.className // 原為 this.defaultClassName ，修正bug(丁丁)
176 |         }
177 | 
178 |         dateIndex = this.activeDates.indexOf(this.activeDates.find((i) => i.date === activeDate))
179 |         newDates = this.modifiedActiveDates(dateIndex, oDate)
180 |       }
181 |       this.$emit('update:activeDates', newDates)
182 |     },
183 |     modifiedActiveDates (dateIndex, activeDate) {
184 |       let newDates = [...this.activeDates]
185 |       if (dateIndex === -1) {
186 |         newDates.push(activeDate)
187 |       } else {
188 |         newDates.splice(dateIndex, 1)
189 |       }
190 |       return newDates
191 |     },
192 |     monthClick (monthYearInfo) {
193 |       this.$emit('monthClick', monthYearInfo)
194 |     }
195 |   },
196 |   created () {
197 |     this.isUsingString = this.activeDates.length && typeof this.activeDates[0] === 'string'
198 |   }
199 | }
200 | </script>
201 | 
202 | <style lang="stylus" scoped>
203 | .vue-calendar__container
204 |   border-radius: 2px
205 |   min-width: 0
206 |   position: relative
207 |   text-decoration: none
208 |   box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12)
209 |   background-color #F6F6F3
210 |   .container__year
211 |     user-select none
212 |     height 65px
213 |     background-color #fff
214 |     font-size 24px
215 |     flex 100%
216 |     text-align center
217 |     display flex
218 |     .year__chooser
219 |       height 100%
220 |       flex: 1
221 |       cursor pointer
222 |       display flex
223 |       align-items center
224 |       justify-content center
225 |       color rgba(black, 0.9)
226 |       &:hover
227 |         background-color rgba(#666, 0.1)
228 |       &:nth-child(4n-3)
229 |         color rgba(black, 0.3)
230 |       &:nth-child(2n)
231 |         color rgba(black, 0.6)
232 |       &:nth-child(3)
233 |         box-shadow inset 0px -3px #4792BD
234 |   .container__months
235 |     flex-wrap wrap
236 |     display flex
237 |     padding: 15px
238 |   .container__month
239 |     padding: 8px
240 |     flex 16.66%
241 |     @media (max-width: 1300px)
242 |       flex: 25%
243 |     @media (max-width: 992px)
244 |       flex: 33.3%
245 |     @media (max-width: 768px)
246 |       flex: 50%
247 |     @media (max-width: 450px)
248 |       flex: 100%
249 |   .p-0
250 |     padding: 0px
251 | </style>
252 | <style lang="stylus">
253 | .container__months.hide-sunday
254 |   .calendar__day:nth-of-type(7n)
255 |     display none
256 |   .calendar__day
257 |     flex 16.66%
258 | 
259 | .container__months.hide-weekend
260 |   .calendar__day:nth-of-type(7n), .calendar__day:nth-of-type(7n-1)
261 |     display none
262 |   .calendar__day
263 |     flex 19%
264 | 
265 | </style>
266 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App)
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------
/tests/unit/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   env: {
3 |     jest: true
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/tests/unit/__snapshots__/month.spec.js.snap:
--------------------------------------------------------------------------------
  1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
  2 | 
  3 | exports[`MonthCalendar renders array of objects correctly 1`] = `
  4 | <div
  5 |   class="c-wrapper"
  6 | >
  7 |   <div
  8 |     class="calendar"
  9 |   >
 10 |     <div
 11 |       class="calendar__title"
 12 |     >
 13 |       一月
 14 |     </div>
 15 |      
 16 |     <div
 17 |       class="calendar__body"
 18 |     >
 19 |       <div
 20 |         class="calendar__day day__weektitle"
 21 |         style="font-size: 16px;"
 22 |       >
 23 |         一
 24 |       </div>
 25 |       <div
 26 |         class="calendar__day day__weektitle"
 27 |         style="font-size: 16px;"
 28 |       >
 29 |         二
 30 |       </div>
 31 |       <div
 32 |         class="calendar__day day__weektitle"
 33 |         style="font-size: 16px;"
 34 |       >
 35 |         三
 36 |       </div>
 37 |       <div
 38 |         class="calendar__day day__weektitle"
 39 |         style="font-size: 16px;"
 40 |       >
 41 |         四
 42 |       </div>
 43 |       <div
 44 |         class="calendar__day day__weektitle"
 45 |         style="font-size: 16px;"
 46 |       >
 47 |         五
 48 |       </div>
 49 |       <div
 50 |         class="calendar__day day__weektitle"
 51 |         style="font-size: 16px;"
 52 |       >
 53 |         六
 54 |       </div>
 55 |       <div
 56 |         class="calendar__day day__weektitle"
 57 |         style="font-size: 16px;"
 58 |       >
 59 |         日
 60 |       </div>
 61 |        
 62 |       <div
 63 |         class="calendar__day"
 64 |       >
 65 |         <div
 66 |           class="day calendar__day--otherMonth"
 67 |         >
 68 |           
 69 |         </div>
 70 |       </div>
 71 |       <div
 72 |         class="calendar__day"
 73 |       >
 74 |         <div
 75 |           class="day"
 76 |         >
 77 |           1
 78 |         </div>
 79 |       </div>
 80 |       <div
 81 |         class="calendar__day"
 82 |       >
 83 |         <div
 84 |           class="day"
 85 |         >
 86 |           2
 87 |         </div>
 88 |       </div>
 89 |       <div
 90 |         class="calendar__day"
 91 |       >
 92 |         <div
 93 |           class="day"
 94 |         >
 95 |           3
 96 |         </div>
 97 |       </div>
 98 |       <div
 99 |         class="calendar__day"
100 |       >
101 |         <div
102 |           class="day"
103 |         >
104 |           4
105 |         </div>
106 |       </div>
107 |       <div
108 |         class="calendar__day"
109 |       >
110 |         <div
111 |           class="day"
112 |         >
113 |           5
114 |         </div>
115 |       </div>
116 |       <div
117 |         class="calendar__day"
118 |       >
119 |         <div
120 |           class="day"
121 |         >
122 |           6
123 |         </div>
124 |       </div>
125 |       <div
126 |         class="calendar__day"
127 |       >
128 |         <div
129 |           class="day"
130 |         >
131 |           7
132 |         </div>
133 |       </div>
134 |       <div
135 |         class="calendar__day"
136 |       >
137 |         <div
138 |           class="day"
139 |         >
140 |           8
141 |         </div>
142 |       </div>
143 |       <div
144 |         class="calendar__day"
145 |       >
146 |         <div
147 |           class="day"
148 |         >
149 |           9
150 |         </div>
151 |       </div>
152 |       <div
153 |         class="calendar__day"
154 |       >
155 |         <div
156 |           class="day"
157 |         >
158 |           10
159 |         </div>
160 |       </div>
161 |       <div
162 |         class="calendar__day"
163 |       >
164 |         <div
165 |           class="day"
166 |         >
167 |           11
168 |         </div>
169 |       </div>
170 |       <div
171 |         class="calendar__day"
172 |       >
173 |         <div
174 |           class="day"
175 |         >
176 |           12
177 |         </div>
178 |       </div>
179 |       <div
180 |         class="calendar__day"
181 |       >
182 |         <div
183 |           class="day calendar--active "
184 |         >
185 |           13
186 |         </div>
187 |       </div>
188 |       <div
189 |         class="calendar__day"
190 |       >
191 |         <div
192 |           class="day calendar--active info"
193 |         >
194 |           14
195 |         </div>
196 |       </div>
197 |       <div
198 |         class="calendar__day"
199 |       >
200 |         <div
201 |           class="day calendar--active warning"
202 |         >
203 |           15
204 |         </div>
205 |       </div>
206 |       <div
207 |         class="calendar__day"
208 |       >
209 |         <div
210 |           class="day"
211 |         >
212 |           16
213 |         </div>
214 |       </div>
215 |       <div
216 |         class="calendar__day"
217 |       >
218 |         <div
219 |           class="day"
220 |         >
221 |           17
222 |         </div>
223 |       </div>
224 |       <div
225 |         class="calendar__day"
226 |       >
227 |         <div
228 |           class="day"
229 |         >
230 |           18
231 |         </div>
232 |       </div>
233 |       <div
234 |         class="calendar__day"
235 |       >
236 |         <div
237 |           class="day"
238 |         >
239 |           19
240 |         </div>
241 |       </div>
242 |       <div
243 |         class="calendar__day"
244 |       >
245 |         <div
246 |           class="day"
247 |         >
248 |           20
249 |         </div>
250 |       </div>
251 |       <div
252 |         class="calendar__day"
253 |       >
254 |         <div
255 |           class="day"
256 |         >
257 |           21
258 |         </div>
259 |       </div>
260 |       <div
261 |         class="calendar__day"
262 |       >
263 |         <div
264 |           class="day"
265 |         >
266 |           22
267 |         </div>
268 |       </div>
269 |       <div
270 |         class="calendar__day"
271 |       >
272 |         <div
273 |           class="day"
274 |         >
275 |           23
276 |         </div>
277 |       </div>
278 |       <div
279 |         class="calendar__day"
280 |       >
281 |         <div
282 |           class="day"
283 |         >
284 |           24
285 |         </div>
286 |       </div>
287 |       <div
288 |         class="calendar__day"
289 |       >
290 |         <div
291 |           class="day"
292 |         >
293 |           25
294 |         </div>
295 |       </div>
296 |       <div
297 |         class="calendar__day"
298 |       >
299 |         <div
300 |           class="day"
301 |         >
302 |           26
303 |         </div>
304 |       </div>
305 |       <div
306 |         class="calendar__day"
307 |       >
308 |         <div
309 |           class="day"
310 |         >
311 |           27
312 |         </div>
313 |       </div>
314 |       <div
315 |         class="calendar__day"
316 |       >
317 |         <div
318 |           class="day"
319 |         >
320 |           28
321 |         </div>
322 |       </div>
323 |       <div
324 |         class="calendar__day"
325 |       >
326 |         <div
327 |           class="day"
328 |         >
329 |           29
330 |         </div>
331 |       </div>
332 |       <div
333 |         class="calendar__day"
334 |       >
335 |         <div
336 |           class="day"
337 |         >
338 |           30
339 |         </div>
340 |       </div>
341 |       <div
342 |         class="calendar__day"
343 |       >
344 |         <div
345 |           class="day"
346 |         >
347 |           31
348 |         </div>
349 |       </div>
350 |       <div
351 |         class="calendar__day"
352 |       >
353 |         <div
354 |           class="day calendar__day--otherMonth"
355 |         >
356 |           1
357 |         </div>
358 |       </div>
359 |       <div
360 |         class="calendar__day"
361 |       >
362 |         <div
363 |           class="day calendar__day--otherMonth"
364 |         >
365 |           2
366 |         </div>
367 |       </div>
368 |       <div
369 |         class="calendar__day"
370 |       >
371 |         <div
372 |           class="day calendar__day--otherMonth"
373 |         >
374 |           3
375 |         </div>
376 |       </div>
377 |     </div>
378 |   </div>
379 | </div>
380 | `;
381 | 
382 | exports[`MonthCalendar renders array of strings correctly 1`] = `
383 | <div
384 |   class="c-wrapper"
385 | >
386 |   <div
387 |     class="calendar"
388 |   >
389 |     <div
390 |       class="calendar__title"
391 |     >
392 |       一月
393 |     </div>
394 |      
395 |     <div
396 |       class="calendar__body"
397 |     >
398 |       <div
399 |         class="calendar__day day__weektitle"
400 |         style="font-size: 16px;"
401 |       >
402 |         一
403 |       </div>
404 |       <div
405 |         class="calendar__day day__weektitle"
406 |         style="font-size: 16px;"
407 |       >
408 |         二
409 |       </div>
410 |       <div
411 |         class="calendar__day day__weektitle"
412 |         style="font-size: 16px;"
413 |       >
414 |         三
415 |       </div>
416 |       <div
417 |         class="calendar__day day__weektitle"
418 |         style="font-size: 16px;"
419 |       >
420 |         四
421 |       </div>
422 |       <div
423 |         class="calendar__day day__weektitle"
424 |         style="font-size: 16px;"
425 |       >
426 |         五
427 |       </div>
428 |       <div
429 |         class="calendar__day day__weektitle"
430 |         style="font-size: 16px;"
431 |       >
432 |         六
433 |       </div>
434 |       <div
435 |         class="calendar__day day__weektitle"
436 |         style="font-size: 16px;"
437 |       >
438 |         日
439 |       </div>
440 |        
441 |       <div
442 |         class="calendar__day"
443 |       >
444 |         <div
445 |           class="day calendar__day--otherMonth"
446 |         >
447 |           
448 |         </div>
449 |       </div>
450 |       <div
451 |         class="calendar__day"
452 |       >
453 |         <div
454 |           class="day calendar--active "
455 |         >
456 |           1
457 |         </div>
458 |       </div>
459 |       <div
460 |         class="calendar__day"
461 |       >
462 |         <div
463 |           class="day"
464 |         >
465 |           2
466 |         </div>
467 |       </div>
468 |       <div
469 |         class="calendar__day"
470 |       >
471 |         <div
472 |           class="day"
473 |         >
474 |           3
475 |         </div>
476 |       </div>
477 |       <div
478 |         class="calendar__day"
479 |       >
480 |         <div
481 |           class="day"
482 |         >
483 |           4
484 |         </div>
485 |       </div>
486 |       <div
487 |         class="calendar__day"
488 |       >
489 |         <div
490 |           class="day"
491 |         >
492 |           5
493 |         </div>
494 |       </div>
495 |       <div
496 |         class="calendar__day"
497 |       >
498 |         <div
499 |           class="day"
500 |         >
501 |           6
502 |         </div>
503 |       </div>
504 |       <div
505 |         class="calendar__day"
506 |       >
507 |         <div
508 |           class="day"
509 |         >
510 |           7
511 |         </div>
512 |       </div>
513 |       <div
514 |         class="calendar__day"
515 |       >
516 |         <div
517 |           class="day"
518 |         >
519 |           8
520 |         </div>
521 |       </div>
522 |       <div
523 |         class="calendar__day"
524 |       >
525 |         <div
526 |           class="day"
527 |         >
528 |           9
529 |         </div>
530 |       </div>
531 |       <div
532 |         class="calendar__day"
533 |       >
534 |         <div
535 |           class="day"
536 |         >
537 |           10
538 |         </div>
539 |       </div>
540 |       <div
541 |         class="calendar__day"
542 |       >
543 |         <div
544 |           class="day"
545 |         >
546 |           11
547 |         </div>
548 |       </div>
549 |       <div
550 |         class="calendar__day"
551 |       >
552 |         <div
553 |           class="day"
554 |         >
555 |           12
556 |         </div>
557 |       </div>
558 |       <div
559 |         class="calendar__day"
560 |       >
561 |         <div
562 |           class="day"
563 |         >
564 |           13
565 |         </div>
566 |       </div>
567 |       <div
568 |         class="calendar__day"
569 |       >
570 |         <div
571 |           class="day"
572 |         >
573 |           14
574 |         </div>
575 |       </div>
576 |       <div
577 |         class="calendar__day"
578 |       >
579 |         <div
580 |           class="day"
581 |         >
582 |           15
583 |         </div>
584 |       </div>
585 |       <div
586 |         class="calendar__day"
587 |       >
588 |         <div
589 |           class="day"
590 |         >
591 |           16
592 |         </div>
593 |       </div>
594 |       <div
595 |         class="calendar__day"
596 |       >
597 |         <div
598 |           class="day"
599 |         >
600 |           17
601 |         </div>
602 |       </div>
603 |       <div
604 |         class="calendar__day"
605 |       >
606 |         <div
607 |           class="day"
608 |         >
609 |           18
610 |         </div>
611 |       </div>
612 |       <div
613 |         class="calendar__day"
614 |       >
615 |         <div
616 |           class="day"
617 |         >
618 |           19
619 |         </div>
620 |       </div>
621 |       <div
622 |         class="calendar__day"
623 |       >
624 |         <div
625 |           class="day calendar--active "
626 |         >
627 |           20
628 |         </div>
629 |       </div>
630 |       <div
631 |         class="calendar__day"
632 |       >
633 |         <div
634 |           class="day"
635 |         >
636 |           21
637 |         </div>
638 |       </div>
639 |       <div
640 |         class="calendar__day"
641 |       >
642 |         <div
643 |           class="day"
644 |         >
645 |           22
646 |         </div>
647 |       </div>
648 |       <div
649 |         class="calendar__day"
650 |       >
651 |         <div
652 |           class="day"
653 |         >
654 |           23
655 |         </div>
656 |       </div>
657 |       <div
658 |         class="calendar__day"
659 |       >
660 |         <div
661 |           class="day"
662 |         >
663 |           24
664 |         </div>
665 |       </div>
666 |       <div
667 |         class="calendar__day"
668 |       >
669 |         <div
670 |           class="day"
671 |         >
672 |           25
673 |         </div>
674 |       </div>
675 |       <div
676 |         class="calendar__day"
677 |       >
678 |         <div
679 |           class="day"
680 |         >
681 |           26
682 |         </div>
683 |       </div>
684 |       <div
685 |         class="calendar__day"
686 |       >
687 |         <div
688 |           class="day"
689 |         >
690 |           27
691 |         </div>
692 |       </div>
693 |       <div
694 |         class="calendar__day"
695 |       >
696 |         <div
697 |           class="day"
698 |         >
699 |           28
700 |         </div>
701 |       </div>
702 |       <div
703 |         class="calendar__day"
704 |       >
705 |         <div
706 |           class="day"
707 |         >
708 |           29
709 |         </div>
710 |       </div>
711 |       <div
712 |         class="calendar__day"
713 |       >
714 |         <div
715 |           class="day"
716 |         >
717 |           30
718 |         </div>
719 |       </div>
720 |       <div
721 |         class="calendar__day"
722 |       >
723 |         <div
724 |           class="day"
725 |         >
726 |           31
727 |         </div>
728 |       </div>
729 |       <div
730 |         class="calendar__day"
731 |       >
732 |         <div
733 |           class="day calendar__day--otherMonth"
734 |         >
735 |           1
736 |         </div>
737 |       </div>
738 |       <div
739 |         class="calendar__day"
740 |       >
741 |         <div
742 |           class="day calendar__day--otherMonth"
743 |         >
744 |           2
745 |         </div>
746 |       </div>
747 |       <div
748 |         class="calendar__day"
749 |       >
750 |         <div
751 |           class="day calendar__day--otherMonth"
752 |         >
753 |           3
754 |         </div>
755 |       </div>
756 |     </div>
757 |   </div>
758 | </div>
759 | `;
760 | 


--------------------------------------------------------------------------------
/tests/unit/month.spec.js:
--------------------------------------------------------------------------------
 1 | import { mount } from '@vue/test-utils'
 2 | import MonthCalendar from '@/components/MonthCalendar'
 3 | describe('MonthCalendar', () => {
 4 |   const wrapper = mount(MonthCalendar, {
 5 |     propsData: {
 6 |       month: 1,
 7 |       lang: 'tw',
 8 |       year: 2019
 9 |     }
10 |   })
11 |   it('renders title', () => {
12 |     expect(wrapper.html()).toContain('<div class="calendar__title">一月</div>')
13 |   })
14 | 
15 |   it('render custom active class', () => {
16 |     wrapper.setProps({
17 |       activeDates: [{
18 |         date: '2019-01-01', className: 'my-custom'
19 |       }]
20 |     })
21 |     const date = wrapper.find('.day:not(.calendar__day--otherMonth)')
22 |     expect(date.classes()).toContain('my-custom')
23 |     wrapper.setProps({
24 |       activeDates: []
25 |     })
26 |     const noneDate = wrapper.find('.my-custom')
27 |     expect(noneDate.exists()).toBe(false)
28 |   })
29 | 
30 |   it('renders array of strings correctly', () => {
31 |     wrapper.setProps({
32 |       activeDates: ['2019-01-01', '2019-01-20']
33 |     })
34 |     expect(wrapper.element).toMatchSnapshot()
35 |   })
36 | 
37 |   it('renders array of objects correctly', () => {
38 |     wrapper.setProps({
39 |       activeDates: [
40 |         { date: '2019-01-13', className: '' },
41 |         { date: '2019-01-14', className: 'info' },
42 |         { date: '2019-01-15', className: 'warning' }]
43 |     })
44 |     expect(wrapper.element).toMatchSnapshot()
45 |   })
46 | 
47 |   it('should toggle month click event when click month', async () => {
48 |     await wrapper.find('.calendar__title').trigger('click')
49 |     expect(wrapper.emitted().monthClickEvent).toEqual([[{
50 |       monthTitle: '一月',
51 |       month: 1,
52 |       year: 2019
53 |     }]])
54 |   })
55 | })
56 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   baseUrl: './'
3 | }
4 | 


--------------------------------------------------------------------------------