├── .babelrc
├── .gitignore
├── .npmignore
├── README.md
├── README.zh.md
├── demo
    ├── README.md
    ├── dist
    │   ├── build.js
    │   └── build.js.map
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── src
    │   ├── App.vue
    │   └── main.js
    └── webpack.config.js
├── dev
    ├── App.vue
    └── main.js
├── dist
    ├── index.js
    ├── index.js.map
    ├── style.css
    └── style.css.map
├── index.html
├── package-lock.json
├── package.json
├── src
    ├── components
    │   ├── cal-event-item.vue
    │   ├── cal-events.vue
    │   └── cal-panel.vue
    ├── i18n.js
    ├── index.js
    ├── tools.js
    └── vue-event-calendar.vue
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     ["es2015", { "modules": false }]
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | npm-debug.log
4 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | demo/
2 | dev/
3 | index.html
4 | webpack.config.js


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-event-calendar
  2 | 
  3 | > A simple events calendar for Vue2, no dependencies except Vue2. responsive & mobile first.
  4 | > [Live Demo Here](http://geoffzhu.cn/vue-event-calendar/)
  5 | 
  6 | ![](http://o80ronwlu.bkt.clouddn.com/vue-event-calendar.gif)
  7 | 
  8 | [![npm version](https://img.shields.io/npm/v/vue-event-calendar.svg)](https://www.npmjs.com/package/vue-event-calendar)
  9 | 
 10 | [中文文档](https://github.com/GeoffZhu/vue-event-calendar/blob/master/README.zh.md)
 11 | 
 12 | ## Requirements
 13 | - vue: ^2.0.0
 14 | 
 15 | ## Usage
 16 | #### install
 17 | 
 18 | ``` sh
 19 |  npm install vue-event-calendar --save
 20 | ```
 21 | 
 22 | #### main.js
 23 | 
 24 | ```javascript
 25 | import 'vue-event-calendar/dist/style.css' //^1.1.10, CSS has been extracted as one file, so you can easily update it.
 26 | import vueEventCalendar from 'vue-event-calendar'
 27 | // locale can be 'zh' , 'en' , 'es', 'pt-br', 'ja', 'ko', 'fr', 'it', 'ru', 'de', 'vi', 'ua', 'no, 'no-nn'
 28 | Vue.use(vueEventCalendar, {locale: 'en'}) 
 29 | ```
 30 | 
 31 | #### file.vue
 32 | 
 33 | ```vue
 34 | <template>
 35 |   <vue-event-calendar :events="demoEvents"></vue-event-calendar>
 36 | </template>
 37 | 
 38 | <script>
 39 | export default {
 40 |   data () {
 41 |     return {
 42 |       demoEvents: [{
 43 |         date: '2016/11/12', // Required
 44 |         title: 'Foo' // Required
 45 |       }, {
 46 |         date: '2016/12/15',
 47 |         title: 'Bar',
 48 |         desc: 'description',
 49 |         customClass: 'disabled highlight' // Custom classes to an calendar cell
 50 |       }]
 51 |     }
 52 |   }
 53 | }
 54 | </script>
 55 | ```
 56 | 
 57 | ## Custom date title
 58 | 
 59 | ```vue
 60 | <template>
 61 |   <vue-event-calendar :title="title" :events="demoEvents" @dayChanged="handleDayChange"></vue-event-calendar>
 62 | </template>
 63 | ```
 64 | 
 65 | In most cases, the default date string is enough，but when you want a custom date title, you can give a prop ```title```.
 66 | It is important to noticed that the title will be replaced with a static String you passed in. You need to monitor the dayChanged event and change the title by youself.
 67 | 
 68 | ## Customization event template
 69 | If you want customization event template. required Vue: ^2.1.0. Because I use new feature(Scoped Slots) of ^2.1.0
 70 | 
 71 | ```vue
 72 | <template>
 73 |   <vue-event-calendar :events="demoEvents">
 74 |       <template scope="props">
 75 |         <div v-for="(event, index) in props.showEvents" class="event-item">
 76 |           <!-- In here do whatever you want, make you owner event template -->
 77 |           {{event}}
 78 |         </div>
 79 |       </template>
 80 |     </vue-event-calendar>
 81 | </template>
 82 | 
 83 | <script>
 84 | export default {
 85 |   data () {
 86 |     return {
 87 |       demoEvents: [{
 88 |         date: '2016/12/15',
 89 |         title: 'eat',
 90 |         desc: 'longlonglong description'
 91 |       },{
 92 |         date: '2016/11/12',
 93 |         title: 'this is a title'
 94 |       }]
 95 |     }
 96 |   }
 97 | }
 98 | </script>
 99 | ```
100 | 
101 | ## Component Events
102 | Can handle two Events, @day-changed and @month-changed, callback params like ``` {date: '2017/06/23', events: []} ```.
103 | 
104 | ```javascript
105 | <template>
106 |   <vue-event-calendar
107 |     :events="demoEvents"
108 |     @day-changed="handleDayChanged"
109 |     @month-changed="handleMonthChanged">
110 |   </vue-event-calendar>
111 | </template>
112 | ```
113 | 
114 | ## Options
115 | 
116 | ```
117 |   // When Vue.use, options
118 |   {
119 |     locale: 'en',
120 |     color: 'black', //Set main color
121 |     className: 'Custom className for current clicked date', // (default: 'selected-day')
122 |     weekStartOn: 'week Start on which day'  // Can be: 1, 2, 3, 4, 5, 6, 0 (default: 0)
123 |   }
124 | ```
125 | 
126 | ## API
127 | ```javascript
128 | // NextMonth
129 | this.$EventCalendar.nextMonth()
130 | ```
131 | ```javascript
132 | // PreMonth
133 | this.$EventCalendar.preMonth()
134 | ```
135 | ```javascript
136 | //ToDate
137 | this.$EventCalendar.toDate('2016/11/12')
138 | ```
139 | More in [Demo Folder](https://github.com/GeoffZhu/vue-event-calendar/tree/master/demo)
140 | 
141 | ## Develop
142 | ```
143 | npm run dev  //develop
144 | npm run build //production
145 | ```
146 | 
147 | ## Change log
148 | 
149 | ##### 1.3.6 -> 1.4.0
150 | 
151 | - Remove today background, use a small dot below the date
152 | - Increase the selected date style
153 | 
154 | ##### 1.4.0 -> 1.4.8
155 | 
156 | - Add week start on
157 | 
158 | ## License
159 | 
160 | [MIT](https://opensource.org/licenses/MIT)
161 | 


--------------------------------------------------------------------------------
/README.zh.md:
--------------------------------------------------------------------------------
  1 | # vue-event-calendar
  2 | 
  3 | > vue-event-calendar是一款简单小巧的事件日历组件，针对Vue2开发。样式美观，且响应式。
  4 | > [在线例子](http://geoffzhu.cn/vue-event-calendar/)
  5 | 
  6 | ![](http://o80ronwlu.bkt.clouddn.com/vue-event-calendar.gif)
  7 | 
  8 | [![npm version](https://img.shields.io/npm/v/vue-event-calendar.svg)](https://www.npmjs.com/package/vue-event-calendar)
  9 | 
 10 | ## 依赖
 11 | - vue: ^2.0.0
 12 | 
 13 | ## 使用方法
 14 | #### 安装
 15 | 
 16 | ``` sh
 17 |  npm install vue-event-calendar --save
 18 | ```
 19 | 
 20 | #### 入口 Main.js
 21 | 
 22 | ```javascript
 23 | import 'vue-event-calendar/dist/style.css' //1.1.10之后的版本，css被放在了单独的文件中，方便替换
 24 | import vueEventCalendar from 'vue-event-calendar'
 25 | Vue.use(vueEventCalendar, {locale: 'en'}) //可以设置语言，支持中文和英文
 26 | ```
 27 | 
 28 | #### 用法示例
 29 | 
 30 | ```vue
 31 | <template>
 32 |   <vue-event-calendar :events="demoEvents" @monthChanged="" @dayChanged=""></vue-event-calendar>
 33 | </template>
 34 | 
 35 | <script>
 36 | export default {
 37 |   data () {
 38 |     return {
 39 |       demoEvents: [{
 40 |         date: '2016/11/12', // 必填
 41 |         title: 'Foo' // 必填
 42 |       }, {
 43 |         date: '2016/12/15',
 44 |         title: 'Bar',
 45 |         desc: 'description',
 46 |         customClass: 'disabled highlight' // 自定义日历单元格的Class，会加到对应的日历单元格上
 47 |       }]
 48 |     }
 49 |   },
 50 |   methods: {
 51 |     monthChange (month) {
 52 |       console.log(month)
 53 |     },
 54 |     dayChange (day) {
 55 |       console.log(day)
 56 |     }
 57 |   }
 58 | }
 59 | </script>
 60 | ```
 61 | 
 62 | ## 自定义日期标题
 63 | 
 64 | ```vue
 65 | <template>
 66 |   <vue-event-calendar :title="title" :events="demoEvents" @dayChanged="handleDayChange"></vue-event-calendar>
 67 | </template>
 68 | ```
 69 | 
 70 | 当你使用自定义日历标题的时候，需要注意，标题将被替换成静态的你传入的String，你需要手动监听dayChanged事件去改变title。
 71 | 
 72 | ## 自定义事件模版（可以允许你展示更多信息）
 73 | vue-event-calendar允许自定义事件模版，但是这个功能需要Vue 2.1.0版本以上才可以使用。原因是我试用了2.1.0以上才有的新功能作用域插槽(Scoped Slots)。
 74 | 
 75 | ```vue
 76 | <template>
 77 |   <vue-event-calendar :events="demoEvents">
 78 |       <template scope="props">
 79 |         <div v-for="(event, index) in props.showEvents" class="event-item">
 80 |           <!-- 这里拿到的是传入的单个event所有数据 -->
 81 |           {{event}}
 82 |         </div>
 83 |       </template>
 84 |     </vue-event-calendar>
 85 | </template>
 86 | 
 87 | <script>
 88 | export default {
 89 |   data () {
 90 |     return {
 91 |       demoEvents: [{
 92 |         date: '2016/12/15',
 93 |         title: 'eat',
 94 |         desc: 'longlonglong description'
 95 |       },{
 96 |         date: '2016/11/12',
 97 |         title: 'this is a title'
 98 |       }]
 99 |     }
100 |   }
101 | }
102 | </script>
103 | ```
104 | 
105 | ## 组件事件
106 | 可以监听的事件有两个，选择了哪天和当月是哪月，当发生改变时，会触发监听函数。函数中的回调参数为改变后的日期。
107 | ```
108 | <template>
109 |   <vue-event-calendar
110 |     :events="demoEvents"
111 |     @day-changed="handleDayChanged"
112 |     @month-changed="handleMonthChanged">
113 |   </vue-event-calendar>
114 | </template>
115 | ```
116 | 
117 | ## Options
118 | 
119 | ```
120 |   // 当 Vue.use时, 可以设置的参数
121 |   {
122 |     locale: 'en',
123 |     color: 'black', //Set main color
124 |     className: 'Custom className for current clicked date', // (default: 'selected-day')
125 |     weekStartOn: 'week Start on which day'  // Can be: 1, 2, 3, 4, 5, 6, 0 (default: 0)
126 |   }
127 | ```
128 | 
129 | ## API
130 | ```javascript
131 | // 下个月
132 | this.$EventCalendar.nextMonth()
133 | ```
134 | ```javascript
135 | // 上个月
136 | this.$EventCalendar.preMonth()
137 | ```
138 | ```javascript
139 | //到指定日期
140 | this.$EventCalendar.toDate('2016/11/12')
141 | ```
142 | 可以看我写的[Demo](https://github.com/GeoffZhu/vue-event-calendar/tree/master/demo)
143 | 
144 | ## 开发
145 | 可以在github直接clone我的项目然后执行如下命令继续二次开发或发版，欢迎star&&issue
146 | ```
147 | npm run dev  //develop
148 | npm run build //production
149 | ```
150 | 
151 | ## Change log
152 | 
153 | ##### 1.3.6 -> 1.4.0
154 | 
155 | - 去除了当天的背景，改用一个在日期下面的小圆点替代
156 | - 增加选中日期样式
157 | 
158 | 
159 | ## License
160 | 
161 | [MIT](https://opensource.org/licenses/MIT)
162 | 


--------------------------------------------------------------------------------
/demo/README.md:
--------------------------------------------------------------------------------
1 | # vue-event-calendar
2 | 
3 | > This is a demo for vue-event-calendar
4 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 5 |     <meta charset="utf-8">
 6 |     <title>vue-event-calendar</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <script src="./dist/build.js"></script>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/demo/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-event-calendar-demo",
 3 |   "description": "A simple calendar to mark events for Vue2 ",
 4 |   "version": "1.0.0",
 5 |   "author": "Geoff <geoffzhu1992@gmail.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
 9 |     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
10 |   },
11 |   "dependencies": {
12 |     "vue": "^2.5.3",
13 |     "vue-event-calendar": "^1.5.1"
14 |   },
15 |   "devDependencies": {
16 |     "@babel/preset-env": "^7.0.0-beta.31",
17 |     "babel": "^6.23.0",
18 |     "babel-core": "^6.26.0",
19 |     "babel-loader": "^6.4.1",
20 |     "babel-preset-env": "^1.6.1",
21 |     "cross-env": "^3.2.4",
22 |     "css-loader": "^0.25.0",
23 |     "file-loader": "^0.9.0",
24 |     "less": "^2.7.3",
25 |     "less-loader": "^2.2.3",
26 |     "style-loader": "^0.13.2",
27 |     "vue-loader": "^10.0.0",
28 |     "vue-template-compiler": "^2.1.8",
29 |     "webpack": "^2.7.0",
30 |     "webpack-dev-server": "^2.9.4"
31 |   },
32 |   "babel": {
33 |     "presets": [
34 |       [
35 |         "env",
36 |         {
37 |           "targets": {
38 |             "browsers": [
39 |               "last 3 versions",
40 |               "safari >= 7"
41 |             ]
42 |           }
43 |         }
44 |       ]
45 |     ]
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/demo/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <h1>vue-event-calendar</h1>
 4 |     <h2 class="t-center">Default template</h2>
 5 |     <vue-event-calendar
 6 |       :events="demoEvents"
 7 |       @day-changed="handleDayChanged"
 8 |       @month-changed="handleMonthChanged"
 9 |     ></vue-event-calendar>
10 |     <h2 class="t-center mt150">Custom template</h2>
11 |     <vue-event-calendar :events="demoEvents">
12 |       <template scope="props">
13 |         <div v-for="(event, index) in props.showEvents" class="event-item">
14 |           <!-- In here do whatever you want, make you owner event template -->
15 |           {{event}}
16 |         </div>
17 |       </template>
18 |     </vue-event-calendar>
19 |   </div>
20 | </template>
21 | 
22 | <script>
23 | let today = new Date()
24 | export default {
25 |   name: 'app',
26 |   data () {
27 |     return {
28 |       demoEvents: [{
29 |         date: `${today.getFullYear()}/${today.getMonth() + 1}/15`,
30 |         title: 'Title-1',
31 |         desc: 'longlonglong description'
32 |       },{
33 |         date: `${today.getFullYear()}/${today.getMonth() + 1}/24`,
34 |         title: 'Title-2'
35 |       },{
36 |         date: `${today.getFullYear()}/${today.getMonth() === 11 ? 1 : today.getMonth() + 2}/06`,
37 |         title: 'Title-3',
38 |         desc: 'description'
39 |       }]
40 |     }
41 |   },
42 |   methods: {
43 |     handleDayChanged (data) {
44 |       console.log('date-changed', data)
45 |     },
46 |     handleMonthChanged (data) {
47 |       console.log('month-changed', data)
48 |     }
49 |   }
50 | }
51 | </script>
52 | 
53 | <style>
54 | #app {
55 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
56 |   -webkit-font-smoothing: antialiased;
57 |   -moz-osx-font-smoothing: grayscale;
58 |   color: #2c3e50;
59 |   margin-top: 30px;
60 | }
61 | 
62 | h1, h2, h3 {
63 |   font-weight: normal;
64 |   margin: 0;
65 |   padding: 0;
66 | }
67 | 
68 | ul {
69 |   list-style-type: none;
70 |   padding: 0;
71 | }
72 | 
73 | li {
74 |   display: inline-block;
75 |   margin: 0 10px;
76 | }
77 | 
78 | a {
79 |   color: #42b983;
80 | }
81 | .t-center{
82 |   text-align: center;
83 |   margin: 20px;
84 | }
85 | .mt150{
86 |   margin-top: 150px;
87 | }
88 | </style>
89 | 


--------------------------------------------------------------------------------
/demo/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | 
 4 | import 'vue-event-calendar/dist/style.css'
 5 | // import vueEventCalendar from 'vue-event-calendar'
 6 | import vueEventCalendar from '../../dist/index.js'
 7 | 
 8 | Vue.use(vueEventCalendar, {locale: 'en', weekStartOn: 1})
 9 | 
10 | window.Vue = Vue
11 | new Vue({
12 |   el: '#app',
13 |   render: h => h(App)
14 | })
15 | 


--------------------------------------------------------------------------------
/demo/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 |   entry: './src/main.js',
 6 |   output: {
 7 |     path: path.resolve(__dirname, './dist'),
 8 |     publicPath: '/dist/',
 9 |     filename: 'build.js'
10 |   },
11 |   module: {
12 |     rules: [
13 |       {
14 |         test: /\.vue$/,
15 |         loader: 'vue-loader',
16 |         options: {
17 |           // vue-loader options go here
18 |         }
19 |       },
20 |       {
21 |         test: /\.js$/,
22 |         loader: 'babel-loader',
23 |         exclude: /node_modules/
24 |       },
25 |       {
26 |         test: /\.css$/,
27 |         loader: 'style-loader!css-loader'
28 |       },
29 |       {
30 |         test: /\.(png|jpg|gif|svg)$/,
31 |         loader: 'file-loader',
32 |         options: {
33 |           name: '[name].[ext]?[hash]'
34 |         }
35 |       }
36 |     ]
37 |   },
38 |   resolve: {
39 |     alias: {
40 |       'vue$': 'vue/dist/vue.common.js'
41 |     }
42 |   },
43 |   devServer: {
44 |     historyApiFallback: true,
45 |     noInfo: true
46 |   },
47 |   devtool: '#eval-source-map'
48 | }
49 | 
50 | if (process.env.NODE_ENV === 'production') {
51 |   module.exports.devtool = '#source-map'
52 |   // http://vue-loader.vuejs.org/en/workflow/production.html
53 |   module.exports.plugins = (module.exports.plugins || []).concat([
54 |     new webpack.DefinePlugin({
55 |       'process.env': {
56 |         NODE_ENV: '"production"'
57 |       }
58 |     }),
59 |     new webpack.optimize.UglifyJsPlugin({
60 |       sourceMap: true,
61 |       compress: {
62 |         warnings: false
63 |       }
64 |     }),
65 |     new webpack.LoaderOptionsPlugin({
66 |       minimize: true
67 |     })
68 |   ])
69 | }
70 | 


--------------------------------------------------------------------------------
/dev/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <h1>vue-event-calendar</h1>
  4 |     <h2 class="t-center">Default template</h2>
  5 |     <vue-event-calendar
  6 |       :events="demoEvents"
  7 |       @day-changed="handleDayChanged"
  8 |       @month-changed="handleMonthChanged"
  9 |     ></vue-event-calendar>
 10 |     <h2 class="t-center">Custom template</h2>
 11 |     <vue-event-calendar :events="demoEvents">
 12 |       <template scope="props">
 13 |         <div v-for="(event, index) in props.showEvents" class="event-item">
 14 |           <!-- In here do whatever you want, make you owner event template -->
 15 |           {{event}}
 16 |         </div>
 17 |       </template>
 18 |     </vue-event-calendar>
 19 |   </div>
 20 | </template>
 21 | 
 22 | <script>
 23 | let today = new Date()
 24 | export default {
 25 |   name: 'app',
 26 |   data () {
 27 |     return {
 28 |       demoEvents: [{
 29 |         date: `${today.getFullYear()}/${today.getMonth() + 1}/${today.getDate()}`,
 30 |         title: 'Title-1',
 31 |         desc: 'longlonglong description'
 32 |       },{
 33 |         date: `${today.getFullYear()}/${today.getMonth() + 1}/${today.getDate()}`,
 34 |         title: 'Title-1',
 35 |         desc: 'longlonglong description'
 36 |       },{
 37 |         date: `${today.getFullYear()}/${today.getMonth() + 1}/${today.getDate()}`,
 38 |         title: 'Title-1',
 39 |         desc: 'longlonglong description'
 40 |       },{
 41 |         date: `${today.getFullYear()}/${today.getMonth() + 1}/${today.getDate()}`,
 42 |         title: 'Title-1',
 43 |         desc: 'longlonglong description'
 44 |       },{
 45 |         date: `${today.getFullYear()}/${today.getMonth() + 1}/${today.getDate()}`,
 46 |         title: 'Title-1',
 47 |         desc: 'longlonglong description'
 48 |       },{
 49 |         date: `${today.getFullYear()}/${today.getMonth() + 1}/${today.getDate()}`,
 50 |         title: 'Title-1',
 51 |         desc: 'longlonglong description'
 52 |       },{
 53 |         date: `${today.getFullYear()}/${today.getMonth() + 1}/15`,
 54 |         title: 'Title-1',
 55 |         desc: 'longlonglong description'
 56 |       },{
 57 |         date: `${today.getFullYear()}/${today.getMonth() + 1}/24`,
 58 |         title: 'Title-2'
 59 |       },{
 60 |         date: `${today.getFullYear()}/${today.getMonth() === 11 ? 1 : today.getMonth() + 2}/06`,
 61 |         title: 'Title-3',
 62 |         desc: 'description'
 63 |       }]
 64 |     }
 65 |   },
 66 |   methods: {
 67 |     handleDayChanged (data) {
 68 |     },
 69 |     handleMonthChanged (data) {
 70 |     }
 71 |   }
 72 | }
 73 | </script>
 74 | 
 75 | <style>
 76 | #app {
 77 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
 78 |   -webkit-font-smoothing: antialiased;
 79 |   -moz-osx-font-smoothing: grayscale;
 80 |   color: #2c3e50;
 81 |   margin-top: 30px;
 82 | }
 83 | 
 84 | h1, h2, h3 {
 85 |   font-weight: normal;
 86 |   margin: 0;
 87 |   padding: 0;
 88 | }
 89 | 
 90 | ul {
 91 |   list-style-type: none;
 92 |   padding: 0;
 93 | }
 94 | 
 95 | li {
 96 |   display: inline-block;
 97 |   margin: 0 10px;
 98 | }
 99 | 
100 | a {
101 |   color: #42b983;
102 | }
103 | .t-center{
104 |   text-align: center;
105 |   margin: 20px;
106 | }
107 | </style>
108 | 


--------------------------------------------------------------------------------
/dev/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | 
 4 | import vueEventCalendar from '../src/'
 5 | // import vueEventCalendar from '../dist'
 6 | // import '../dist/style.css'
 7 | Vue.use(vueEventCalendar, {locale: 'zh', weekStartOn: 1})
 8 | 
 9 | new Vue({
10 |   el: '#app',
11 |   render: h => h(App)
12 | })
13 | 


--------------------------------------------------------------------------------
/dist/index.js:
--------------------------------------------------------------------------------
   1 | (function webpackUniversalModuleDefinition(root, factory) {
   2 | 	if(typeof exports === 'object' && typeof module === 'object')
   3 | 		module.exports = factory();
   4 | 	else if(typeof define === 'function' && define.amd)
   5 | 		define([], factory);
   6 | 	else if(typeof exports === 'object')
   7 | 		exports["VueEventCalendar"] = factory();
   8 | 	else
   9 | 		root["VueEventCalendar"] = factory();
  10 | })(this, function() {
  11 | return /******/ (function(modules) { // webpackBootstrap
  12 | /******/ 	// The module cache
  13 | /******/ 	var installedModules = {};
  14 | /******/
  15 | /******/ 	// The require function
  16 | /******/ 	function __webpack_require__(moduleId) {
  17 | /******/
  18 | /******/ 		// Check if module is in cache
  19 | /******/ 		if(installedModules[moduleId]) {
  20 | /******/ 			return installedModules[moduleId].exports;
  21 | /******/ 		}
  22 | /******/ 		// Create a new module (and put it into the cache)
  23 | /******/ 		var module = installedModules[moduleId] = {
  24 | /******/ 			i: moduleId,
  25 | /******/ 			l: false,
  26 | /******/ 			exports: {}
  27 | /******/ 		};
  28 | /******/
  29 | /******/ 		// Execute the module function
  30 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  31 | /******/
  32 | /******/ 		// Flag the module as loaded
  33 | /******/ 		module.l = true;
  34 | /******/
  35 | /******/ 		// Return the exports of the module
  36 | /******/ 		return module.exports;
  37 | /******/ 	}
  38 | /******/
  39 | /******/
  40 | /******/ 	// expose the modules object (__webpack_modules__)
  41 | /******/ 	__webpack_require__.m = modules;
  42 | /******/
  43 | /******/ 	// expose the module cache
  44 | /******/ 	__webpack_require__.c = installedModules;
  45 | /******/
  46 | /******/ 	// identity function for calling harmony imports with the correct context
  47 | /******/ 	__webpack_require__.i = function(value) { return value; };
  48 | /******/
  49 | /******/ 	// define getter function for harmony exports
  50 | /******/ 	__webpack_require__.d = function(exports, name, getter) {
  51 | /******/ 		if(!__webpack_require__.o(exports, name)) {
  52 | /******/ 			Object.defineProperty(exports, name, {
  53 | /******/ 				configurable: false,
  54 | /******/ 				enumerable: true,
  55 | /******/ 				get: getter
  56 | /******/ 			});
  57 | /******/ 		}
  58 | /******/ 	};
  59 | /******/
  60 | /******/ 	// getDefaultExport function for compatibility with non-harmony modules
  61 | /******/ 	__webpack_require__.n = function(module) {
  62 | /******/ 		var getter = module && module.__esModule ?
  63 | /******/ 			function getDefault() { return module['default']; } :
  64 | /******/ 			function getModuleExports() { return module; };
  65 | /******/ 		__webpack_require__.d(getter, 'a', getter);
  66 | /******/ 		return getter;
  67 | /******/ 	};
  68 | /******/
  69 | /******/ 	// Object.prototype.hasOwnProperty.call
  70 | /******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
  71 | /******/
  72 | /******/ 	// __webpack_public_path__
  73 | /******/ 	__webpack_require__.p = "";
  74 | /******/
  75 | /******/ 	// Load entry module and return exports
  76 | /******/ 	return __webpack_require__(__webpack_require__.s = 9);
  77 | /******/ })
  78 | /************************************************************************/
  79 | /******/ ([
  80 | /* 0 */
  81 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
  82 | 
  83 | "use strict";
  84 | /* harmony export (immutable) */ __webpack_exports__["b"] = dateTimeFormatter;
  85 | /* harmony export (immutable) */ __webpack_exports__["a"] = isEqualDateStr;
  86 | function dateTimeFormatter(date, format) {
  87 |   // 时间格式化辅助函数 date:毫秒数 format:'yyyy-MM-dd hh:mm:ss'
  88 |   if (!date || date == "") {
  89 |     return "";
  90 |   }
  91 | 
  92 |   if (typeof date === "string") {
  93 |     var mts = date.match(/(\/Date\((\d+)\)\/)/);
  94 |     if (mts && mts.length >= 3) {
  95 |       date = parseInt(mts[2]);
  96 |     }
  97 |   }
  98 | 
  99 |   date = new Date(date);
 100 |   if (!date || date.toUTCString() == "Invalid Date") {
 101 |     return "";
 102 |   }
 103 | 
 104 |   var map = {
 105 |     "M": date.getMonth() + 1, //月份
 106 |     "d": date.getDate(), //日
 107 |     "h": date.getHours(), //小时
 108 |     "m": date.getMinutes(), //分
 109 |     "s": date.getSeconds(), //秒
 110 |     "q": Math.floor((date.getMonth() + 3) / 3), //季度
 111 |     "S": date.getMilliseconds() //毫秒
 112 |   };
 113 | 
 114 |   format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
 115 |     var v = map[t];
 116 |     if (v !== undefined) {
 117 |       if (all.length > 1) {
 118 |         v = '0' + v;
 119 |         v = v.substr(v.length - 2);
 120 |       }
 121 |       return v;
 122 |     } else if (t === 'y') {
 123 |       return (date.getFullYear() + '').substr(4 - all.length);
 124 |     }
 125 |     return all;
 126 |   });
 127 | 
 128 |   return format;
 129 | }
 130 | function isEqualDateStr(dateStr1, dateStr2) {
 131 |   var dateArr1 = dateStr1.split('/');
 132 |   var dateArr2 = dateStr2.split('/');
 133 |   if (parseInt(dateArr1[0], 10) !== parseInt(dateArr2[0], 10)) {
 134 |     return false;
 135 |   }
 136 |   if (parseInt(dateArr1[1], 10) !== parseInt(dateArr2[1], 10)) {
 137 |     return false;
 138 |   }
 139 |   if (parseInt(dateArr1[2], 10) !== parseInt(dateArr2[2], 10)) {
 140 |     return false;
 141 |   }
 142 |   return true;
 143 | }
 144 | 
 145 | /***/ }),
 146 | /* 1 */
 147 | /***/ (function(module, exports) {
 148 | 
 149 | module.exports = function normalizeComponent (
 150 |   rawScriptExports,
 151 |   compiledTemplate,
 152 |   scopeId,
 153 |   cssModules
 154 | ) {
 155 |   var esModule
 156 |   var scriptExports = rawScriptExports = rawScriptExports || {}
 157 | 
 158 |   // ES6 modules interop
 159 |   var type = typeof rawScriptExports.default
 160 |   if (type === 'object' || type === 'function') {
 161 |     esModule = rawScriptExports
 162 |     scriptExports = rawScriptExports.default
 163 |   }
 164 | 
 165 |   // Vue.extend constructor export interop
 166 |   var options = typeof scriptExports === 'function'
 167 |     ? scriptExports.options
 168 |     : scriptExports
 169 | 
 170 |   // render functions
 171 |   if (compiledTemplate) {
 172 |     options.render = compiledTemplate.render
 173 |     options.staticRenderFns = compiledTemplate.staticRenderFns
 174 |   }
 175 | 
 176 |   // scopedId
 177 |   if (scopeId) {
 178 |     options._scopeId = scopeId
 179 |   }
 180 | 
 181 |   // inject cssModules
 182 |   if (cssModules) {
 183 |     var computed = options.computed || (options.computed = {})
 184 |     Object.keys(cssModules).forEach(function (key) {
 185 |       var module = cssModules[key]
 186 |       computed[key] = function () { return module }
 187 |     })
 188 |   }
 189 | 
 190 |   return {
 191 |     esModule: esModule,
 192 |     exports: scriptExports,
 193 |     options: options
 194 |   }
 195 | }
 196 | 
 197 | 
 198 | /***/ }),
 199 | /* 2 */
 200 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 201 | 
 202 | "use strict";
 203 | /* harmony default export */ __webpack_exports__["a"] = ({
 204 |   en: {
 205 |     dayNames: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
 206 |     monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
 207 |     format: 'MM/yyyy',
 208 |     fullFormat: 'dd/MM/yyyy',
 209 |     dayEventsTitle: 'All Events',
 210 |     notHaveEvents: 'Not Have Events'
 211 |   },
 212 |   zh: {
 213 |     dayNames: ["日", "一", "二", "三", "四", "五", "六"],
 214 |     monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
 215 |     format: 'yyyy年MM月',
 216 |     fullFormat: 'yyyy年MM月dd日',
 217 |     dayEventsTitle: '全部事件',
 218 |     notHaveEvents: '没有事件'
 219 |   },
 220 |   us: {
 221 |     dayNames: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
 222 |     monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
 223 |     format: 'MM/yyyy',
 224 |     fullFormat: 'MM/dd/yyyy',
 225 |     dayEventsTitle: 'All Events',
 226 |     notHaveEvents: 'Not Have Events'
 227 |   },
 228 |   es: {
 229 |     dayNames: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sá"],
 230 |     monthNames: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
 231 |     format: 'MM/yyyy',
 232 |     fullFormat: 'dd/MM/yyyy',
 233 |     dayEventsTitle: 'Todos los eventos',
 234 |     notHaveEvents: 'Nada'
 235 |   },
 236 |   'pt-br': {
 237 |     dayNames: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"],
 238 |     monthNames: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
 239 |     format: 'MM/yyyy',
 240 |     fullFormat: 'dd/MM/yyyy',
 241 |     dayEventsTitle: 'Todos os eventos',
 242 |     notHaveEvents: 'Nenhum evento'
 243 |   },
 244 |   ja: {
 245 |     dayNames: ["日", "月", "火", "水", "木", "金", "土"],
 246 |     monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
 247 |     format: 'yyyy/MM',
 248 |     fullFormat: 'yyyy/MM/dd',
 249 |     dayEventsTitle: '全てのイベント',
 250 |     notHaveEvents: 'イベントはありません'
 251 |   },
 252 |   ko: {
 253 |     dayNames: ["일", "월", "화", "수", "목", "금", "토"],
 254 |     monthNames: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
 255 |     format: 'yyyy/MM',
 256 |     fullFormat: 'yyyy/MM/dd',
 257 |     dayEventsTitle: '모든 이벤트',
 258 |     notHaveEvents: '일정이 없습니다'
 259 |   },
 260 |   fr: {
 261 |     dayNames: ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"],
 262 |     monthNames: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
 263 |     format: 'MM/yyyy',
 264 |     fullFormat: 'dd/MM/yyyy',
 265 |     dayEventsTitle: 'Tous les événements',
 266 |     notHaveEvents: 'Aucun événement'
 267 |   },
 268 |   it: {
 269 |     dayNames: ["Dom", "Lun", "Mar", "Mer", "Gio", "Ven", "Sab"],
 270 |     monthNames: ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"],
 271 |     format: 'MM/yyyy',
 272 |     fullFormat: 'dd/MM/yyyy',
 273 |     dayEventsTitle: 'Tutti gli eventi',
 274 |     notHaveEvents: 'Nessun evento'
 275 |   },
 276 |   ru: {
 277 |     dayNames: ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"],
 278 |     monthNames: ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"],
 279 |     format: 'MM.yyyy',
 280 |     fullFormat: 'dd.MM.yyyy',
 281 |     dayEventsTitle: 'Все события',
 282 |     notHaveEvents: 'События отсутствуют'
 283 |   },
 284 |   sv: {
 285 |     dayNames: ["Sön", "Mån", "Tis", "Ons", "Tor", "Fre", "Lör"],
 286 |     monthNames: ["Januari", "Februari", "Mars", "April", "Maj", "Juni", "Juli", "Augusti", "September", "Oktober", "November", "December"],
 287 |     format: 'MM/yyyy',
 288 |     fullFormat: 'dd/MM/yyyy',
 289 |     dayEventsTitle: 'Alla händelser',
 290 |     notHaveEvents: 'Inga händelser'
 291 |   },
 292 |   de: {
 293 |     dayNames: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
 294 |     monthNames: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
 295 |     format: 'MM/yyyy',
 296 |     fullFormat: 'dd.MM.yyyy',
 297 |     dayEventsTitle: 'Alle Veranstaltungen',
 298 |     notHaveEvents: 'Keine Veranstaltungen'
 299 |   },
 300 |   vi: {
 301 |     dayNames: ["T2", "T3", "T4", "T5", "T6", "T7", "CN"],
 302 |     monthNames: ["Tháng 1", "Tháng 2", "Tháng 3", "Tháng 4", "Tháng 5", "Tháng 6", "Tháng 7", "Tháng 8", "Tháng 9", "Tháng 10", "Tháng 11", "Tháng 12"],
 303 |     format: 'MM/yyyy',
 304 |     fullFormat: 'dd/MM/yyyy',
 305 |     dayEventsTitle: 'Tất cả sự kiện',
 306 |     notHaveEvents: 'Không có sự kiện nào'
 307 |   }
 308 | });
 309 | 
 310 | /***/ }),
 311 | /* 3 */
 312 | /***/ (function(module, exports, __webpack_require__) {
 313 | 
 314 | 
 315 | /* styles */
 316 | __webpack_require__(10)
 317 | 
 318 | var Component = __webpack_require__(1)(
 319 |   /* script */
 320 |   __webpack_require__(8),
 321 |   /* template */
 322 |   __webpack_require__(16),
 323 |   /* scopeId */
 324 |   null,
 325 |   /* cssModules */
 326 |   null
 327 | )
 328 | 
 329 | module.exports = Component.exports
 330 | 
 331 | 
 332 | /***/ }),
 333 | /* 4 */
 334 | /***/ (function(module, exports) {
 335 | 
 336 | module.exports = function(originalModule) {
 337 | 	if(!originalModule.webpackPolyfill) {
 338 | 		var module = Object.create(originalModule);
 339 | 		// module.parent = undefined by default
 340 | 		if(!module.children) module.children = [];
 341 | 		Object.defineProperty(module, "loaded", {
 342 | 			enumerable: true,
 343 | 			get: function() {
 344 | 				return module.l;
 345 | 			}
 346 | 		});
 347 | 		Object.defineProperty(module, "id", {
 348 | 			enumerable: true,
 349 | 			get: function() {
 350 | 				return module.i;
 351 | 			}
 352 | 		});
 353 | 		Object.defineProperty(module, "exports", {
 354 | 			enumerable: true,
 355 | 		});
 356 | 		module.webpackPolyfill = 1;
 357 | 	}
 358 | 	return module;
 359 | };
 360 | 
 361 | 
 362 | /***/ }),
 363 | /* 5 */
 364 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 365 | 
 366 | "use strict";
 367 | Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 368 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__i18n_js__ = __webpack_require__(2);
 369 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__tools_js__ = __webpack_require__(0);
 370 | //
 371 | //
 372 | //
 373 | //
 374 | //
 375 | //
 376 | //
 377 | 
 378 | 
 379 | 
 380 | /* harmony default export */ __webpack_exports__["default"] = ({
 381 |   data: function data() {
 382 |     return {
 383 |       i18n: __WEBPACK_IMPORTED_MODULE_0__i18n_js__["a" /* default */]
 384 |     };
 385 |   },
 386 | 
 387 |   props: {
 388 |     event: {
 389 |       type: Object,
 390 |       required: true
 391 |     },
 392 |     index: {
 393 |       type: Number,
 394 |       required: true
 395 |     },
 396 |     locale: {
 397 |       type: String,
 398 |       required: true
 399 |     }
 400 |   },
 401 |   methods: {
 402 |     dateTimeFormatter: __WEBPACK_IMPORTED_MODULE_1__tools_js__["b" /* dateTimeFormatter */]
 403 |   }
 404 | });
 405 | 
 406 | /***/ }),
 407 | /* 6 */
 408 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 409 | 
 410 | "use strict";
 411 | Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 412 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__i18n_js__ = __webpack_require__(2);
 413 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__tools_js__ = __webpack_require__(0);
 414 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__cal_event_item_vue__ = __webpack_require__(11);
 415 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__cal_event_item_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__cal_event_item_vue__);
 416 | //
 417 | //
 418 | //
 419 | //
 420 | //
 421 | //
 422 | //
 423 | //
 424 | //
 425 | //
 426 | //
 427 | //
 428 | //
 429 | //
 430 | //
 431 | 
 432 | 
 433 | 
 434 | 
 435 | /* harmony default export */ __webpack_exports__["default"] = ({
 436 |   name: 'cal-events',
 437 |   data: function data() {
 438 |     return {
 439 |       i18n: __WEBPACK_IMPORTED_MODULE_0__i18n_js__["a" /* default */]
 440 |     };
 441 |   },
 442 | 
 443 |   components: {
 444 |     'cal-event-item': __WEBPACK_IMPORTED_MODULE_2__cal_event_item_vue___default.a
 445 |   },
 446 |   props: {
 447 |     title: String,
 448 |     dayEvents: {
 449 |       type: Object,
 450 |       required: true
 451 |     },
 452 |     locale: {
 453 |       type: String,
 454 |       required: true
 455 |     },
 456 |     color: {
 457 |       type: String,
 458 |       required: true
 459 |     }
 460 |   },
 461 |   computed: {
 462 |     dayEventsTitle: function dayEventsTitle() {
 463 |       if (this.title) return this.title;
 464 |       if (this.dayEvents.date !== 'all') {
 465 |         var tempDate = void 0;
 466 |         if (this.dayEvents.events.length !== 0) {
 467 |           tempDate = Date.parse(new Date(this.dayEvents.events[0].date));
 468 |           return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__tools_js__["b" /* dateTimeFormatter */])(tempDate, __WEBPACK_IMPORTED_MODULE_0__i18n_js__["a" /* default */][this.locale].fullFormat);
 469 |         } else {
 470 |           tempDate = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__tools_js__["b" /* dateTimeFormatter */])(Date.parse(new Date(this.dayEvents.date)), __WEBPACK_IMPORTED_MODULE_0__i18n_js__["a" /* default */][this.locale].fullFormat);
 471 |           return tempDate + ' ' + __WEBPACK_IMPORTED_MODULE_0__i18n_js__["a" /* default */][this.locale].notHaveEvents;
 472 |         }
 473 |       } else {
 474 |         return __WEBPACK_IMPORTED_MODULE_0__i18n_js__["a" /* default */][this.locale].dayEventsTitle;
 475 |       }
 476 |     },
 477 |     events: function events() {
 478 |       return this.dayEvents.events;
 479 |     },
 480 |     bgColor: function bgColor() {
 481 |       return { backgroundColor: this.color };
 482 |     }
 483 |   },
 484 |   methods: {
 485 |     dateTimeFormatter: __WEBPACK_IMPORTED_MODULE_1__tools_js__["b" /* dateTimeFormatter */]
 486 |   }
 487 | });
 488 | 
 489 | /***/ }),
 490 | /* 7 */
 491 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 492 | 
 493 | "use strict";
 494 | Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 495 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__i18n_js__ = __webpack_require__(2);
 496 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__tools_js__ = __webpack_require__(0);
 497 | //
 498 | //
 499 | //
 500 | //
 501 | //
 502 | //
 503 | //
 504 | //
 505 | //
 506 | //
 507 | //
 508 | //
 509 | //
 510 | //
 511 | //
 512 | //
 513 | //
 514 | //
 515 | //
 516 | //
 517 | //
 518 | //
 519 | //
 520 | //
 521 | //
 522 | //
 523 | //
 524 | //
 525 | //
 526 | //
 527 | //
 528 | //
 529 | //
 530 | //
 531 | //
 532 | //
 533 | //
 534 | //
 535 | //
 536 | 
 537 | 
 538 | 
 539 | 
 540 | var inBrowser = typeof window !== 'undefined';
 541 | /* harmony default export */ __webpack_exports__["default"] = ({
 542 |   name: 'cal-panel',
 543 |   data: function data() {
 544 |     return {
 545 |       i18n: __WEBPACK_IMPORTED_MODULE_0__i18n_js__["a" /* default */]
 546 |     };
 547 |   },
 548 | 
 549 |   props: {
 550 |     events: {
 551 |       type: Array,
 552 |       required: true
 553 |     },
 554 |     calendar: {
 555 |       type: Object,
 556 |       required: true
 557 |     },
 558 |     selectedDay: {
 559 |       type: String,
 560 |       required: false
 561 |     }
 562 |   },
 563 |   computed: {
 564 |     dayList: function dayList() {
 565 |       var firstDay = new Date(this.calendar.params.curYear, this.calendar.params.curMonth, 1);
 566 |       var dayOfWeek = firstDay.getDay();
 567 |       // 根据当前日期计算偏移量 // Calculate the offset based on the current date
 568 |       if (this.calendar.options.weekStartOn > dayOfWeek) {
 569 |         dayOfWeek = dayOfWeek - this.calendar.options.weekStartOn + 7;
 570 |       } else {
 571 |         dayOfWeek = dayOfWeek - this.calendar.options.weekStartOn;
 572 |       }
 573 | 
 574 |       var startDate = new Date(firstDay);
 575 |       startDate.setDate(firstDay.getDate() - dayOfWeek);
 576 | 
 577 |       var item = void 0,
 578 |           status = void 0,
 579 |           tempArr = [],
 580 |           tempItem = void 0;
 581 |       for (var i = 0; i < 42; i++) {
 582 |         item = new Date(startDate);
 583 |         item.setDate(startDate.getDate() + i);
 584 | 
 585 |         if (this.calendar.params.curMonth === item.getMonth()) {
 586 |           status = 1;
 587 |         } else {
 588 |           status = 0;
 589 |         }
 590 |         tempItem = {
 591 |           date: item.getFullYear() + '/' + (item.getMonth() + 1) + '/' + item.getDate(),
 592 |           status: status,
 593 |           customClass: []
 594 |         };
 595 |         this.events.forEach(function (event) {
 596 |           if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__tools_js__["a" /* isEqualDateStr */])(event.date, tempItem.date)) {
 597 |             tempItem.title = event.title;
 598 |             tempItem.desc = event.desc || '';
 599 |             if (event.customClass) tempItem.customClass.push(event.customClass);
 600 |           }
 601 |         });
 602 |         tempArr.push(tempItem);
 603 |       }
 604 |       return tempArr;
 605 |     },
 606 |     today: function today() {
 607 |       var dateObj = new Date();
 608 |       return dateObj.getFullYear() + '/' + (dateObj.getMonth() + 1) + '/' + dateObj.getDate();
 609 |     },
 610 |     curYearMonth: function curYearMonth() {
 611 |       var tempDate = Date.parse(new Date(this.calendar.params.curYear + '/' + (this.calendar.params.curMonth + 1) + '/01'));
 612 |       return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__tools_js__["b" /* dateTimeFormatter */])(tempDate, this.i18n[this.calendar.options.locale].format);
 613 |     },
 614 |     customColor: function customColor() {
 615 |       return this.calendar.options.color;
 616 |     }
 617 |   },
 618 |   methods: {
 619 |     nextMonth: function nextMonth() {
 620 |       this.$EventCalendar.nextMonth();
 621 |       this.$emit('month-changed', this.curYearMonth);
 622 |     },
 623 |     preMonth: function preMonth() {
 624 |       this.$EventCalendar.preMonth();
 625 |       this.$emit('month-changed', this.curYearMonth);
 626 |     },
 627 |     handleChangeCurday: function handleChangeCurday(date) {
 628 |       if (date.status) {
 629 |         this.$emit('cur-day-changed', date.date);
 630 |       }
 631 |     }
 632 |   }
 633 | });
 634 | 
 635 | /***/ }),
 636 | /* 8 */
 637 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 638 | 
 639 | "use strict";
 640 | Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 641 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__tools_js__ = __webpack_require__(0);
 642 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__components_cal_events_vue__ = __webpack_require__(12);
 643 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__components_cal_events_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__components_cal_events_vue__);
 644 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__components_cal_panel_vue__ = __webpack_require__(13);
 645 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__components_cal_panel_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__components_cal_panel_vue__);
 646 | //
 647 | //
 648 | //
 649 | //
 650 | //
 651 | //
 652 | //
 653 | //
 654 | //
 655 | //
 656 | //
 657 | //
 658 | //
 659 | //
 660 | //
 661 | //
 662 | //
 663 | //
 664 | 
 665 | 
 666 | 
 667 | 
 668 | 
 669 | 
 670 | var inBrowser = typeof window !== 'undefined';
 671 | /* harmony default export */ __webpack_exports__["default"] = ({
 672 |   name: 'vue-event-calendar',
 673 |   components: {
 674 |     'cal-events': __WEBPACK_IMPORTED_MODULE_1__components_cal_events_vue___default.a,
 675 |     'cal-panel': __WEBPACK_IMPORTED_MODULE_2__components_cal_panel_vue___default.a
 676 |   },
 677 |   data: function data() {
 678 |     return {
 679 |       selectedDayEvents: {
 680 |         date: 'all',
 681 |         events: this.events || [] //default show all event
 682 |       }
 683 |     };
 684 |   },
 685 | 
 686 |   props: {
 687 |     title: String,
 688 |     events: {
 689 |       type: Array,
 690 |       required: true,
 691 |       default: [],
 692 |       validator: function validator(events) {
 693 |         var validate = true;
 694 |         events.forEach(function (event, index) {
 695 |           if (!event.date) {
 696 |             console.error('Vue-Event-Calendar-Error:' + 'Prop events Wrong at index ' + index);
 697 |             validate = false;
 698 |           }
 699 |         });
 700 |         return validate;
 701 |       }
 702 |     }
 703 |   },
 704 |   computed: {
 705 |     calendarOptions: function calendarOptions() {
 706 |       var dateObj = new Date();
 707 |       if (inBrowser) {
 708 |         return window.VueCalendarBarEventBus.CALENDAR_EVENTS_DATA;
 709 |       } else {
 710 |         return {
 711 |           options: {
 712 |             locale: 'en', //zh
 713 |             color: ' #f29543'
 714 |           },
 715 |           params: {
 716 |             curYear: dateObj.getFullYear(),
 717 |             curMonth: dateObj.getMonth(),
 718 |             curDate: dateObj.getDate(),
 719 |             curEventsDate: 'all'
 720 |           }
 721 |         };
 722 |       }
 723 |     },
 724 |     calendarParams: function calendarParams() {
 725 |       var dateObj = new Date();
 726 |       if (inBrowser) {
 727 |         return window.VueCalendarBarEventBus.CALENDAR_EVENTS_DATA.params;
 728 |       } else {
 729 |         return {
 730 |           curYear: dateObj.getFullYear(),
 731 |           curMonth: dateObj.getMonth(),
 732 |           curDate: dateObj.getDate(),
 733 |           curEventsDate: 'all'
 734 |         };
 735 |       }
 736 |     }
 737 |   },
 738 |   created: function created() {
 739 |     if (this.calendarParams.curEventsDate !== 'all') {
 740 |       this.handleChangeCurDay(this.calendarParams.curEventsDate);
 741 |     }
 742 |   },
 743 | 
 744 |   methods: {
 745 |     handleChangeCurDay: function handleChangeCurDay(date) {
 746 |       var events = this.events.filter(function (event) {
 747 |         return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__tools_js__["a" /* isEqualDateStr */])(event.date, date);
 748 |       });
 749 |       if (events.length > 0) {
 750 |         this.selectedDayEvents = {
 751 |           date: date,
 752 |           events: events
 753 |         };
 754 |       }
 755 |       this.$emit('day-changed', {
 756 |         date: date,
 757 |         events: events
 758 |       });
 759 |     },
 760 |     handleMonthChanged: function handleMonthChanged(yearMonth) {
 761 |       this.$emit('month-changed', yearMonth);
 762 |     }
 763 |   },
 764 |   watch: {
 765 |     calendarParams: function calendarParams() {
 766 |       var _this = this;
 767 | 
 768 |       if (this.calendarParams.curEventsDate !== 'all') {
 769 |         var events = this.events.filter(function (event) {
 770 |           return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__tools_js__["a" /* isEqualDateStr */])(event.date, _this.calendarParams.curEventsDate);
 771 |         });
 772 |         this.selectedDayEvents = {
 773 |           date: this.calendarParams.curEventsDate,
 774 |           events: events
 775 |         };
 776 |       } else {
 777 |         this.selectedDayEvents = {
 778 |           date: 'all',
 779 |           events: this.events
 780 |         };
 781 |       }
 782 |     },
 783 |     events: function events() {
 784 |       this.selectedDayEvents = {
 785 |         date: 'all',
 786 |         events: this.events || []
 787 |       };
 788 |     }
 789 |   }
 790 | });
 791 | 
 792 | /***/ }),
 793 | /* 9 */
 794 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 795 | 
 796 | "use strict";
 797 | Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 798 | /* WEBPACK VAR INJECTION */(function(module) {/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__vue_event_calendar_vue__ = __webpack_require__(3);
 799 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__vue_event_calendar_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__vue_event_calendar_vue__);
 800 | 
 801 | 
 802 | var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 803 | 
 804 | 
 805 | 
 806 | function install(Vue) {
 807 |   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 808 | 
 809 |   var isVueNext = Vue.version.split('.')[0] === '2';
 810 |   var inBrowser = typeof window !== 'undefined';
 811 |   var dateObj = new Date();
 812 |   var DEFAULT_OPTION = {
 813 |     locale: 'zh', // en
 814 |     color: ' #f29543',
 815 |     className: 'selected-day',
 816 |     weekStartOn: 0 // 0 mean sunday
 817 |   };
 818 |   var Calendar = {
 819 |     $vm: null,
 820 |     bindEventBus: function bindEventBus(vm) {
 821 |       this.$vm = vm;
 822 |     },
 823 |     toDate: function toDate(dateString) {
 824 |       if (dateString === 'all') {
 825 |         this.$vm.CALENDAR_EVENTS_DATA.params = {
 826 |           curYear: dateObj.getFullYear(),
 827 |           curMonth: dateObj.getMonth(),
 828 |           curDate: dateObj.getDate(),
 829 |           curEventsDate: 'all'
 830 |         };
 831 |       } else {
 832 |         var dateArr = dateString.split('/');
 833 |         dateArr = dateArr.map(function (item) {
 834 |           return parseInt(item, 10);
 835 |         });
 836 |         this.$vm.CALENDAR_EVENTS_DATA.params = {
 837 |           curYear: dateArr[0],
 838 |           curMonth: dateArr[1] - 1,
 839 |           curDate: dateArr[2],
 840 |           curEventsDate: dateString
 841 |         };
 842 |       }
 843 |     },
 844 |     nextMonth: function nextMonth() {
 845 |       if (this.$vm.CALENDAR_EVENTS_DATA.params.curMonth < 11) {
 846 |         this.$vm.CALENDAR_EVENTS_DATA.params.curMonth++;
 847 |       } else {
 848 |         this.$vm.CALENDAR_EVENTS_DATA.params.curYear++;
 849 |         this.$vm.CALENDAR_EVENTS_DATA.params.curMonth = 0;
 850 |       }
 851 |     },
 852 |     preMonth: function preMonth() {
 853 |       if (this.$vm.CALENDAR_EVENTS_DATA.params.curMonth > 0) {
 854 |         this.$vm.CALENDAR_EVENTS_DATA.params.curMonth--;
 855 |       } else {
 856 |         this.$vm.CALENDAR_EVENTS_DATA.params.curYear--;
 857 |         this.$vm.CALENDAR_EVENTS_DATA.params.curMonth = 11;
 858 |       }
 859 |     }
 860 |   };
 861 | 
 862 |   var calendarOptions = Object.assign(DEFAULT_OPTION, options);
 863 | 
 864 |   var VueCalendarBarEventBus = new Vue({
 865 |     data: {
 866 |       CALENDAR_EVENTS_DATA: {
 867 |         options: calendarOptions,
 868 |         params: {
 869 |           curYear: dateObj.getFullYear(),
 870 |           curMonth: dateObj.getMonth(),
 871 |           curDate: dateObj.getDate(),
 872 |           curEventsDate: 'all'
 873 |         }
 874 |       }
 875 |     }
 876 |   });
 877 | 
 878 |   if (inBrowser) {
 879 |     window.VueCalendarBarEventBus = VueCalendarBarEventBus;
 880 |     Calendar.bindEventBus(VueCalendarBarEventBus);
 881 |   }
 882 | 
 883 |   Vue.component('vue-event-calendar', __WEBPACK_IMPORTED_MODULE_0__vue_event_calendar_vue___default.a);
 884 | 
 885 |   Vue.prototype.$EventCalendar = Calendar;
 886 | }
 887 | 
 888 | /* harmony default export */ __webpack_exports__["default"] = (install);
 889 | 
 890 | if (( false ? 'undefined' : _typeof(module)) === 'object' && module.exports) {
 891 |   module.exports.install = install;
 892 | }
 893 | /* WEBPACK VAR INJECTION */}.call(__webpack_exports__, __webpack_require__(4)(module)))
 894 | 
 895 | /***/ }),
 896 | /* 10 */
 897 | /***/ (function(module, exports) {
 898 | 
 899 | // removed by extract-text-webpack-plugin
 900 | 
 901 | /***/ }),
 902 | /* 11 */
 903 | /***/ (function(module, exports, __webpack_require__) {
 904 | 
 905 | var Component = __webpack_require__(1)(
 906 |   /* script */
 907 |   __webpack_require__(5),
 908 |   /* template */
 909 |   __webpack_require__(14),
 910 |   /* scopeId */
 911 |   null,
 912 |   /* cssModules */
 913 |   null
 914 | )
 915 | 
 916 | module.exports = Component.exports
 917 | 
 918 | 
 919 | /***/ }),
 920 | /* 12 */
 921 | /***/ (function(module, exports, __webpack_require__) {
 922 | 
 923 | var Component = __webpack_require__(1)(
 924 |   /* script */
 925 |   __webpack_require__(6),
 926 |   /* template */
 927 |   __webpack_require__(15),
 928 |   /* scopeId */
 929 |   null,
 930 |   /* cssModules */
 931 |   null
 932 | )
 933 | 
 934 | module.exports = Component.exports
 935 | 
 936 | 
 937 | /***/ }),
 938 | /* 13 */
 939 | /***/ (function(module, exports, __webpack_require__) {
 940 | 
 941 | var Component = __webpack_require__(1)(
 942 |   /* script */
 943 |   __webpack_require__(7),
 944 |   /* template */
 945 |   __webpack_require__(17),
 946 |   /* scopeId */
 947 |   null,
 948 |   /* cssModules */
 949 |   null
 950 | )
 951 | 
 952 | module.exports = Component.exports
 953 | 
 954 | 
 955 | /***/ }),
 956 | /* 14 */
 957 | /***/ (function(module, exports) {
 958 | 
 959 | module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
 960 |   return _c('div', {
 961 |     staticClass: "wrapper"
 962 |   }, [_c('h3', {
 963 |     staticClass: "title"
 964 |   }, [_vm._v(_vm._s(_vm.index + 1) + ". " + _vm._s(_vm.event.title))]), _vm._v(" "), _c('p', {
 965 |     staticClass: "time"
 966 |   }, [_vm._v(_vm._s(_vm.dateTimeFormatter(Date.parse(new Date(_vm.event.date)), _vm.i18n[_vm.locale].fullFormat)))]), _vm._v(" "), _c('p', {
 967 |     staticClass: "desc"
 968 |   }, [_vm._v(_vm._s(_vm.event.desc))])])
 969 | },staticRenderFns: []}
 970 | 
 971 | /***/ }),
 972 | /* 15 */
 973 | /***/ (function(module, exports) {
 974 | 
 975 | module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
 976 |   return _c('div', {
 977 |     staticClass: "events-wrapper",
 978 |     style: (_vm.bgColor)
 979 |   }, [_c('h2', {
 980 |     staticClass: "date"
 981 |   }, [_vm._v("\n    " + _vm._s(_vm.dayEventsTitle) + "\n  ")]), _vm._v(" "), _c('div', {
 982 |     staticClass: "cal-events"
 983 |   }, [_vm._t("default", _vm._l((_vm.events), function(event, index) {
 984 |     return _c('div', {
 985 |       staticClass: "event-item"
 986 |     }, [_c('cal-event-item', {
 987 |       attrs: {
 988 |         "event": event,
 989 |         "index": index,
 990 |         "locale": _vm.locale
 991 |       }
 992 |     })], 1)
 993 |   }))], 2)])
 994 | },staticRenderFns: []}
 995 | 
 996 | /***/ }),
 997 | /* 16 */
 998 | /***/ (function(module, exports) {
 999 | 
1000 | module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
1001 |   return _c('div', {
1002 |     staticClass: "__vev_calendar-wrapper"
1003 |   }, [_c('cal-panel', {
1004 |     attrs: {
1005 |       "events": _vm.events,
1006 |       "calendar": _vm.calendarOptions,
1007 |       "selectedDay": _vm.selectedDayEvents.date
1008 |     },
1009 |     on: {
1010 |       "cur-day-changed": _vm.handleChangeCurDay,
1011 |       "month-changed": _vm.handleMonthChanged
1012 |     }
1013 |   }), _vm._v(" "), _c('cal-events', {
1014 |     attrs: {
1015 |       "title": _vm.title,
1016 |       "dayEvents": _vm.selectedDayEvents,
1017 |       "locale": _vm.calendarOptions.options.locale,
1018 |       "color": _vm.calendarOptions.options.color
1019 |     }
1020 |   }, [_vm._t("default", null, {
1021 |     showEvents: _vm.selectedDayEvents.events
1022 |   })], 2)], 1)
1023 | },staticRenderFns: []}
1024 | 
1025 | /***/ }),
1026 | /* 17 */
1027 | /***/ (function(module, exports) {
1028 | 
1029 | module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
1030 |   return _c('div', {
1031 |     staticClass: "cal-wrapper"
1032 |   }, [_c('div', {
1033 |     staticClass: "cal-header"
1034 |   }, [_c('div', {
1035 |     staticClass: "l",
1036 |     on: {
1037 |       "click": _vm.preMonth
1038 |     }
1039 |   }, [_c('div', {
1040 |     staticClass: "arrow-left icon"
1041 |   }, [_vm._v(" ")])]), _vm._v(" "), _c('div', {
1042 |     staticClass: "title"
1043 |   }, [_vm._v(_vm._s(_vm.curYearMonth))]), _vm._v(" "), _c('div', {
1044 |     staticClass: "r",
1045 |     on: {
1046 |       "click": _vm.nextMonth
1047 |     }
1048 |   }, [_c('div', {
1049 |     staticClass: "arrow-right icon"
1050 |   }, [_vm._v(" ")])])]), _vm._v(" "), _c('div', {
1051 |     staticClass: "cal-body"
1052 |   }, [_c('div', {
1053 |     staticClass: "weeks"
1054 |   }, _vm._l((_vm.i18n[_vm.calendar.options.locale].dayNames), function(dayName, dayIndex) {
1055 |     return _c('span', {
1056 |       key: dayIndex,
1057 |       staticClass: "item"
1058 |     }, [_vm._v("\n        " + _vm._s(_vm.i18n[_vm.calendar.options.locale].dayNames[(dayIndex + _vm.calendar.options.weekStartOn) % 7]) + "\n      ")])
1059 |   })), _vm._v(" "), _c('div', {
1060 |     staticClass: "dates"
1061 |   }, _vm._l((_vm.dayList), function(date) {
1062 |     return _c('div', {
1063 |       key: date.date,
1064 |       staticClass: "item",
1065 |       class: [( _obj = {
1066 |         today: date.status ? (_vm.today == date.date) : false,
1067 |         event: date.status ? (date.title != undefined) : false
1068 |       }, _obj[_vm.calendar.options.className] = (date.date == _vm.selectedDay), _obj ) ].concat( date.customClass)
1069 |     }, [_c('p', {
1070 |       staticClass: "date-num",
1071 |       style: ({
1072 |         color: date.title != undefined ? ((date.date == _vm.selectedDay) ? '#fff' : _vm.customColor) : 'inherit'
1073 |       }),
1074 |       on: {
1075 |         "click": function($event) {
1076 |           _vm.handleChangeCurday(date)
1077 |         }
1078 |       }
1079 |     }, [_vm._v("\n          " + _vm._s(date.status ? date.date.split('/')[2] : ' '))]), _vm._v(" "), (date.status ? (_vm.today == date.date) : false) ? _c('span', {
1080 |       staticClass: "is-today",
1081 |       style: ({
1082 |         backgroundColor: _vm.customColor
1083 |       })
1084 |     }) : _vm._e(), _vm._v(" "), (date.status ? (date.title != undefined) : false) ? _c('span', {
1085 |       staticClass: "is-event",
1086 |       style: ({
1087 |         borderColor: _vm.customColor,
1088 |         backgroundColor: (date.date == _vm.selectedDay) ? _vm.customColor : 'inherit'
1089 |       })
1090 |     }) : _vm._e()])
1091 |     var _obj;
1092 |   }))])])
1093 | },staticRenderFns: []}
1094 | 
1095 | /***/ })
1096 | /******/ ]);
1097 | });
1098 | //# sourceMappingURL=index.js.map


--------------------------------------------------------------------------------
/dist/index.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack:///webpack/universalModuleDefinition","webpack:///webpack/bootstrap 03b3af5e52d959bc9803","webpack:///./src/tools.js","webpack:///./~/vue-loader/lib/component-normalizer.js","webpack:///./src/i18n.js","webpack:///./src/vue-event-calendar.vue","webpack:///(webpack)/buildin/harmony-module.js","webpack:///cal-event-item.vue","webpack:///cal-events.vue","webpack:///cal-panel.vue","webpack:///vue-event-calendar.vue","webpack:///./src/index.js","webpack:///./src/vue-event-calendar.vue?06fb","webpack:///./src/components/cal-event-item.vue","webpack:///./src/components/cal-events.vue","webpack:///./src/components/cal-panel.vue","webpack:///./src/components/cal-event-item.vue?f278","webpack:///./src/components/cal-events.vue?5124","webpack:///./src/vue-event-calendar.vue?36d4","webpack:///./src/components/cal-panel.vue?2364"],"names":["dateTimeFormatter","date","format","mts","match","length","parseInt","Date","toUTCString","map","getMonth","getDate","getHours","getMinutes","getSeconds","Math","floor","getMilliseconds","replace","all","t","v","undefined","substr","getFullYear","isEqualDateStr","dateStr1","dateStr2","dateArr1","split","dateArr2","en","dayNames","monthNames","fullFormat","dayEventsTitle","notHaveEvents","zh","us","es","ja","ko","fr","it","ru","sv","de","vi","install","Vue","options","isVueNext","version","inBrowser","window","dateObj","DEFAULT_OPTION","locale","color","className","weekStartOn","Calendar","$vm","bindEventBus","vm","toDate","dateString","CALENDAR_EVENTS_DATA","params","curYear","curMonth","curDate","curEventsDate","dateArr","item","nextMonth","preMonth","calendarOptions","Object","assign","VueCalendarBarEventBus","data","component","prototype","$EventCalendar","module","exports"],"mappings":"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AFA;AAGA;;;sBAGA;AAFA;;WAIA;;YAEA;gBAEA;AAHA;;YAKA;gBAEA;AAHA;;YAKA;gBAGA;AAJA;AAVA;;8CAgBA;kCACA;yCACA;YACA;gDACA;kEACA;8LACA;eACA;mOACA;yGACA;AACA;aACA;sFACA;AACA;AACA;8BACA;4BACA;AACA;gCACA;qCACA;AAEA;AAtBA;;AAyBA;AAFA;AAhDA,G;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACoBA;AACA;;AAEA;AACA;QAEA;wBACA;;AAGA;AAFA;AAGA;;;;YAGA;gBAEA;AAHA;;YAKA;gBAEA;AAHA;;YAKA;gBAGA;AAJA;AATA;;gCAeA;2FACA;+BACA;AACA;yDACA;oEACA;aACA;sDACA;AAEA;;+BACA;6CAEA;;;;;UACA;mCACA;wBACA;2CAEA;;+DACA;mBACA;eACA;mBACA;AACA;;8EAEA;kBACA;uBAEA;AAJA;6CAKA;mIACA;mCACA;0CACA;mEACA;AACA;AACA;qBACA;AACA;aACA;AACA;4BACA;wBACA;oFACA;AACA;0CACA;+GACA;2JACA;AACA;wCACA;mCACA;AAEA;AAnDA;;oCAqDA;0BACA;uCACA;AACA;kCACA;0BACA;uCACA;AACA;0DACA;uBACA;2CACA;AACA;AAEA;AAdA;AAzEA,G;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC1BA;;AAEA;AACA;;AAEA;AACA;QAEA;;kBAEA;iBAEA;AAHA;wBAIA;;;cAGA;kCAGA;AAJA;AADA;AAMA;;;WAEA;;YAEA;gBACA;eACA;4CACA;uBACA;+CACA;2BACA;wFACA;uBACA;AACA;AACA;eACA;AAGA;AAfA;AAFA;;gDAmBA;wBACA;qBACA;6CACA;aACA;;;0BAGA;mBAEA;AAHA;;6BAKA;8BACA;6BACA;2BAGA;AANA;AALA;AAYA;AACA;8CACA;wBACA;qBACA;kEACA;aACA;;2BAEA;4BACA;2BACA;yBAEA;AALA;AAMA;AAEA;AAjCA;8BAkCA;qDACA;kDACA;AACA;AACA;;;0DAEA;uDACA;oHACA;AACA;6BACA;;gBAEA;kBAEA;A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tC,OAAf,GAAyBA,OAAzB;AACD,C;;;;;;;ACxFD,yC;;;;;;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;;;;;;ACXA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;;;;;;ACXA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;;;;;;ACXA,gBAAgB,mBAAmB,aAAa,0BAA0B;AAC1E;AACA;AACA,GAAG;AACH;AACA,GAAG;AACH;AACA,GAAG;AACH;AACA,GAAG;AACH,CAAC,qB;;;;;;ACVD,gBAAgB,mBAAmB,aAAa,0BAA0B;AAC1E;AACA;AACA;AACA,GAAG;AACH;AACA,GAAG;AACH;AACA,GAAG;AACH;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA,KAAK;AACL,GAAG;AACH,CAAC,qB;;;;;;ACnBD,gBAAgB,mBAAmB,aAAa,0BAA0B;AAC1E;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA,GAAG;AACH,CAAC,qB;;;;;;ACvBD,gBAAgB,mBAAmB,aAAa,0BAA0B;AAC1E;AACA;AACA,GAAG;AACH;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,GAAG;AACH;AACA,GAAG;AACH;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,GAAG;AACH;AACA,GAAG;AACH;AACA,GAAG;AACH;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL,GAAG;AACH;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP,KAAK;AACL;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA,OAAO;AACP,KAAK;AACL;AACA;AACA;AACA;AACA,OAAO;AACP,KAAK;AACL;AACA,GAAG;AACH,CAAC,qB","file":"index.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"VueEventCalendar\"] = factory();\n\telse\n\t\troot[\"VueEventCalendar\"] = factory();\n})(this, function() {\nreturn \n\n\n// WEBPACK FOOTER //\n// webpack/universalModuleDefinition"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// identity function for calling harmony imports with the correct context\n \t__webpack_require__.i = function(value) { return value; };\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 9);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 03b3af5e52d959bc9803","export function dateTimeFormatter (date ,format) {\n  // 时间格式化辅助函数 date:毫秒数 format:'yyyy-MM-dd hh:mm:ss'\n  if (!date || date == \"\") {\n    return \"\"\n  }\n\n  if (typeof date === \"string\") {\n    var mts = date.match(/(\\/Date\\((\\d+)\\)\\/)/)\n    if (mts && mts.length >= 3) {\n      date = parseInt(mts[2])\n    }\n  }\n\n  date = new Date(date)\n  if (!date || date.toUTCString() == \"Invalid Date\") {\n    return \"\"\n  }\n\n  var map = {\n    \"M\": date.getMonth() + 1, //月份\n    \"d\": date.getDate(), //日\n    \"h\": date.getHours(), //小时\n    \"m\": date.getMinutes(), //分\n    \"s\": date.getSeconds(), //秒\n    \"q\": Math.floor((date.getMonth() + 3) / 3), //季度\n    \"S\": date.getMilliseconds() //毫秒\n  }\n\n  format = format.replace(/([yMdhmsqS])+/g, function(all, t){\n    var v = map[t]\n    if(v !== undefined){\n      if(all.length > 1){\n        v = '0' + v\n        v = v.substr(v.length-2)\n      }\n      return v\n    }\n    else if(t === 'y'){\n      return (date.getFullYear() + '').substr(4 - all.length)\n    }\n    return all\n  })\n\n  return format\n}\nexport function isEqualDateStr (dateStr1, dateStr2) {\n  let dateArr1 = dateStr1.split('/')\n  let dateArr2 = dateStr2.split('/')\n  if (parseInt(dateArr1[0], 10) !== parseInt(dateArr2[0], 10)) {\n    return false\n  }\n  if (parseInt(dateArr1[1], 10) !== parseInt(dateArr2[1], 10)) {\n    return false\n  }\n  if (parseInt(dateArr1[2], 10) !== parseInt(dateArr2[2], 10)) {\n    return false\n  }\n  return true\n}\n\n\n// WEBPACK FOOTER //\n// ./src/tools.js","module.exports = function normalizeComponent (\n  rawScriptExports,\n  compiledTemplate,\n  scopeId,\n  cssModules\n) {\n  var esModule\n  var scriptExports = rawScriptExports = rawScriptExports || {}\n\n  // ES6 modules interop\n  var type = typeof rawScriptExports.default\n  if (type === 'object' || type === 'function') {\n    esModule = rawScriptExports\n    scriptExports = rawScriptExports.default\n  }\n\n  // Vue.extend constructor export interop\n  var options = typeof scriptExports === 'function'\n    ? scriptExports.options\n    : scriptExports\n\n  // render functions\n  if (compiledTemplate) {\n    options.render = compiledTemplate.render\n    options.staticRenderFns = compiledTemplate.staticRenderFns\n  }\n\n  // scopedId\n  if (scopeId) {\n    options._scopeId = scopeId\n  }\n\n  // inject cssModules\n  if (cssModules) {\n    var computed = options.computed || (options.computed = {})\n    Object.keys(cssModules).forEach(function (key) {\n      var module = cssModules[key]\n      computed[key] = function () { return module }\n    })\n  }\n\n  return {\n    esModule: esModule,\n    exports: scriptExports,\n    options: options\n  }\n}\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/component-normalizer.js\n// module id = 1\n// module chunks = 0","export default {\n  en: {\n    dayNames: [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"],\n    monthNames: [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"],\n    format: 'MM/yyyy',\n    fullFormat: 'dd/MM/yyyy',\n    dayEventsTitle: 'All Events',\n    notHaveEvents: 'Not Have Events'\n  },\n  zh: {\n    dayNames: [\"日\", \"一\", \"二\", \"三\", \"四\", \"五\", \"六\"],\n    monthNames: [\"一月\", \"二月\", \"三月\", \"四月\", \"五月\", \"六月\", \"七月\", \"八月\", \"九月\", \"十月\", \"十一月\", \"十二月\"],\n    format : 'yyyy年MM月',\n    fullFormat: 'yyyy年MM月dd日',\n    dayEventsTitle: '全部事件',\n    notHaveEvents: '没有事件'\n  },\n  us: {\n    dayNames: [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"],\n    monthNames: [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"],\n    format: 'MM/yyyy',\n    fullFormat: 'MM/dd/yyyy',\n    dayEventsTitle: 'All Events',\n    notHaveEvents: 'Not Have Events'\n  },\n  es: {\n    dayNames: [\"Do\", \"Lu\", \"Ma\", \"Mi\", \"Ju\", \"Vi\", \"Sá\"],\n    monthNames: [\"Enero\", \"Febrero\", \"Marzo\", \"Abril\", \"Mayo\", \"Junio\", \"Julio\", \"Agosto\", \"Septiembre\", \"Octubre\", \"Noviembre\", \"Diciembre\"],\n    format : 'MM/yyyy',\n    fullFormat: 'dd/MM/yyyy',\n    dayEventsTitle: 'Todos los eventos',\n    notHaveEvents: 'Nada'\n  },\n  'pt-br': {\n    dayNames: [\"Dom\", \"Seg\", \"Ter\", \"Qua\", \"Qui\", \"Sex\", \"Sáb\"],\n    monthNames: [\"Janeiro\", \"Fevereiro\", \"Março\", \"Abril\", \"Maio\", \"Junho\", \"Julho\", \"Agosto\", \"Setembro\", \"Outubro\", \"Novembro\", \"Dezembro\"],\n    format : 'MM/yyyy',\n    fullFormat: 'dd/MM/yyyy',\n    dayEventsTitle: 'Todos os eventos',\n    notHaveEvents: 'Nenhum evento'\n  },\n  ja: {\n    dayNames: [\"日\", \"月\", \"火\", \"水\", \"木\", \"金\", \"土\"],\n    monthNames: [\"1月\", \"2月\", \"3月\", \"4月\", \"5月\", \"6月\", \"7月\", \"8月\", \"9月\", \"10月\", \"11月\", \"12月\"],\n    format: 'yyyy/MM',\n    fullFormat: 'yyyy/MM/dd',\n    dayEventsTitle: '全てのイベント',\n    notHaveEvents: 'イベントはありません'\n  },\n  ko: {\n    dayNames: [\"일\", \"월\", \"화\", \"수\", \"목\", \"금\", \"토\"],\n    monthNames: [\"1월\", \"2월\", \"3월\", \"4월\", \"5월\", \"6월\", \"7월\", \"8월\", \"9월\", \"10월\", \"11월\", \"12월\"],\n    format: 'yyyy/MM',\n    fullFormat: 'yyyy/MM/dd',\n    dayEventsTitle: '모든 이벤트',\n    notHaveEvents: '일정이 없습니다'\n  },\n  fr: {\n    dayNames: [\"Dim\", \"Lun\", \"Mar\", \"Mer\", \"Jeu\", \"Ven\", \"Sam\"],\n    monthNames: [\"Janvier\", \"Février\", \"Mars\", \"Avril\", \"Mai\", \"Juin\", \"Juillet\", \"Août\", \"Septembre\", \"Octobre\", \"Novembre\", \"Décembre\"],\n    format : 'MM/yyyy',\n    fullFormat: 'dd/MM/yyyy',\n    dayEventsTitle: 'Tous les événements',\n    notHaveEvents: 'Aucun événement'\n  },\n  it: {\n    dayNames: [\"Dom\", \"Lun\", \"Mar\", \"Mer\", \"Gio\", \"Ven\", \"Sab\"],\n    monthNames: [\"Gennaio\", \"Febbraio\", \"Marzo\", \"Aprile\", \"Maggio\", \"Giugno\", \"Luglio\", \"Agosto\", \"Settembre\", \"Ottobre\", \"Novembre\", \"Dicembre\"],\n    format : 'MM/yyyy',\n    fullFormat: 'dd/MM/yyyy',\n    dayEventsTitle: 'Tutti gli eventi',\n    notHaveEvents: 'Nessun evento'\n  },\n  ru: {\n    dayNames: [\"Вс\", \"Пн\", \"Вт\", \"Ср\", \"Чт\", \"Пт\", \"Сб\"],\n    monthNames: [\"Январь\", \"Февраль\", \"Март\", \"Апрель\", \"Май\", \"Июнь\", \"Июль\", \"Август\", \"Сентябрь\", \"Октябрь\", \"Ноябрь\", \"Декабрь\"],\n    format: 'MM.yyyy',\n    fullFormat: 'dd.MM.yyyy',\n    dayEventsTitle: 'Все события',\n    notHaveEvents: 'События отсутствуют'\n  },\n  sv: {\n    dayNames: [\"Sön\", \"Mån\", \"Tis\", \"Ons\", \"Tor\", \"Fre\", \"Lör\"],\n    monthNames: [\"Januari\", \"Februari\", \"Mars\", \"April\", \"Maj\", \"Juni\", \"Juli\", \"Augusti\", \"September\", \"Oktober\", \"November\", \"December\"],\n    format: 'MM/yyyy',\n    fullFormat: 'dd/MM/yyyy',\n    dayEventsTitle: 'Alla händelser',\n    notHaveEvents: 'Inga händelser'\n  },\n  de: {\n    dayNames: [\"So\", \"Mo\", \"Di\", \"Mi\", \"Do\", \"Fr\", \"Sa\"],\n    monthNames: [\"Januar\", \"Februar\", \"März\", \"April\", \"Mai\", \"Juni\", \"Juli\", \"August\", \"September\", \"Oktober\", \"November\", \"Dezember\"],\n    format: 'MM/yyyy',\n    fullFormat: 'dd.MM.yyyy',\n    dayEventsTitle: 'Alle Veranstaltungen',\n    notHaveEvents: 'Keine Veranstaltungen'\n  },\n  vi: {\n    dayNames: [\"T2\", \"T3\", \"T4\", \"T5\", \"T6\", \"T7\", \"CN\"],\n    monthNames: [\"Tháng 1\", \"Tháng 2\", \"Tháng 3\", \"Tháng 4\", \"Tháng 5\", \"Tháng 6\", \"Tháng 7\", \"Tháng 8\", \"Tháng 9\", \"Tháng 10\", \"Tháng 11\", \"Tháng 12\"],\n    format: 'MM/yyyy',\n    fullFormat: 'dd/MM/yyyy',\n    dayEventsTitle: 'Tất cả sự kiện',\n    notHaveEvents: 'Không có sự kiện nào'\n  }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/i18n.js","\n/* styles */\nrequire(\"!!../node_modules/extract-text-webpack-plugin/loader.js?{\\\"omit\\\":1,\\\"remove\\\":true}!vue-style-loader!css-loader!../node_modules/vue-loader/lib/style-rewriter?id=data-v-5698f75c!less-loader!../node_modules/vue-loader/lib/selector?type=styles&index=0!./vue-event-calendar.vue\")\n\nvar Component = require(\"!../node_modules/vue-loader/lib/component-normalizer\")(\n  /* script */\n  require(\"!!babel-loader!../node_modules/vue-loader/lib/selector?type=script&index=0!./vue-event-calendar.vue\"),\n  /* template */\n  require(\"!!../node_modules/vue-loader/lib/template-compiler?id=data-v-5698f75c!../node_modules/vue-loader/lib/selector?type=template&index=0!./vue-event-calendar.vue\"),\n  /* scopeId */\n  null,\n  /* cssModules */\n  null\n)\n\nmodule.exports = Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/vue-event-calendar.vue\n// module id = 3\n// module chunks = 0","module.exports = function(originalModule) {\r\n\tif(!originalModule.webpackPolyfill) {\r\n\t\tvar module = Object.create(originalModule);\r\n\t\t// module.parent = undefined by default\r\n\t\tif(!module.children) module.children = [];\r\n\t\tObject.defineProperty(module, \"loaded\", {\r\n\t\t\tenumerable: true,\r\n\t\t\tget: function() {\r\n\t\t\t\treturn module.l;\r\n\t\t\t}\r\n\t\t});\r\n\t\tObject.defineProperty(module, \"id\", {\r\n\t\t\tenumerable: true,\r\n\t\t\tget: function() {\r\n\t\t\t\treturn module.i;\r\n\t\t\t}\r\n\t\t});\r\n\t\tObject.defineProperty(module, \"exports\", {\r\n\t\t\tenumerable: true,\r\n\t\t});\r\n\t\tmodule.webpackPolyfill = 1;\r\n\t}\r\n\treturn module;\r\n};\r\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// (webpack)/buildin/harmony-module.js\n// module id = 4\n// module chunks = 0","<template>\n  <div class=\"wrapper\">\n    <h3 class=\"title\">{{index+1}}. {{event.title}}</h3>\n    <p class=\"time\">{{dateTimeFormatter(Date.parse(new Date(event.date)),i18n[locale].fullFormat)}}</p>\n    <p class=\"desc\">{{event.desc}}</p>\n  </div>\n</template>\n<script>\nimport i18n from '../i18n.js'\nimport { dateTimeFormatter } from '../tools.js'\nexport default {\n  data () {\n    return {\n      i18n\n    }\n  },\n  props: {\n    event: {\n      type: Object,\n      required: true\n    },\n    index: {\n      type: Number,\n      required: true\n    },\n    locale: {\n      type: String,\n      required: true\n    }\n  },\n  methods: {\n    dateTimeFormatter\n  }\n}\n</script>\n\n\n// WEBPACK FOOTER //\n// cal-event-item.vue?f2637dce","<template>\n  <div class=\"events-wrapper\" :style=\"bgColor\">\n    <h2 class=\"date\">\n      {{dayEventsTitle}}\n    </h2>\n    <div class=\"cal-events\">\n      <slot>\n        <div v-for=\"(event, index) in events\" class=\"event-item\">\n          <cal-event-item :event=\"event\" :index=\"index\" :locale=\"locale\"></cal-event-item>\n        </div>\n      </slot>\n    </div>\n  </div>\n</template>\n\n<script>\nimport i18n from '../i18n.js'\nimport { dateTimeFormatter } from '../tools.js'\nimport calEventItem from './cal-event-item.vue'\nexport default {\n  name: 'cal-events',\n  data () {\n    return {\n      i18n\n    }\n  },\n  components: {\n    'cal-event-item': calEventItem\n  },\n  props: {\n    title: String,\n    dayEvents: {\n      type: Object,\n      required: true\n    },\n    locale: {\n      type: String,\n      required: true\n    },\n    color: {\n      type: String,\n      required: true\n    }\n  },\n  computed: {\n    dayEventsTitle () {\n      if (this.title) return this.title\n      if (this.dayEvents.date !== 'all') {\n        let tempDate\n        if (this.dayEvents.events.length !== 0) {\n          tempDate = Date.parse(new Date(this.dayEvents.events[0].date))\n          return dateTimeFormatter(tempDate, i18n[this.locale].fullFormat)\n        } else {\n          tempDate = dateTimeFormatter(Date.parse(new Date(this.dayEvents.date)), i18n[this.locale].fullFormat)\n          return `${tempDate} ${i18n[this.locale].notHaveEvents}`\n        }\n      } else {\n        return i18n[this.locale].dayEventsTitle\n      }\n    },\n    events () {\n      return this.dayEvents.events\n    },\n    bgColor () {\n      return {backgroundColor: this.color}\n    }\n  },\n  methods: {\n    dateTimeFormatter\n  }\n}\n</script>\n\n\n// WEBPACK FOOTER //\n// cal-events.vue?e11eb872","<template>\n  <div class=\"cal-wrapper\">\n    <div class=\"cal-header\">\n      <div class=\"l\" @click=\"preMonth\"><div class=\"arrow-left icon\">&nbsp</div></div>\n      <div class=\"title\">{{curYearMonth}}</div>\n      <div class=\"r\" @click=\"nextMonth\"><div class=\"arrow-right icon\">&nbsp</div></div>\n    </div>\n    <div class=\"cal-body\">\n      <div class=\"weeks\">\n        <span\n          v-for=\"(dayName, dayIndex) in i18n[calendar.options.locale].dayNames\"\n          class=\"item\"\n          :key=\"dayIndex\"\n          >\n          {{i18n[calendar.options.locale].dayNames[(dayIndex + calendar.options.weekStartOn) % 7]}}\n        </span>\n      </div>\n      <div class=\"dates\" >\n        <div v-for=\"date in dayList\" class=\"item\"\n          :class=\"[{\n            today: date.status ? (today == date.date) : false,\n            event: date.status ? (date.title != undefined) : false,\n            [calendar.options.className] : (date.date == selectedDay)\n          }, ...date.customClass]\"\n          :key=\"date.date\"\n          >\n          <p class=\"date-num\"\n            @click=\"handleChangeCurday(date)\"\n            :style=\"{color: date.title != undefined ? ((date.date == selectedDay) ? '#fff' : customColor) : 'inherit'}\">\n            {{date.status ? date.date.split('/')[2] : '&nbsp'}}</p>\n          <span v-if=\"date.status ? (today == date.date) : false\" class=\"is-today\" :style=\"{backgroundColor: customColor }\" ></span>\n          <span v-if=\"date.status ? (date.title != undefined) : false\" class=\"is-event\"\n            :style=\"{borderColor: customColor, backgroundColor: (date.date == selectedDay) ? customColor : 'inherit'}\"></span>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport i18n from '../i18n.js'\nimport { dateTimeFormatter, isEqualDateStr} from '../tools.js'\n\nconst inBrowser = typeof window !== 'undefined'\nexport default {\n  name: 'cal-panel',\n  data () {\n    return {\n      i18n\n    }\n  },\n  props: {\n    events: {\n      type: Array,\n      required: true\n    },\n    calendar: {\n      type: Object,\n      required: true\n    },\n    selectedDay: {\n      type: String,\n      required: false\n    }\n  },\n  computed: {\n    dayList () {\n      let firstDay = new Date(this.calendar.params.curYear, this.calendar.params.curMonth, 1)\n      let dayOfWeek = firstDay.getDay()\n      // 根据当前日期计算偏移量 // Calculate the offset based on the current date\n      if (this.calendar.options.weekStartOn > dayOfWeek) {\n        dayOfWeek = dayOfWeek - this.calendar.options.weekStartOn + 7\n      } else {\n        dayOfWeek = dayOfWeek - this.calendar.options.weekStartOn\n      }\n\n      let startDate = new Date(firstDay)\n      startDate.setDate(firstDay.getDate() - dayOfWeek)\n\n      let item, status, tempArr = [], tempItem\n      for (let i = 0 ; i < 42 ; i++) {\n          item = new Date(startDate);\n          item.setDate(startDate.getDate() + i);\n\n          if (this.calendar.params.curMonth === item.getMonth()) {\n            status = 1\n          } else {\n            status = 0\n          }\n          tempItem = {\n            date: `${item.getFullYear()}/${item.getMonth()+1}/${item.getDate()}`,\n            status: status,\n            customClass: []\n          }\n          this.events.forEach((event) => {\n            if (isEqualDateStr(event.date, tempItem.date)) {\n              tempItem.title = event.title\n              tempItem.desc = event.desc || ''\n              if (event.customClass) tempItem.customClass.push(event.customClass)\n            }\n          })\n          tempArr.push(tempItem)\n      }\n      return tempArr\n    },\n    today () {\n      let dateObj = new Date()\n      return `${dateObj.getFullYear()}/${dateObj.getMonth()+1}/${dateObj.getDate()}`\n    },\n    curYearMonth () {\n      let tempDate = Date.parse(new Date(`${this.calendar.params.curYear}/${this.calendar.params.curMonth+1}/01`))\n      return dateTimeFormatter(tempDate, this.i18n[this.calendar.options.locale].format)\n    },\n    customColor () {\n      return this.calendar.options.color\n    }\n  },\n  methods: {\n    nextMonth () {\n      this.$EventCalendar.nextMonth()\n      this.$emit('month-changed', this.curYearMonth)\n    },\n    preMonth () {\n      this.$EventCalendar.preMonth()\n      this.$emit('month-changed', this.curYearMonth)\n    },\n    handleChangeCurday (date) {\n      if (date.status) {\n        this.$emit('cur-day-changed', date.date)\n      }\n    }\n  }\n}\n</script>\n\n\n\n// WEBPACK FOOTER //\n// cal-panel.vue?4d553b16","<template>\n  <div class=\"__vev_calendar-wrapper\">\n    <cal-panel\n      :events=\"events\"\n      :calendar=\"calendarOptions\"\n      :selectedDay='selectedDayEvents.date'\n      @cur-day-changed=\"handleChangeCurDay\"\n      @month-changed=\"handleMonthChanged\">\n    </cal-panel>\n    <cal-events\n      :title=\"title\"\n      :dayEvents=\"selectedDayEvents\"\n      :locale=\"calendarOptions.options.locale\"\n      :color=\"calendarOptions.options.color\">\n      <slot :showEvents=\"selectedDayEvents.events\"></slot>\n    </cal-events>\n  </div>\n</template>\n<script>\nimport { isEqualDateStr} from './tools.js'\n\nimport calEvents from './components/cal-events.vue'\nimport calPanel from './components/cal-panel.vue'\n\nconst inBrowser = typeof window !== 'undefined'\nexport default {\n  name: 'vue-event-calendar',\n  components: {\n    'cal-events': calEvents,\n    'cal-panel': calPanel\n  },\n  data () {\n    return {\n      selectedDayEvents: {\n        date: 'all',\n        events: this.events || []  //default show all event\n      }\n    }\n  },\n  props: {\n    title: String,\n    events: {\n      type: Array,\n      required: true,\n      default: [],\n      validator (events) {\n        let validate = true\n        events.forEach((event, index) => {\n          if (!event.date) {\n            console.error('Vue-Event-Calendar-Error:' + 'Prop events Wrong at index ' + index)\n            validate = false\n          }\n        })\n        return validate\n      }\n    }\n  },\n  computed: {\n    calendarOptions () {\n      let dateObj = new Date()\n      if (inBrowser) {\n          return window.VueCalendarBarEventBus.CALENDAR_EVENTS_DATA\n      } else {\n        return {\n          options: {\n            locale: 'en', //zh\n            color: ' #f29543'\n          },\n          params: {\n              curYear: dateObj.getFullYear(),\n              curMonth: dateObj.getMonth(),\n              curDate: dateObj.getDate(),\n              curEventsDate: 'all'\n          }\n        }\n      }\n    },\n    calendarParams () {\n      let dateObj = new Date()\n      if (inBrowser) {\n          return window.VueCalendarBarEventBus.CALENDAR_EVENTS_DATA.params\n      } else {\n        return {\n          curYear: dateObj.getFullYear(),\n          curMonth: dateObj.getMonth(),\n          curDate: dateObj.getDate(),\n          curEventsDate: 'all'\n        }\n      }\n    }\n  },\n  created () {\n    if (this.calendarParams.curEventsDate !== 'all') {\n      this.handleChangeCurDay(this.calendarParams.curEventsDate)\n    }\n  },\n  methods: {\n    handleChangeCurDay (date) {\n      let events = this.events.filter(function(event) {\n        return isEqualDateStr(event.date, date)\n      })\n      if (events.length > 0) {\n        this.selectedDayEvents = {\n          date: date,\n          events: events\n        }\n      }\n      this.$emit('day-changed', {\n        date: date,\n        events: events\n      })\n    },\n    handleMonthChanged (yearMonth) {\n      this.$emit('month-changed', yearMonth)\n    }\n  },\n  watch: {\n    calendarParams () {\n      if (this.calendarParams.curEventsDate !== 'all') {\n        let events = this.events.filter(event => {\n          return isEqualDateStr(event.date, this.calendarParams.curEventsDate)\n        })\n        this.selectedDayEvents = {\n          date: this.calendarParams.curEventsDate,\n          events\n        }\n      } else {\n        this.selectedDayEvents = {\n          date: 'all',\n          events: this.events\n        }\n      }\n    },\n    events () {\n      this.selectedDayEvents = {\n        date: 'all',\n        events: this.events || []\n      }\n    }\n  }\n}\n</script>\n<style lang=\"less\">\n@base-orange: #f29543;\n@white: #ffffff;\n@gray: #e0e0e0;\n@gray-dark: #b1b1b1;\n@large-padding: 15px;\n@small-padding: 10px;\n\n@icon-border-size: 1px;\n@media screen and (min-width: 768px) {\n  .__vev_calendar-wrapper{\n    max-width: 1200px;\n    margin: 0 auto;\n    .cal-wrapper{\n      width: 50%;\n      padding: 100px 50px;\n      .date-num{\n        line-height: 50px;\n      }\n    }\n    .events-wrapper{\n      width: 50%;\n      background-color: @base-orange;\n      color: @white;\n      padding: 40px 45px;\n      position: absolute;\n      left: 50%;\n      top: 0;\n      bottom: 0;\n    }\n  }\n}\n@media screen and (max-width: 768px) {\n  .__vev_calendar-wrapper{\n    .cal-wrapper{\n      width: 100%;\n      padding: 10px 5px;\n      .date-num{\n        line-height: 42px;\n      }\n    }\n    .events-wrapper{\n      width: 100%;\n      margin-top: 10px;\n      padding: 10px;\n    }\n  }\n}\n.__vev_calendar-wrapper{\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  *{\n    box-sizing: border-box;\n  }\n  ::-webkit-scrollbar{\n    width: 8px;\n    height: 8px;\n  }\n  ::-webkit-scrollbar-track {\n    box-shadow: inset 0 0 2px rgba(0,0,0,.2);\n    border-radius: 5px;\n  }\n  ::-webkit-scrollbar-thumb {\n    border-radius: 5px;\n    background: rgba(0,0,0,.2);\n  }\n  .cal-wrapper{\n    .cal-header{\n      position: relative;\n      width: 100%;\n      background-color: @white;\n      // box-shadow: 0 6px 5px rgba(0,0,0,.1);\n      font-weight: 500;\n      overflow: hidden;\n      padding-bottom: 10px;\n      &>div{\n        float: left;\n        line-height: 20px;\n        padding: @large-padding;\n      }\n      .title{\n        width: 60%;\n        text-align: center;\n      }\n      .l{\n        text-align: left;\n        width: 20%;\n        cursor: pointer;\n        user-select: none;\n        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n      }\n      .r{\n        text-align: right;\n        width: 20%;\n        cursor: pointer;\n        user-select: none;\n        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n      }\n    }\n    .cal-body{\n      width: 100%;\n      .weeks{\n        width: 100%;\n        overflow: hidden;\n        text-align: center;\n        font-size: 1rem;\n        .item{\n          line-height: 50px;\n          float: left;\n          width: 14.285%;\n        }\n      }\n      .dates{\n        width: 100%;\n        overflow: hidden;\n        text-align: center;\n        font-size: 1rem;\n        .item{\n          position: relative;\n          float: left;\n          display: block;\n          width: 14.285%;\n          cursor: default;\n          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n          .date-num{\n            font-size: 1rem;\n            position: relative;\n            z-index: 3;\n          }\n          &.event{\n            cursor: pointer;\n          }\n          &.selected-day{\n            .is-event{\n              background-color: @base-orange;\n            }\n          }\n          .is-event{\n            content: '';\n            border: 1px solid @base-orange;\n            background-color: #fff;\n            border-radius: 50%;\n            width: 36px;\n            height: 36px;\n            position: absolute;\n            left: 50%;\n            top: 50%;\n            z-index: 1;\n            margin-left: -18px;\n            margin-top: -19px;\n          }\n          .is-today{\n            content: '';\n            background-color: @base-orange;\n            border-radius: 50%;\n            opacity: .8;\n            width: 12px;\n            height: 4px;\n            position: absolute;\n            left: 50%;\n            top: 50%;\n            z-index: 2;\n            margin-left: -6px;\n            margin-top: 8px;\n          }\n        }\n      }\n    }\n  }\n  .events-wrapper{\n    border-radius: 10px;\n    .cal-events{\n      height: 95%;\n      overflow-y: auto;\n      padding: 0 5px;\n      margin: 15px 0;\n    }\n    .date{\n      max-width: 60%;\n      min-width: 200px;\n      text-align: center;\n      color: @white;\n      background-color: rgba(0, 0, 0, 0.2);\n      border-radius: 20px;\n      margin: 0 auto;\n      font-size: 22px;\n    }\n    .event-item{\n      padding: 5px 20px;\n      margin-top: 15px;\n      box-shadow: 0 3px 11px 2px rgba(0,0,0,.1);\n      background-color: #fff;\n      border-radius: 5px;\n      color: #323232;\n      position: relative;\n      &:first-child{\n        margin-top: 0;\n      }\n      .title{\n        height: 40px;\n        line-height: 40px;\n        color: #323232;\n        font-size: 16px;\n        border-bottom: 1px solid #f2f2f2;\n      }\n      .time{\n        position: absolute;\n        right: 30px;\n        top: 17px;\n        color: #9b9b9b;\n        font-size: 14px;\n      }\n      .desc{\n        color: #9b9b9b;\n        font-size: 14px;\n        padding: 7px 0;\n      }\n    }\n  }\n  .arrow-left.icon {\n    color: #000;\n    position: absolute;\n    left: 6%;\n    margin-top: 10px;\n  }\n  .arrow-left.icon:before {\n    content: '';\n    position: absolute;\n    left: 1px;\n    top: -5px;\n    width: 10px;\n    height: 10px;\n    border-top: solid @icon-border-size currentColor;\n    border-right: solid @icon-border-size currentColor;\n    -webkit-transform: rotate(-135deg);\n            transform: rotate(-135deg);\n  }\n  .arrow-right.icon {\n    color: #000;\n    position: absolute;\n    right: 6%;\n    margin-top: 10px;\n  }\n  .arrow-right.icon:before {\n    content: '';\n    position: absolute;\n    right: 1px;\n    top: -5px;\n    width: 10px;\n    height: 10px;\n    border-top: solid @icon-border-size currentColor;\n    border-right: solid @icon-border-size currentColor;\n    -webkit-transform: rotate(45deg);\n            transform: rotate(45deg);\n  }\n  h3, p{\n    margin: 0;\n    padding: 0;\n  }\n}\n\n</style>\n\n\n\n// WEBPACK FOOTER //\n// vue-event-calendar.vue?41cbfad1","'use strict'\n\nimport vueEventCalendar from './vue-event-calendar.vue'\n\nfunction install (Vue, options = {}) {\n  const isVueNext = Vue.version.split('.')[0] === '2'\n  const inBrowser = typeof window !== 'undefined'\n  let dateObj = new Date()\n  const DEFAULT_OPTION = {\n    locale: 'zh', // en\n    color: ' #f29543',\n    className:'selected-day',\n    weekStartOn: 0 // 0 mean sunday\n  }\n  let Calendar = {\n    $vm: null,\n    bindEventBus (vm) {\n      this.$vm = vm\n    },\n    toDate (dateString) {\n      if (dateString === 'all') {\n        this.$vm.CALENDAR_EVENTS_DATA.params = {\n          curYear: dateObj.getFullYear(),\n          curMonth: dateObj.getMonth(),\n          curDate: dateObj.getDate(),\n          curEventsDate: 'all'\n        }\n      } else {\n        let dateArr = dateString.split('/')\n        dateArr = dateArr.map((item) => {\n          return parseInt(item, 10)\n        })\n        this.$vm.CALENDAR_EVENTS_DATA.params = {\n          curYear: dateArr[0],\n          curMonth: dateArr[1]-1,\n          curDate: dateArr[2],\n          curEventsDate: dateString\n        }\n      }\n    },\n    nextMonth () {\n      if (this.$vm.CALENDAR_EVENTS_DATA.params.curMonth < 11) {\n        this.$vm.CALENDAR_EVENTS_DATA.params.curMonth++\n      } else {\n        this.$vm.CALENDAR_EVENTS_DATA.params.curYear++\n        this.$vm.CALENDAR_EVENTS_DATA.params.curMonth = 0\n      }\n    },\n    preMonth () {\n      if (this.$vm.CALENDAR_EVENTS_DATA.params.curMonth > 0) {\n        this.$vm.CALENDAR_EVENTS_DATA.params.curMonth--\n      } else {\n        this.$vm.CALENDAR_EVENTS_DATA.params.curYear--\n        this.$vm.CALENDAR_EVENTS_DATA.params.curMonth = 11\n      }\n    }\n  }\n\n  const calendarOptions = Object.assign(DEFAULT_OPTION, options)\n\n  const VueCalendarBarEventBus = new Vue({\n    data: {\n      CALENDAR_EVENTS_DATA: {\n        options: calendarOptions,\n        params: {\n          curYear: dateObj.getFullYear(),\n          curMonth: dateObj.getMonth(),\n          curDate: dateObj.getDate(),\n          curEventsDate: 'all'\n        }\n      }\n    }\n  })\n\n  if (inBrowser) {\n    window.VueCalendarBarEventBus = VueCalendarBarEventBus\n    Calendar.bindEventBus(VueCalendarBarEventBus)\n  }\n\n  Vue.component('vue-event-calendar', vueEventCalendar)\n\n  Vue.prototype.$EventCalendar = Calendar\n}\n\nexport default install\n\nif (typeof module === 'object' && module.exports) {\n  module.exports.install = install\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/index.js","// removed by extract-text-webpack-plugin\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/extract-text-webpack-plugin/loader.js?{\"omit\":1,\"remove\":true}!./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-5698f75c!./~/less-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/vue-event-calendar.vue\n// module id = 10\n// module chunks = 0","var Component = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")(\n  /* script */\n  require(\"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./cal-event-item.vue\"),\n  /* template */\n  require(\"!!../../node_modules/vue-loader/lib/template-compiler?id=data-v-1bef712c!../../node_modules/vue-loader/lib/selector?type=template&index=0!./cal-event-item.vue\"),\n  /* scopeId */\n  null,\n  /* cssModules */\n  null\n)\n\nmodule.exports = Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/components/cal-event-item.vue\n// module id = 11\n// module chunks = 0","var Component = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")(\n  /* script */\n  require(\"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./cal-events.vue\"),\n  /* template */\n  require(\"!!../../node_modules/vue-loader/lib/template-compiler?id=data-v-2d5f1ac6!../../node_modules/vue-loader/lib/selector?type=template&index=0!./cal-events.vue\"),\n  /* scopeId */\n  null,\n  /* cssModules */\n  null\n)\n\nmodule.exports = Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/components/cal-events.vue\n// module id = 12\n// module chunks = 0","var Component = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")(\n  /* script */\n  require(\"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./cal-panel.vue\"),\n  /* template */\n  require(\"!!../../node_modules/vue-loader/lib/template-compiler?id=data-v-f83c2ca0!../../node_modules/vue-loader/lib/selector?type=template&index=0!./cal-panel.vue\"),\n  /* scopeId */\n  null,\n  /* cssModules */\n  null\n)\n\nmodule.exports = Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/components/cal-panel.vue\n// module id = 13\n// module chunks = 0","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n  return _c('div', {\n    staticClass: \"wrapper\"\n  }, [_c('h3', {\n    staticClass: \"title\"\n  }, [_vm._v(_vm._s(_vm.index + 1) + \". \" + _vm._s(_vm.event.title))]), _vm._v(\" \"), _c('p', {\n    staticClass: \"time\"\n  }, [_vm._v(_vm._s(_vm.dateTimeFormatter(Date.parse(new Date(_vm.event.date)), _vm.i18n[_vm.locale].fullFormat)))]), _vm._v(\" \"), _c('p', {\n    staticClass: \"desc\"\n  }, [_vm._v(_vm._s(_vm.event.desc))])])\n},staticRenderFns: []}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/template-compiler.js?id=data-v-1bef712c!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/cal-event-item.vue\n// module id = 14\n// module chunks = 0","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n  return _c('div', {\n    staticClass: \"events-wrapper\",\n    style: (_vm.bgColor)\n  }, [_c('h2', {\n    staticClass: \"date\"\n  }, [_vm._v(\"\\n    \" + _vm._s(_vm.dayEventsTitle) + \"\\n  \")]), _vm._v(\" \"), _c('div', {\n    staticClass: \"cal-events\"\n  }, [_vm._t(\"default\", _vm._l((_vm.events), function(event, index) {\n    return _c('div', {\n      staticClass: \"event-item\"\n    }, [_c('cal-event-item', {\n      attrs: {\n        \"event\": event,\n        \"index\": index,\n        \"locale\": _vm.locale\n      }\n    })], 1)\n  }))], 2)])\n},staticRenderFns: []}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/template-compiler.js?id=data-v-2d5f1ac6!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/cal-events.vue\n// module id = 15\n// module chunks = 0","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n  return _c('div', {\n    staticClass: \"__vev_calendar-wrapper\"\n  }, [_c('cal-panel', {\n    attrs: {\n      \"events\": _vm.events,\n      \"calendar\": _vm.calendarOptions,\n      \"selectedDay\": _vm.selectedDayEvents.date\n    },\n    on: {\n      \"cur-day-changed\": _vm.handleChangeCurDay,\n      \"month-changed\": _vm.handleMonthChanged\n    }\n  }), _vm._v(\" \"), _c('cal-events', {\n    attrs: {\n      \"title\": _vm.title,\n      \"dayEvents\": _vm.selectedDayEvents,\n      \"locale\": _vm.calendarOptions.options.locale,\n      \"color\": _vm.calendarOptions.options.color\n    }\n  }, [_vm._t(\"default\", null, {\n    showEvents: _vm.selectedDayEvents.events\n  })], 2)], 1)\n},staticRenderFns: []}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/template-compiler.js?id=data-v-5698f75c!./~/vue-loader/lib/selector.js?type=template&index=0!./src/vue-event-calendar.vue\n// module id = 16\n// module chunks = 0","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n  return _c('div', {\n    staticClass: \"cal-wrapper\"\n  }, [_c('div', {\n    staticClass: \"cal-header\"\n  }, [_c('div', {\n    staticClass: \"l\",\n    on: {\n      \"click\": _vm.preMonth\n    }\n  }, [_c('div', {\n    staticClass: \"arrow-left icon\"\n  }, [_vm._v(\" \")])]), _vm._v(\" \"), _c('div', {\n    staticClass: \"title\"\n  }, [_vm._v(_vm._s(_vm.curYearMonth))]), _vm._v(\" \"), _c('div', {\n    staticClass: \"r\",\n    on: {\n      \"click\": _vm.nextMonth\n    }\n  }, [_c('div', {\n    staticClass: \"arrow-right icon\"\n  }, [_vm._v(\" \")])])]), _vm._v(\" \"), _c('div', {\n    staticClass: \"cal-body\"\n  }, [_c('div', {\n    staticClass: \"weeks\"\n  }, _vm._l((_vm.i18n[_vm.calendar.options.locale].dayNames), function(dayName, dayIndex) {\n    return _c('span', {\n      key: dayIndex,\n      staticClass: \"item\"\n    }, [_vm._v(\"\\n        \" + _vm._s(_vm.i18n[_vm.calendar.options.locale].dayNames[(dayIndex + _vm.calendar.options.weekStartOn) % 7]) + \"\\n      \")])\n  })), _vm._v(\" \"), _c('div', {\n    staticClass: \"dates\"\n  }, _vm._l((_vm.dayList), function(date) {\n    return _c('div', {\n      key: date.date,\n      staticClass: \"item\",\n      class: [( _obj = {\n        today: date.status ? (_vm.today == date.date) : false,\n        event: date.status ? (date.title != undefined) : false\n      }, _obj[_vm.calendar.options.className] = (date.date == _vm.selectedDay), _obj ) ].concat( date.customClass)\n    }, [_c('p', {\n      staticClass: \"date-num\",\n      style: ({\n        color: date.title != undefined ? ((date.date == _vm.selectedDay) ? '#fff' : _vm.customColor) : 'inherit'\n      }),\n      on: {\n        \"click\": function($event) {\n          _vm.handleChangeCurday(date)\n        }\n      }\n    }, [_vm._v(\"\\n          \" + _vm._s(date.status ? date.date.split('/')[2] : ' '))]), _vm._v(\" \"), (date.status ? (_vm.today == date.date) : false) ? _c('span', {\n      staticClass: \"is-today\",\n      style: ({\n        backgroundColor: _vm.customColor\n      })\n    }) : _vm._e(), _vm._v(\" \"), (date.status ? (date.title != undefined) : false) ? _c('span', {\n      staticClass: \"is-event\",\n      style: ({\n        borderColor: _vm.customColor,\n        backgroundColor: (date.date == _vm.selectedDay) ? _vm.customColor : 'inherit'\n      })\n    }) : _vm._e()])\n    var _obj;\n  }))])])\n},staticRenderFns: []}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/template-compiler.js?id=data-v-f83c2ca0!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/cal-panel.vue\n// module id = 17\n// module chunks = 0"],"sourceRoot":""}


--------------------------------------------------------------------------------
/dist/style.css:
--------------------------------------------------------------------------------
1 | @media screen and (min-width:768px){.__vev_calendar-wrapper{max-width:1200px;margin:0 auto}.__vev_calendar-wrapper .cal-wrapper{width:50%;padding:100px 50px}.__vev_calendar-wrapper .cal-wrapper .date-num{line-height:50px}.__vev_calendar-wrapper .events-wrapper{width:50%;background-color:#f29543;color:#fff;padding:40px 45px;position:absolute;left:50%;top:0;bottom:0}}@media screen and (max-width:768px){.__vev_calendar-wrapper .cal-wrapper{width:100%;padding:10px 5px}.__vev_calendar-wrapper .cal-wrapper .date-num{line-height:42px}.__vev_calendar-wrapper .events-wrapper{width:100%;margin-top:10px;padding:10px}}.__vev_calendar-wrapper{position:relative;overflow:hidden;width:100%}.__vev_calendar-wrapper *{box-sizing:border-box}.__vev_calendar-wrapper ::-webkit-scrollbar{width:8px;height:8px}.__vev_calendar-wrapper ::-webkit-scrollbar-track{box-shadow:inset 0 0 2px rgba(0,0,0,.2);border-radius:5px}.__vev_calendar-wrapper ::-webkit-scrollbar-thumb{border-radius:5px;background:rgba(0,0,0,.2)}.__vev_calendar-wrapper .cal-wrapper .cal-header{position:relative;width:100%;background-color:#fff;font-weight:500;overflow:hidden;padding-bottom:10px}.__vev_calendar-wrapper .cal-wrapper .cal-header>div{float:left;line-height:20px;padding:15px}.__vev_calendar-wrapper .cal-wrapper .cal-header .title{width:60%;text-align:center}.__vev_calendar-wrapper .cal-wrapper .cal-header .l{text-align:left;width:20%;cursor:pointer;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.__vev_calendar-wrapper .cal-wrapper .cal-header .r{text-align:right;width:20%;cursor:pointer;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.__vev_calendar-wrapper .cal-wrapper .cal-body{width:100%}.__vev_calendar-wrapper .cal-wrapper .cal-body .weeks{width:100%;overflow:hidden;text-align:center;font-size:1rem}.__vev_calendar-wrapper .cal-wrapper .cal-body .weeks .item{line-height:50px;float:left;width:14.285%}.__vev_calendar-wrapper .cal-wrapper .cal-body .dates{width:100%;overflow:hidden;text-align:center;font-size:1rem}.__vev_calendar-wrapper .cal-wrapper .cal-body .dates .item{position:relative;float:left;display:block;width:14.285%;cursor:default;-webkit-tap-highlight-color:rgba(0,0,0,0)}.__vev_calendar-wrapper .cal-wrapper .cal-body .dates .item .date-num{font-size:1rem;position:relative;z-index:3}.__vev_calendar-wrapper .cal-wrapper .cal-body .dates .item.event{cursor:pointer}.__vev_calendar-wrapper .cal-wrapper .cal-body .dates .item.selected-day .is-event{background-color:#f29543}.__vev_calendar-wrapper .cal-wrapper .cal-body .dates .item .is-event{content:"";border:1px solid #f29543;background-color:#fff;border-radius:50%;width:36px;height:36px;position:absolute;left:50%;top:50%;z-index:1;margin-left:-18px;margin-top:-19px}.__vev_calendar-wrapper .cal-wrapper .cal-body .dates .item .is-today{content:"";background-color:#f29543;border-radius:50%;opacity:.8;width:12px;height:4px;position:absolute;left:50%;top:50%;z-index:2;margin-left:-6px;margin-top:8px}.__vev_calendar-wrapper .events-wrapper{border-radius:10px}.__vev_calendar-wrapper .events-wrapper .cal-events{height:95%;overflow-y:auto;padding:0 5px;margin:15px 0}.__vev_calendar-wrapper .events-wrapper .date{max-width:60%;min-width:200px;text-align:center;color:#fff;background-color:rgba(0,0,0,.2);border-radius:20px;margin:0 auto;font-size:22px}.__vev_calendar-wrapper .events-wrapper .event-item{padding:5px 20px;margin-top:15px;box-shadow:0 3px 11px 2px rgba(0,0,0,.1);background-color:#fff;border-radius:5px;color:#323232;position:relative}.__vev_calendar-wrapper .events-wrapper .event-item:first-child{margin-top:0}.__vev_calendar-wrapper .events-wrapper .event-item .title{height:40px;line-height:40px;color:#323232;font-size:16px;border-bottom:1px solid #f2f2f2}.__vev_calendar-wrapper .events-wrapper .event-item .time{position:absolute;right:30px;top:17px;color:#9b9b9b;font-size:14px}.__vev_calendar-wrapper .events-wrapper .event-item .desc{color:#9b9b9b;font-size:14px;padding:7px 0}.__vev_calendar-wrapper .arrow-left.icon{color:#000;position:absolute;left:6%;margin-top:10px}.__vev_calendar-wrapper .arrow-left.icon:before{content:"";position:absolute;left:1px;top:-5px;width:10px;height:10px;border-top:1px solid currentColor;border-right:1px solid currentColor;-webkit-transform:rotate(-135deg);transform:rotate(-135deg)}.__vev_calendar-wrapper .arrow-right.icon{color:#000;position:absolute;right:6%;margin-top:10px}.__vev_calendar-wrapper .arrow-right.icon:before{content:"";position:absolute;right:1px;top:-5px;width:10px;height:10px;border-top:1px solid currentColor;border-right:1px solid currentColor;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.__vev_calendar-wrapper h3,.__vev_calendar-wrapper p{margin:0;padding:0}
2 | /*# sourceMappingURL=style.css.map*/


--------------------------------------------------------------------------------
/dist/style.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":[],"names":[],"mappings":"","file":"style.css","sourceRoot":""}


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 5 |     <meta charset="utf-8">
 6 |     <title>vue-event-calendar</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <script src="/dist/index.js"></script>
11 |   </body>
12 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-event-calendar",
 3 |   "description": "A simple calendar to mark events for Vue2",
 4 |   "version": "1.5.2",
 5 |   "author": "geoffzhu <geoffzhu1992@gmail.com>",
 6 |   "scripts": {
 7 |     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
 8 |     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
 9 |   },
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "git+https://github.com/GeoffZhu/vue-event-calendar"
13 |   },
14 |   "main": "dist/index.js",
15 |   "dependencies": {
16 |     "vue": "^2.1.8"
17 |   },
18 |   "devDependencies": {
19 |     "babel-core": "^6.0.0",
20 |     "babel-loader": "^6.0.0",
21 |     "babel-preset-es2015": "^6.0.0",
22 |     "cross-env": "^3.0.0",
23 |     "css-loader": "^0.25.0",
24 |     "extract-text-webpack-plugin": "^2.0.0-rc.3",
25 |     "file-loader": "^0.9.0",
26 |     "less": "^2.7.1",
27 |     "less-loader": "^2.2.3",
28 |     "style-loader": "^0.13.1",
29 |     "vue-loader": "^10.0.0",
30 |     "vue-template-compiler": "^2.1.8",
31 |     "webpack": "^2.2.1",
32 |     "webpack-dev-server": "^2.3.0"
33 |   },
34 |   "keywords": [
35 |     "vue",
36 |     "eventcalendar",
37 |     "vue-event-calendar"
38 |   ],
39 |   "bugs": {
40 |     "url": "https://github.com/GeoffZhu/vue-event-calendar/issues"
41 |   },
42 |   "homepage": "http://geoffzhu.cn/vue-event-calendar/"
43 | }
44 | 


--------------------------------------------------------------------------------
/src/components/cal-event-item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="wrapper">
 3 |     <h3 class="title">{{index+1}}. {{event.title}}</h3>
 4 |     <p class="time">{{dateTimeFormatter(Date.parse(new Date(event.date)),i18n[locale].fullFormat)}}</p>
 5 |     <p class="desc">{{event.desc}}</p>
 6 |   </div>
 7 | </template>
 8 | <script>
 9 | import i18n from '../i18n.js'
10 | import { dateTimeFormatter } from '../tools.js'
11 | export default {
12 |   data () {
13 |     return {
14 |       i18n
15 |     }
16 |   },
17 |   props: {
18 |     event: {
19 |       type: Object,
20 |       required: true
21 |     },
22 |     index: {
23 |       type: Number,
24 |       required: true
25 |     },
26 |     locale: {
27 |       type: String,
28 |       required: true
29 |     }
30 |   },
31 |   methods: {
32 |     dateTimeFormatter
33 |   }
34 | }
35 | </script>


--------------------------------------------------------------------------------
/src/components/cal-events.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="events-wrapper" :style="bgColor">
 3 |     <h2 class="date">
 4 |       {{dayEventsTitle}}
 5 |     </h2>
 6 |     <div class="cal-events">
 7 |       <slot>
 8 |         <div v-for="(event, index) in events" class="event-item" :key="index">
 9 |           <cal-event-item :event="event" :index="index" :locale="locale"></cal-event-item>
10 |         </div>
11 |       </slot>
12 |     </div>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | import i18n from '../i18n.js'
18 | import { dateTimeFormatter } from '../tools.js'
19 | import calEventItem from './cal-event-item.vue'
20 | export default {
21 |   name: 'cal-events',
22 |   data () {
23 |     return {
24 |       i18n
25 |     }
26 |   },
27 |   components: {
28 |     'cal-event-item': calEventItem
29 |   },
30 |   props: {
31 |     title: String,
32 |     dayEvents: {
33 |       type: Object,
34 |       required: true
35 |     },
36 |     locale: {
37 |       type: String,
38 |       required: true
39 |     },
40 |     color: {
41 |       type: String,
42 |       required: true
43 |     }
44 |   },
45 |   computed: {
46 |     dayEventsTitle () {
47 |       if (this.title) return this.title
48 |       if (this.dayEvents.date !== 'all') {
49 |         let tempDate
50 |         if (this.dayEvents.events.length !== 0) {
51 |           tempDate = Date.parse(new Date(this.dayEvents.events[0].date))
52 |           return dateTimeFormatter(tempDate, i18n[this.locale].fullFormat)
53 |         } else {
54 |           tempDate = dateTimeFormatter(Date.parse(new Date(this.dayEvents.date)), i18n[this.locale].fullFormat)
55 |           return `${tempDate} ${i18n[this.locale].notHaveEvents}`
56 |         }
57 |       } else {
58 |         return i18n[this.locale].dayEventsTitle
59 |       }
60 |     },
61 |     events () {
62 |       return this.dayEvents.events
63 |     },
64 |     bgColor () {
65 |       return {backgroundColor: this.color}
66 |     }
67 |   },
68 |   methods: {
69 |     dateTimeFormatter
70 |   }
71 | }
72 | </script>


--------------------------------------------------------------------------------
/src/components/cal-panel.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="cal-wrapper">
  3 |     <div class="cal-header">
  4 |       <div class="l" @click="preMonth"><div class="arrow-left icon">&nbsp;</div></div>
  5 |       <div class="title">{{curYearMonth}}</div>
  6 |       <div class="r" @click="nextMonth"><div class="arrow-right icon">&nbsp;</div></div>
  7 |     </div>
  8 |     <div class="cal-body">
  9 |       <div class="weeks">
 10 |         <span
 11 |           v-for="(dayName, dayIndex) in i18n[calendar.options.locale].dayNames"
 12 |           class="item"
 13 |           :key="dayIndex"
 14 |           >
 15 |           {{i18n[calendar.options.locale].dayNames[(dayIndex + calendar.options.weekStartOn) % 7]}}
 16 |         </span>
 17 |       </div>
 18 |       <div class="dates" >
 19 |         <div v-for="date in dayList" class="item"
 20 |           :class="[{
 21 |             today: date.status ? (today == date.date) : false,
 22 |             event: date.status ? (date.title != undefined) : false,
 23 |             [calendar.options.className] : (date.date == selectedDay)
 24 |           }, ...date.customClass]"
 25 |           :key="date.date"
 26 |           >
 27 |           <p class="date-num"
 28 |             @click="handleChangeCurday(date)"
 29 |             :style="{color: date.title != undefined ? ((date.date == selectedDay) ? '#fff' : customColor) : 'inherit'}">
 30 |             {{date.status ? date.date.split('/')[2] : '&nbsp;'}}</p>
 31 |           <span v-if="date.status ? (today == date.date) : false" class="is-today" :style="{backgroundColor: customColor }" ></span>
 32 |           <span v-if="date.status ? (date.title != undefined) : false" class="is-event"
 33 |             :style="{borderColor: customColor, backgroundColor: (date.date == selectedDay) ? customColor : 'inherit'}"></span>
 34 |         </div>
 35 |       </div>
 36 |     </div>
 37 |   </div>
 38 | </template>
 39 | 
 40 | <script>
 41 | import i18n from '../i18n.js'
 42 | import { dateTimeFormatter, isEqualDateStr} from '../tools.js'
 43 | 
 44 | const inBrowser = typeof window !== 'undefined'
 45 | export default {
 46 |   name: 'cal-panel',
 47 |   data () {
 48 |     return {
 49 |       i18n
 50 |     }
 51 |   },
 52 |   props: {
 53 |     events: {
 54 |       type: Array,
 55 |       required: true
 56 |     },
 57 |     calendar: {
 58 |       type: Object,
 59 |       required: true
 60 |     },
 61 |     selectedDay: {
 62 |       type: String,
 63 |       required: false
 64 |     }
 65 |   },
 66 |   computed: {
 67 |     dayList () {
 68 |       let firstDay = new Date(this.calendar.params.curYear, this.calendar.params.curMonth, 1)
 69 |       let dayOfWeek = firstDay.getDay()
 70 |       // 根据当前日期计算偏移量 // Calculate the offset based on the current date
 71 |       if (this.calendar.options.weekStartOn > dayOfWeek) {
 72 |         dayOfWeek = dayOfWeek - this.calendar.options.weekStartOn + 7
 73 |       } else {
 74 |         dayOfWeek = dayOfWeek - this.calendar.options.weekStartOn
 75 |       }
 76 | 
 77 |       let startDate = new Date(firstDay)
 78 |       startDate.setDate(firstDay.getDate() - dayOfWeek)
 79 | 
 80 |       let item, status, tempArr = [], tempItem
 81 |       for (let i = 0 ; i < 42 ; i++) {
 82 |           item = new Date(startDate);
 83 |           item.setDate(startDate.getDate() + i);
 84 | 
 85 |           if (this.calendar.params.curMonth === item.getMonth()) {
 86 |             status = 1
 87 |           } else {
 88 |             status = 0
 89 |           }
 90 |           tempItem = {
 91 |             date: `${item.getFullYear()}/${item.getMonth()+1}/${item.getDate()}`,
 92 |             status: status,
 93 |             customClass: []
 94 |           }
 95 |           this.events.forEach((event) => {
 96 |             if (isEqualDateStr(event.date, tempItem.date)) {
 97 |               tempItem.title = event.title
 98 |               tempItem.desc = event.desc || ''
 99 |               if (event.customClass) tempItem.customClass.push(event.customClass)
100 |             }
101 |           })
102 |           tempArr.push(tempItem)
103 |       }
104 |       return tempArr
105 |     },
106 |     today () {
107 |       let dateObj = new Date()
108 |       return `${dateObj.getFullYear()}/${dateObj.getMonth()+1}/${dateObj.getDate()}`
109 |     },
110 |     curYearMonth () {
111 |       let tempDate = Date.parse(new Date(`${this.calendar.params.curYear}/${this.calendar.params.curMonth+1}/01`))
112 |       return dateTimeFormatter(tempDate, this.i18n[this.calendar.options.locale].format)
113 |     },
114 |     customColor () {
115 |       return this.calendar.options.color
116 |     }
117 |   },
118 |   methods: {
119 |     nextMonth () {
120 |       this.$EventCalendar.nextMonth()
121 |       this.$emit('month-changed', this.curYearMonth)
122 |     },
123 |     preMonth () {
124 |       this.$EventCalendar.preMonth()
125 |       this.$emit('month-changed', this.curYearMonth)
126 |     },
127 |     handleChangeCurday (date) {
128 |       if (date.status) {
129 |         this.$emit('cur-day-changed', date.date)
130 |       }
131 |     }
132 |   }
133 | }
134 | </script>
135 | 


--------------------------------------------------------------------------------
/src/i18n.js:
--------------------------------------------------------------------------------
  1 | export default {
  2 |   en: {
  3 |     dayNames: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
  4 |     monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
  5 |     format: 'MM/yyyy',
  6 |     fullFormat: 'dd/MM/yyyy',
  7 |     dayEventsTitle: 'All Events',
  8 |     notHaveEvents: 'Not Have Events'
  9 |   },
 10 |   zh: {
 11 |     dayNames: ["日", "一", "二", "三", "四", "五", "六"],
 12 |     monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
 13 |     format : 'yyyy年MM月',
 14 |     fullFormat: 'yyyy年MM月dd日',
 15 |     dayEventsTitle: '全部事件',
 16 |     notHaveEvents: '没有事件'
 17 |   },
 18 |   us: {
 19 |     dayNames: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
 20 |     monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
 21 |     format: 'MM/yyyy',
 22 |     fullFormat: 'MM/dd/yyyy',
 23 |     dayEventsTitle: 'All Events',
 24 |     notHaveEvents: 'Not Have Events'
 25 |   },
 26 |   es: {
 27 |     dayNames: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sá"],
 28 |     monthNames: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
 29 |     format : 'MM/yyyy',
 30 |     fullFormat: 'dd/MM/yyyy',
 31 |     dayEventsTitle: 'Todos los eventos',
 32 |     notHaveEvents: 'Nada'
 33 |   },
 34 |   'pt-br': {
 35 |     dayNames: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"],
 36 |     monthNames: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
 37 |     format : 'MM/yyyy',
 38 |     fullFormat: 'dd/MM/yyyy',
 39 |     dayEventsTitle: 'Todos os eventos',
 40 |     notHaveEvents: 'Nenhum evento'
 41 |   },
 42 |   ja: {
 43 |     dayNames: ["日", "月", "火", "水", "木", "金", "土"],
 44 |     monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
 45 |     format: 'yyyy/MM',
 46 |     fullFormat: 'yyyy/MM/dd',
 47 |     dayEventsTitle: '全てのイベント',
 48 |     notHaveEvents: 'イベントはありません'
 49 |   },
 50 |   ko: {
 51 |     dayNames: ["일", "월", "화", "수", "목", "금", "토"],
 52 |     monthNames: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
 53 |     format: 'yyyy/MM',
 54 |     fullFormat: 'yyyy/MM/dd',
 55 |     dayEventsTitle: '모든 이벤트',
 56 |     notHaveEvents: '일정이 없습니다'
 57 |   },
 58 |   fr: {
 59 |     dayNames: ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"],
 60 |     monthNames: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
 61 |     format : 'MM/yyyy',
 62 |     fullFormat: 'dd/MM/yyyy',
 63 |     dayEventsTitle: 'Tous les événements',
 64 |     notHaveEvents: 'Aucun événement'
 65 |   },
 66 |   it: {
 67 |     dayNames: ["Dom", "Lun", "Mar", "Mer", "Gio", "Ven", "Sab"],
 68 |     monthNames: ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"],
 69 |     format : 'MM/yyyy',
 70 |     fullFormat: 'dd/MM/yyyy',
 71 |     dayEventsTitle: 'Tutti gli eventi',
 72 |     notHaveEvents: 'Nessun evento'
 73 |   },
 74 |   ru: {
 75 |     dayNames: ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"],
 76 |     monthNames: ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"],
 77 |     format: 'MM.yyyy',
 78 |     fullFormat: 'dd.MM.yyyy',
 79 |     dayEventsTitle: 'Все события',
 80 |     notHaveEvents: 'События отсутствуют'
 81 |   },
 82 |   sv: {
 83 |     dayNames: ["Sön", "Mån", "Tis", "Ons", "Tor", "Fre", "Lör"],
 84 |     monthNames: ["Januari", "Februari", "Mars", "April", "Maj", "Juni", "Juli", "Augusti", "September", "Oktober", "November", "December"],
 85 |     format: 'MM/yyyy',
 86 |     fullFormat: 'dd/MM/yyyy',
 87 |     dayEventsTitle: 'Alla händelser',
 88 |     notHaveEvents: 'Inga händelser'
 89 |   },
 90 |   no: {
 91 |     dayNames: ["Søn", "Man", "Tir", "Ons", "Tor", "Fre", "Lør"],
 92 |     monthNames: ["Januar", "Februar", "Mars", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Desember"],
 93 |     format: 'MM/yyyy',
 94 |     fullFormat: 'dd/MM/yyyy',
 95 |     dayEventsTitle: 'Alle hendelser',
 96 |     notHaveEvents: 'Ingen hendelser'
 97 |   },
 98 |   'no-nn': {
 99 |     dayNames: ["Søn", "Mån", "Tys", "Ons", "Tor", "Fre", "Lau"],
100 |     monthNames: ["Januar", "Februar", "Mars", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Desember"],
101 |     format: 'MM/yyyy',
102 |     fullFormat: 'dd/MM/yyyy',
103 |     dayEventsTitle: 'Alle hendinger',
104 |     notHaveEvents: 'Ingen hendinger'
105 |   },
106 |   de: {
107 |     dayNames: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
108 |     monthNames: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
109 |     format: 'MM/yyyy',
110 |     fullFormat: 'dd.MM.yyyy',
111 |     dayEventsTitle: 'Alle Veranstaltungen',
112 |     notHaveEvents: 'Keine Veranstaltungen'
113 |   },
114 |   vi: {
115 |     dayNames: ["T2", "T3", "T4", "T5", "T6", "T7", "CN"],
116 |     monthNames: ["Tháng 1", "Tháng 2", "Tháng 3", "Tháng 4", "Tháng 5", "Tháng 6", "Tháng 7", "Tháng 8", "Tháng 9", "Tháng 10", "Tháng 11", "Tháng 12"],
117 |     format: 'MM/yyyy',
118 |     fullFormat: 'dd/MM/yyyy',
119 |     dayEventsTitle: 'Tất cả sự kiện',
120 |     notHaveEvents: 'Không có sự kiện nào'
121 |   },
122 |   ua: {
123 |     dayNames: ["Нд", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"],
124 |     monthNames: ["Січень", "Лютий", "Березень", "Квітень", "Травень", "Червень", "Липень", "Серпень", "Вересень", "Жовтень", "Листопад", "Грудень"],
125 |     format: 'MM.yyyy',
126 |     fullFormat: 'dd.MM.yyyy',
127 |     dayEventsTitle: 'Усі події',
128 |     notHaveEvents: 'Події відсутні'
129 |   },
130 |   th: {
131 |     dayNames: ["อาทิตย์", "จันทร์", "อังคาร", "พุธ", "พฤหัสบดี", "ศุกร์", "เสาร์"],
132 |     monthNames: ["มกราคม", "กุมภาพันธ์", "มีนาคม", "เมษายน", "พฤษภาคม", "มิถุนายน", "กรกฎาคม", "สิงหาคม", "กันยายน", "ตุลาคม", "พฤศจิกายน", "ธันวาคม"],
133 |     format: 'MM/yyyy',
134 |     fullFormat: 'dd/MM/yyyy',
135 |     dayEventsTitle: 'เหตุการณ์',
136 |     notHaveEvents: 'ไม่มีเหตุการณใดๆ'
137 |   },
138 |   hu: {
139 |     dayNames: ["Hé", "Ke", "Sze", "Сs", "Pé", "Szo", "Va"],
140 |     monthNames: ["Január", "Február", "Március", "Április", "Május", "Június", "Július", "Augusztus", "Szeptember", "Október", "November", "December"],
141 |     format: 'yyyy MM',
142 |     fullFormat: 'yyyy.MM.dd',
143 |     dayEventsTitle: 'Események',
144 |     notHaveEvents: 'Nincs esemény'
145 |   }
146 | }
147 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | 
 3 | import vueEventCalendar from './vue-event-calendar.vue'
 4 | 
 5 | function install (Vue, options = {}) {
 6 |   const isVueNext = Vue.version.split('.')[0] === '2'
 7 |   const inBrowser = typeof window !== 'undefined'
 8 |   let dateObj = new Date()
 9 |   const DEFAULT_OPTION = {
10 |     locale: 'zh', // en
11 |     color: ' #f29543',
12 |     className:'selected-day',
13 |     weekStartOn: 0 // 0 mean sunday
14 |   }
15 |   let Calendar = {
16 |     $vm: null,
17 |     bindEventBus (vm) {
18 |       this.$vm = vm
19 |     },
20 |     toDate (dateString) {
21 |       if (dateString === 'all') {
22 |         this.$vm.CALENDAR_EVENTS_DATA.params = {
23 |           curYear: dateObj.getFullYear(),
24 |           curMonth: dateObj.getMonth(),
25 |           curDate: dateObj.getDate(),
26 |           curEventsDate: 'all'
27 |         }
28 |       } else {
29 |         let dateArr = dateString.split('/')
30 |         dateArr = dateArr.map((item) => {
31 |           return parseInt(item, 10)
32 |         })
33 |         this.$vm.CALENDAR_EVENTS_DATA.params = {
34 |           curYear: dateArr[0],
35 |           curMonth: dateArr[1]-1,
36 |           curDate: dateArr[2],
37 |           curEventsDate: dateString
38 |         }
39 |       }
40 |     },
41 |     nextMonth () {
42 |       if (this.$vm.CALENDAR_EVENTS_DATA.params.curMonth < 11) {
43 |         this.$vm.CALENDAR_EVENTS_DATA.params.curMonth++
44 |       } else {
45 |         this.$vm.CALENDAR_EVENTS_DATA.params.curYear++
46 |         this.$vm.CALENDAR_EVENTS_DATA.params.curMonth = 0
47 |       }
48 |     },
49 |     preMonth () {
50 |       if (this.$vm.CALENDAR_EVENTS_DATA.params.curMonth > 0) {
51 |         this.$vm.CALENDAR_EVENTS_DATA.params.curMonth--
52 |       } else {
53 |         this.$vm.CALENDAR_EVENTS_DATA.params.curYear--
54 |         this.$vm.CALENDAR_EVENTS_DATA.params.curMonth = 11
55 |       }
56 |     }
57 |   }
58 | 
59 |   const calendarOptions = Object.assign(DEFAULT_OPTION, options)
60 | 
61 |   const VueCalendarBarEventBus = new Vue({
62 |     data: {
63 |       CALENDAR_EVENTS_DATA: {
64 |         options: calendarOptions,
65 |         params: {
66 |           curYear: dateObj.getFullYear(),
67 |           curMonth: dateObj.getMonth(),
68 |           curDate: dateObj.getDate(),
69 |           curEventsDate: 'all'
70 |         }
71 |       }
72 |     }
73 |   })
74 | 
75 |   if (inBrowser) {
76 |     window.VueCalendarBarEventBus = VueCalendarBarEventBus
77 |     Calendar.bindEventBus(VueCalendarBarEventBus)
78 |   }
79 | 
80 |   Vue.component('vue-event-calendar', vueEventCalendar)
81 | 
82 |   Vue.prototype.$EventCalendar = Calendar
83 | }
84 | 
85 | export default install
86 | 
87 | if (typeof module === 'object' && module.exports) {
88 |   module.exports.install = install
89 | }
90 | 


--------------------------------------------------------------------------------
/src/tools.js:
--------------------------------------------------------------------------------
 1 | export function dateTimeFormatter (date ,format) {
 2 |   // 时间格式化辅助函数 date:毫秒数 format:'yyyy-MM-dd hh:mm:ss'
 3 |   if (!date || date == "") {
 4 |     return ""
 5 |   }
 6 | 
 7 |   if (typeof date === "string") {
 8 |     var mts = date.match(/(\/Date\((\d+)\)\/)/)
 9 |     if (mts && mts.length >= 3) {
10 |       date = parseInt(mts[2])
11 |     }
12 |   }
13 | 
14 |   date = new Date(date)
15 |   if (!date || date.toUTCString() == "Invalid Date") {
16 |     return ""
17 |   }
18 | 
19 |   var map = {
20 |     "M": date.getMonth() + 1, //月份
21 |     "d": date.getDate(), //日
22 |     "h": date.getHours(), //小时
23 |     "m": date.getMinutes(), //分
24 |     "s": date.getSeconds(), //秒
25 |     "q": Math.floor((date.getMonth() + 3) / 3), //季度
26 |     "S": date.getMilliseconds() //毫秒
27 |   }
28 | 
29 |   format = format.replace(/([yMdhmsqS])+/g, function(all, t){
30 |     var v = map[t]
31 |     if(v !== undefined){
32 |       if(all.length > 1){
33 |         v = '0' + v
34 |         v = v.substr(v.length-2)
35 |       }
36 |       return v
37 |     }
38 |     else if(t === 'y'){
39 |       return (date.getFullYear() + '').substr(4 - all.length)
40 |     }
41 |     return all
42 |   })
43 | 
44 |   return format
45 | }
46 | export function isEqualDateStr (dateStr1, dateStr2) {
47 |   let dateArr1 = dateStr1.split('/')
48 |   let dateArr2 = dateStr2.split('/')
49 |   if (parseInt(dateArr1[0], 10) !== parseInt(dateArr2[0], 10)) {
50 |     return false
51 |   }
52 |   if (parseInt(dateArr1[1], 10) !== parseInt(dateArr2[1], 10)) {
53 |     return false
54 |   }
55 |   if (parseInt(dateArr1[2], 10) !== parseInt(dateArr2[2], 10)) {
56 |     return false
57 |   }
58 |   return true
59 | }


--------------------------------------------------------------------------------
/src/vue-event-calendar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="__vev_calendar-wrapper">
  3 |     <cal-panel
  4 |       :events="events"
  5 |       :calendar="calendarOptions"
  6 |       :selectedDay='selectedDayEvents.date'
  7 |       @cur-day-changed="handleChangeCurDay"
  8 |       @month-changed="handleMonthChanged">
  9 |     </cal-panel>
 10 |     <cal-events
 11 |       :title="title"
 12 |       :dayEvents="selectedDayEvents"
 13 |       :locale="calendarOptions.options.locale"
 14 |       :color="calendarOptions.options.color">
 15 |       <slot :showEvents="selectedDayEvents.events"></slot>
 16 |     </cal-events>
 17 |   </div>
 18 | </template>
 19 | <script>
 20 | import { isEqualDateStr} from './tools.js'
 21 | 
 22 | import calEvents from './components/cal-events.vue'
 23 | import calPanel from './components/cal-panel.vue'
 24 | 
 25 | const inBrowser = typeof window !== 'undefined'
 26 | export default {
 27 |   name: 'vue-event-calendar',
 28 |   components: {
 29 |     'cal-events': calEvents,
 30 |     'cal-panel': calPanel
 31 |   },
 32 |   data () {
 33 |     return {
 34 |       selectedDayEvents: {
 35 |         date: 'all',
 36 |         events: this.events || []  //default show all event
 37 |       }
 38 |     }
 39 |   },
 40 |   props: {
 41 |     title: String,
 42 |     events: {
 43 |       type: Array,
 44 |       required: true,
 45 |       default: [],
 46 |       validator (events) {
 47 |         let validate = true
 48 |         events.forEach((event, index) => {
 49 |           if (!event.date) {
 50 |             console.error('Vue-Event-Calendar-Error:' + 'Prop events Wrong at index ' + index)
 51 |             validate = false
 52 |           }
 53 |         })
 54 |         return validate
 55 |       }
 56 |     }
 57 |   },
 58 |   computed: {
 59 |     calendarOptions () {
 60 |       let dateObj = new Date()
 61 |       if (inBrowser) {
 62 |           return window.VueCalendarBarEventBus.CALENDAR_EVENTS_DATA
 63 |       } else {
 64 |         return {
 65 |           options: {
 66 |             locale: 'en', //zh
 67 |             color: ' #f29543'
 68 |           },
 69 |           params: {
 70 |               curYear: dateObj.getFullYear(),
 71 |               curMonth: dateObj.getMonth(),
 72 |               curDate: dateObj.getDate(),
 73 |               curEventsDate: 'all'
 74 |           }
 75 |         }
 76 |       }
 77 |     },
 78 |     calendarParams () {
 79 |       let dateObj = new Date()
 80 |       if (inBrowser) {
 81 |           return window.VueCalendarBarEventBus.CALENDAR_EVENTS_DATA.params
 82 |       } else {
 83 |         return {
 84 |           curYear: dateObj.getFullYear(),
 85 |           curMonth: dateObj.getMonth(),
 86 |           curDate: dateObj.getDate(),
 87 |           curEventsDate: 'all'
 88 |         }
 89 |       }
 90 |     }
 91 |   },
 92 |   created () {
 93 |     if (this.calendarParams.curEventsDate !== 'all') {
 94 |       this.handleChangeCurDay(this.calendarParams.curEventsDate)
 95 |     }
 96 |   },
 97 |   methods: {
 98 |     handleChangeCurDay (date) {
 99 |       let events = this.events.filter(function(event) {
100 |         return isEqualDateStr(event.date, date)
101 |       })
102 |       if (events.length > 0) {
103 |         this.selectedDayEvents = {
104 |           date: date,
105 |           events: events
106 |         }
107 |       }
108 |       this.$emit('day-changed', {
109 |         date: date,
110 |         events: events
111 |       })
112 |     },
113 |     handleMonthChanged (yearMonth) {
114 |       this.$emit('month-changed', yearMonth)
115 |     }
116 |   },
117 |   watch: {
118 |     calendarParams () {
119 |       if (this.calendarParams.curEventsDate !== 'all') {
120 |         let events = this.events.filter(event => {
121 |           return isEqualDateStr(event.date, this.calendarParams.curEventsDate)
122 |         })
123 |         this.selectedDayEvents = {
124 |           date: this.calendarParams.curEventsDate,
125 |           events
126 |         }
127 |       } else {
128 |         this.selectedDayEvents = {
129 |           date: 'all',
130 |           events: this.events
131 |         }
132 |       }
133 |     },
134 |     events () {
135 |       this.selectedDayEvents = {
136 |         date: 'all',
137 |         events: this.events || []
138 |       }
139 |     }
140 |   }
141 | }
142 | </script>
143 | <style lang="less">
144 | @base-orange: #f29543;
145 | @white: #ffffff;
146 | @gray: #e0e0e0;
147 | @gray-dark: #b1b1b1;
148 | @large-padding: 15px;
149 | @small-padding: 10px;
150 | 
151 | @icon-border-size: 1px;
152 | @media screen and (min-width: 768px) {
153 |   .__vev_calendar-wrapper{
154 |     max-width: 1200px;
155 |     margin: 0 auto;
156 |     .cal-wrapper{
157 |       width: 50%;
158 |       padding: 100px 50px;
159 |       .date-num{
160 |         line-height: 50px;
161 |       }
162 |     }
163 |     .events-wrapper{
164 |       width: 50%;
165 |       background-color: @base-orange;
166 |       color: @white;
167 |       padding: 40px 45px;
168 |       position: absolute;
169 |       left: 50%;
170 |       top: 0;
171 |       bottom: 0;
172 |     }
173 |   }
174 | }
175 | @media screen and (max-width: 767px) {
176 |   .__vev_calendar-wrapper{
177 |     .cal-wrapper{
178 |       width: 100%;
179 |       padding: 10px 5px;
180 |       .date-num{
181 |         line-height: 42px;
182 |       }
183 |     }
184 |     .events-wrapper{
185 |       width: 100%;
186 |       margin-top: 10px;
187 |       padding: 10px;
188 |     }
189 |   }
190 | }
191 | .__vev_calendar-wrapper{
192 |   position: relative;
193 |   overflow: hidden;
194 |   width: 100%;
195 |   *{
196 |     box-sizing: border-box;
197 |   }
198 |   ::-webkit-scrollbar{
199 |     width: 8px;
200 |     height: 8px;
201 |   }
202 |   ::-webkit-scrollbar-track {
203 |     box-shadow: inset 0 0 2px rgba(0,0,0,.2);
204 |     border-radius: 5px;
205 |   }
206 |   ::-webkit-scrollbar-thumb {
207 |     border-radius: 5px;
208 |     background: rgba(0,0,0,.2);
209 |   }
210 |   .cal-wrapper{
211 |     .cal-header{
212 |       position: relative;
213 |       width: 100%;
214 |       background-color: @white;
215 |       // box-shadow: 0 6px 5px rgba(0,0,0,.1);
216 |       font-weight: 500;
217 |       overflow: hidden;
218 |       padding-bottom: 10px;
219 |       &>div{
220 |         float: left;
221 |         line-height: 20px;
222 |         padding: @large-padding;
223 |       }
224 |       .title{
225 |         width: 60%;
226 |         text-align: center;
227 |       }
228 |       .l{
229 |         text-align: left;
230 |         width: 20%;
231 |         cursor: pointer;
232 |         user-select: none;
233 |         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
234 |       }
235 |       .r{
236 |         text-align: right;
237 |         width: 20%;
238 |         cursor: pointer;
239 |         user-select: none;
240 |         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
241 |       }
242 |     }
243 |     .cal-body{
244 |       width: 100%;
245 |       .weeks{
246 |         width: 100%;
247 |         overflow: hidden;
248 |         text-align: center;
249 |         font-size: 1rem;
250 |         .item{
251 |           line-height: 50px;
252 |           float: left;
253 |           width: 14.285%;
254 |         }
255 |       }
256 |       .dates{
257 |         width: 100%;
258 |         overflow: hidden;
259 |         text-align: center;
260 |         font-size: 1rem;
261 |         .item{
262 |           position: relative;
263 |           float: left;
264 |           display: block;
265 |           width: 14.285%;
266 |           cursor: default;
267 |           -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
268 |           .date-num{
269 |             font-size: 1rem;
270 |             position: relative;
271 |             z-index: 3;
272 |           }
273 |           &.event{
274 |             cursor: pointer;
275 |           }
276 |           &.selected-day{
277 |             .is-event{
278 |               background-color: @base-orange;
279 |             }
280 |           }
281 |           .is-event{
282 |             content: '';
283 |             border: 1px solid @base-orange;
284 |             background-color: #fff;
285 |             border-radius: 50%;
286 |             width: 36px;
287 |             height: 36px;
288 |             position: absolute;
289 |             left: 50%;
290 |             top: 50%;
291 |             z-index: 1;
292 |             margin-left: -18px;
293 |             margin-top: -19px;
294 |           }
295 |           .is-today{
296 |             content: '';
297 |             background-color: @base-orange;
298 |             border-radius: 50%;
299 |             opacity: .8;
300 |             width: 12px;
301 |             height: 4px;
302 |             position: absolute;
303 |             left: 50%;
304 |             top: 50%;
305 |             z-index: 2;
306 |             margin-left: -6px;
307 |             margin-top: 8px;
308 |           }
309 |         }
310 |       }
311 |     }
312 |   }
313 |   .events-wrapper{
314 |     border-radius: 10px;
315 |     .cal-events{
316 |       height: 95%;
317 |       overflow-y: auto;
318 |       padding: 0 5px;
319 |       margin: 15px 0;
320 |     }
321 |     .date{
322 |       max-width: 60%;
323 |       min-width: 200px;
324 |       text-align: center;
325 |       color: @white;
326 |       background-color: rgba(0, 0, 0, 0.2);
327 |       border-radius: 20px;
328 |       margin: 0 auto;
329 |       font-size: 22px;
330 |     }
331 |     .event-item{
332 |       padding: 5px 20px;
333 |       margin-top: 15px;
334 |       box-shadow: 0 3px 11px 2px rgba(0,0,0,.1);
335 |       background-color: #fff;
336 |       border-radius: 5px;
337 |       color: #323232;
338 |       position: relative;
339 |       &:first-child{
340 |         margin-top: 0;
341 |       }
342 |       .title{
343 |         height: 40px;
344 |         line-height: 40px;
345 |         color: #323232;
346 |         font-size: 16px;
347 |         border-bottom: 1px solid #f2f2f2;
348 |       }
349 |       .time{
350 |         position: absolute;
351 |         right: 30px;
352 |         top: 17px;
353 |         color: #9b9b9b;
354 |         font-size: 14px;
355 |       }
356 |       .desc{
357 |         color: #9b9b9b;
358 |         font-size: 14px;
359 |         padding: 7px 0;
360 |       }
361 |     }
362 |   }
363 |   .arrow-left.icon {
364 |     color: #000;
365 |     position: absolute;
366 |     left: 6%;
367 |     margin-top: 10px;
368 |   }
369 |   .arrow-left.icon:before {
370 |     content: '';
371 |     position: absolute;
372 |     left: 1px;
373 |     top: -5px;
374 |     width: 10px;
375 |     height: 10px;
376 |     border-top: solid @icon-border-size currentColor;
377 |     border-right: solid @icon-border-size currentColor;
378 |     -webkit-transform: rotate(-135deg);
379 |             transform: rotate(-135deg);
380 |   }
381 |   .arrow-right.icon {
382 |     color: #000;
383 |     position: absolute;
384 |     right: 6%;
385 |     margin-top: 10px;
386 |   }
387 |   .arrow-right.icon:before {
388 |     content: '';
389 |     position: absolute;
390 |     right: 1px;
391 |     top: -5px;
392 |     width: 10px;
393 |     height: 10px;
394 |     border-top: solid @icon-border-size currentColor;
395 |     border-right: solid @icon-border-size currentColor;
396 |     -webkit-transform: rotate(45deg);
397 |             transform: rotate(45deg);
398 |   }
399 |   h3, p{
400 |     margin: 0;
401 |     padding: 0;
402 |   }
403 | }
404 | 
405 | </style>
406 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var ExtractTextPlugin = require("extract-text-webpack-plugin")
 4 | 
 5 | module.exports = {
 6 |   entry: './dev/main.js',
 7 |   output: {
 8 |     path: path.resolve(__dirname, './dist'),
 9 |     publicPath: '/dist/',
10 |     filename: 'index.js'
11 |   },
12 |   module: {
13 |     rules: [
14 |       {
15 |         test: /\.vue$/,
16 |         loader: 'vue-loader',
17 |         options: {
18 |           loaders: {
19 | 
20 |           }
21 |         }
22 |       },
23 |       {
24 |         test: /\.js$/,
25 |         loader: 'babel-loader',
26 |         exclude: /node_modules/
27 |       },
28 |       {
29 |         test: /\.css$/,
30 |         loader: 'style-loader!css-loader',
31 |         exclude: /node_modules/
32 |       },
33 |       {
34 |         test: /\.(png|jpg|gif|svg)$/,
35 |         loader: 'file-loader',
36 |         options: {
37 |           name: '[name].[ext]?[hash]'
38 |         }
39 |       }
40 |     ]
41 |   },
42 |   resolve: {
43 |     alias: {
44 |       'vue$': 'vue/dist/vue.common.js'
45 |     }
46 |   },
47 |   devServer: {
48 |     historyApiFallback: true,
49 |     noInfo: true
50 |   },
51 |   devtool: '#eval-source-map'
52 | }
53 | 
54 | if (process.env.NODE_ENV === 'production') {
55 |   module.exports.entry = './src/index.js'
56 | 
57 |   module.exports.output = {
58 |     path: path.resolve(__dirname, './dist'),
59 |     filename:'index.js',
60 |     library:'VueEventCalendar',
61 |     libraryTarget: 'umd'
62 |   }
63 |   module.exports.devtool = '#source-map'
64 |   module.exports.module.rules[0].options.loaders = {
65 |     css: ExtractTextPlugin.extract({
66 |       use: 'css-loader',
67 |       fallback: 'vue-style-loader' // <- this is a dep of vue-loader, so no need to explicitly install if using npm3
68 |     }),
69 |     less: ExtractTextPlugin.extract({
70 |       use: 'css-loader!less-loader',
71 |       fallback: 'vue-style-loader'
72 |     })
73 |   }
74 |   module.exports.plugins = (module.exports.plugins || []).concat([
75 |     new webpack.DefinePlugin({
76 |       'process.env': {
77 |         NODE_ENV: '"production"'
78 |       }
79 |     }),
80 |     new webpack.LoaderOptionsPlugin({
81 |       minimize: true
82 |     }),
83 |     new ExtractTextPlugin("style.css")
84 |   ])
85 | }
86 | 


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