├── static
└── .gitkeep
├── .vscode
└── settings.json
├── .gitignore
├── .babelrc
├── config
├── prod.env.js
├── test.env.js
├── dev.env.js
└── index.js
├── src
├── assets
│ └── logo.png
├── vue-calendar-component
│ ├── index.js
│ ├── calendar.js
│ └── calendar.vue
├── router
│ └── index.js
├── App.vue
├── main.js
└── demo
│ └── demo.vue
├── test
├── unit
│ ├── .eslintrc
│ ├── specs
│ │ └── Hello.spec.js
│ ├── index.js
│ └── karma.conf.js
└── e2e
│ ├── specs
│ └── test.js
│ ├── custom-assertions
│ └── elementCount.js
│ ├── runner.js
│ └── nightwatch.conf.js
├── index.html
├── dist
├── static
│ ├── css
│ │ └── app.7eadf47d1c1a7d67cc4760f0a424f0b1.css
│ └── js
│ │ ├── manifest.3ad1d5771e9b13dbdad2.js
│ │ └── app.fe9ac084af73375d6135.js
└── index.html
├── package.json
├── README.md
└── npm-debug.log
/static/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules/
2 |
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["env"]
3 | }
--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | module.exports = {
3 | NODE_ENV: '"production"'
4 | }
5 |
--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zwhGithub/vue-calendar/HEAD/src/assets/logo.png
--------------------------------------------------------------------------------
/src/vue-calendar-component/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Created by ZWH on 2017/6/22.
3 | */
4 | import Calendar from './calendar.vue';
5 | export default Calendar;
6 |
--------------------------------------------------------------------------------
/test/unit/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "mocha": true
4 | },
5 | "globals": {
6 | "expect": true,
7 | "sinon": true
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/config/test.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const merge = require('webpack-merge')
3 | const devEnv = require('./dev.env')
4 |
5 | module.exports = merge(devEnv, {
6 | NODE_ENV: '"testing"'
7 | })
8 |
--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const merge = require('webpack-merge')
3 | const prodEnv = require('./prod.env')
4 |
5 | module.exports = merge(prodEnv, {
6 | NODE_ENV: '"development"'
7 | })
8 |
--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Router from 'vue-router'
3 | import HelloWorld from '@/demo/demo'
4 |
5 | Vue.use(Router)
6 |
7 | export default new Router({
8 | routes: [{
9 | path: '/',
10 | name: 'Hello',
11 | component: HelloWorld
12 | }]
13 | })
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
12 |
13 |
25 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | app
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/test/unit/specs/Hello.spec.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import HelloWorld from '@/components/HelloWorld'
3 |
4 | describe('HelloWorld.vue', () => {
5 | it('should render correct contents', () => {
6 | const Constructor = Vue.extend(HelloWorld)
7 | const vm = new Constructor().$mount()
8 | expect(vm.$el.querySelector('.hello h1').textContent)
9 | .to.equal('Welcome to Your Vue.js App')
10 | })
11 | })
12 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | // The Vue build version to load with the `import` command
2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3 | import Vue from 'vue';
4 | import App from './App';
5 | import router from './router';
6 |
7 | Vue.config.productionTip = false;
8 | import Toast from 'vue-toast-component';
9 | Vue.use(Toast);
10 |
11 | /* eslint-disable no-new */
12 | new Vue({
13 | el: '#app',
14 | router,
15 | template: '',
16 | components: { App }
17 | });
--------------------------------------------------------------------------------
/dist/static/css/app.7eadf47d1c1a7d67cc4760f0a424f0b1.css:
--------------------------------------------------------------------------------
1 | *{margin:0;padding:0}#app,body{width:100%;height:100%;background:#ddd}h3[data-v-02a3a480]{text-align:center;width:90%;margin:auto}.div[data-v-02a3a480]{margin:auto;width:220px;height:44px;line-height:44px;background:#0fc37c;color:#fff;font-size:17px;text-align:center;margin-top:20px}.wh_container[data-v-02a3a480] .mark1{background-color:orange}.wh_container[data-v-02a3a480] .mark2{background-color:blue}.wh_content_item>.wh_isMark[data-v-02a3a480]{background:orange}
--------------------------------------------------------------------------------
/test/unit/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 |
3 | Vue.config.productionTip = false
4 |
5 | // require all test files (files that ends with .spec.js)
6 | const testsContext = require.context('./specs', true, /\.spec$/)
7 | testsContext.keys().forEach(testsContext)
8 |
9 | // require all src files except main.js for coverage.
10 | // you can also change this to match only the subset of files that
11 | // you want coverage for.
12 | const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/)
13 | srcContext.keys().forEach(srcContext)
14 |
--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
1 | app
--------------------------------------------------------------------------------
/test/e2e/specs/test.js:
--------------------------------------------------------------------------------
1 | // For authoring Nightwatch tests, see
2 | // http://nightwatchjs.org/guide#usage
3 |
4 | module.exports = {
5 | 'default e2e tests': function (browser) {
6 | // automatically uses dev Server port from /config.index.js
7 | // default: http://localhost:8080
8 | // see nightwatch.conf.js
9 | const devServer = browser.globals.devServerURL
10 |
11 | browser
12 | .url(devServer)
13 | .waitForElementVisible('#app', 5000)
14 | .assert.elementPresent('.hello')
15 | .assert.containsText('h1', 'Welcome to Your Vue.js App')
16 | .assert.elementCount('img', 1)
17 | .end()
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/dist/static/js/manifest.3ad1d5771e9b13dbdad2.js:
--------------------------------------------------------------------------------
1 | !function(r){function n(e){if(o[e])return o[e].exports;var t=o[e]={i:e,l:!1,exports:{}};return r[e].call(t.exports,t,t.exports,n),t.l=!0,t.exports}var e=window.webpackJsonp;window.webpackJsonp=function(o,u,c){for(var f,i,p,a=0,l=[];a has count: ' + count
11 | this.expected = count
12 | this.pass = function (val) {
13 | return val === this.expected
14 | }
15 | this.value = function (res) {
16 | return res.value
17 | }
18 | this.command = function (cb) {
19 | var self = this
20 | return this.api.execute(function (selector) {
21 | return document.querySelectorAll(selector).length
22 | }, [selector], function (res) {
23 | cb.call(self, res)
24 | })
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/test/unit/karma.conf.js:
--------------------------------------------------------------------------------
1 | // This is a karma config file. For more details see
2 | // http://karma-runner.github.io/0.13/config/configuration-file.html
3 | // we are also using it with karma-webpack
4 | // https://github.com/webpack/karma-webpack
5 |
6 | var webpackConfig = require('../../build/webpack.test.conf')
7 |
8 | module.exports = function (config) {
9 | config.set({
10 | // to run in additional browsers:
11 | // 1. install corresponding karma launcher
12 | // http://karma-runner.github.io/0.13/config/browsers.html
13 | // 2. add it to the `browsers` array below.
14 | browsers: ['PhantomJS'],
15 | frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],
16 | reporters: ['spec', 'coverage'],
17 | files: ['./index.js'],
18 | preprocessors: {
19 | './index.js': ['webpack', 'sourcemap']
20 | },
21 | webpack: webpackConfig,
22 | webpackMiddleware: {
23 | noInfo: true
24 | },
25 | coverageReporter: {
26 | dir: './coverage',
27 | reporters: [
28 | { type: 'lcov', subdir: '.' },
29 | { type: 'text-summary' }
30 | ]
31 | }
32 | })
33 | }
34 |
--------------------------------------------------------------------------------
/test/e2e/runner.js:
--------------------------------------------------------------------------------
1 | // 1. start the dev server using production config
2 | process.env.NODE_ENV = 'testing'
3 | var server = require('../../build/dev-server.js')
4 |
5 | server.ready.then(() => {
6 | // 2. run the nightwatch test suite against it
7 | // to run in additional browsers:
8 | // 1. add an entry in test/e2e/nightwatch.conf.json under "test_settings"
9 | // 2. add it to the --env flag below
10 | // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox`
11 | // For more information on Nightwatch's config file, see
12 | // http://nightwatchjs.org/guide#settings-file
13 | var opts = process.argv.slice(2)
14 | if (opts.indexOf('--config') === -1) {
15 | opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js'])
16 | }
17 | if (opts.indexOf('--env') === -1) {
18 | opts = opts.concat(['--env', 'chrome'])
19 | }
20 |
21 | var spawn = require('cross-spawn')
22 | var runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' })
23 |
24 | runner.on('exit', function (code) {
25 | server.close()
26 | process.exit(code)
27 | })
28 |
29 | runner.on('error', function (err) {
30 | server.close()
31 | throw err
32 | })
33 | })
34 |
--------------------------------------------------------------------------------
/test/e2e/nightwatch.conf.js:
--------------------------------------------------------------------------------
1 | require('babel-register')
2 | var config = require('../../config')
3 |
4 | // http://nightwatchjs.org/gettingstarted#settings-file
5 | module.exports = {
6 | src_folders: ['test/e2e/specs'],
7 | output_folder: 'test/e2e/reports',
8 | custom_assertions_path: ['test/e2e/custom-assertions'],
9 |
10 | selenium: {
11 | start_process: true,
12 | server_path: require('selenium-server').path,
13 | host: '127.0.0.1',
14 | port: 4444,
15 | cli_args: {
16 | 'webdriver.chrome.driver': require('chromedriver').path
17 | }
18 | },
19 |
20 | test_settings: {
21 | default: {
22 | selenium_port: 4444,
23 | selenium_host: 'localhost',
24 | silent: true,
25 | globals: {
26 | devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port)
27 | }
28 | },
29 |
30 | chrome: {
31 | desiredCapabilities: {
32 | browserName: 'chrome',
33 | javascriptEnabled: true,
34 | acceptSslCerts: true
35 | }
36 | },
37 |
38 | firefox: {
39 | desiredCapabilities: {
40 | browserName: 'firefox',
41 | javascriptEnabled: true,
42 | acceptSslCerts: true
43 | }
44 | }
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
1 |
2 | 'use strict'
3 | // Template version: 1.1.3
4 | // see http://vuejs-templates.github.io/webpack for documentation.
5 |
6 | const path = require('path')
7 |
8 | module.exports = {
9 | build: {
10 | env: require('./prod.env'),
11 | index: path.resolve(__dirname, '../dist/index.html'),
12 | assetsRoot: path.resolve(__dirname, '../dist'),
13 | assetsSubDirectory: 'static',
14 | assetsPublicPath: './',
15 | productionSourceMap: true,
16 | // Gzip off by default as many popular static hosts such as
17 | // Surge or Netlify already gzip all static assets for you.
18 | // Before setting to `true`, make sure to:
19 | // npm install --save-dev compression-webpack-plugin
20 | productionGzip: false,
21 | productionGzipExtensions: ['js', 'css'],
22 | // Run the build command with an extra argument to
23 | // View the bundle analyzer report after build finishes:
24 | // `npm run build --report`
25 | // Set to `true` or `false` to always turn it on or off
26 | bundleAnalyzerReport: process.env.npm_config_report
27 | },
28 | dev: {
29 | env: require('./dev.env'),
30 | port: process.env.PORT || 8080,
31 | autoOpenBrowser: true,
32 | assetsSubDirectory: 'static',
33 | assetsPublicPath: '/',
34 | proxyTable: {},
35 | // CSS Sourcemaps off by default because relative paths are "buggy"
36 | // with this option, according to the CSS-Loader README
37 | // (https://github.com/webpack/css-loader#sourcemaps)
38 | // In our experience, they generally work as expected,
39 | // just be aware of this issue when enabling this option.
40 | cssSourceMap: false
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-demo",
3 | "version": "1.0.0",
4 | "description": "A Vue.js project",
5 | "author": "wh git push origin master:gh-pages",
6 | "private": true,
7 | "scripts": {
8 | "dev": "node build/dev-server.js",
9 | "start": "npm run dev",
10 | "build": "node build/build.js",
11 | "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
12 | "e2e": "node test/e2e/runner.js",
13 | "test": "npm run unit && npm run e2e"
14 | },
15 | "dependencies": {
16 | "vue": "^2.5.2",
17 | "vue-calendar-component": "^2.8.2",
18 | "vue-router": "^3.0.1",
19 | "vue-toast-component": "^2.0.0"
20 | },
21 | "devDependencies": {
22 | "autoprefixer": "^7.1.2",
23 | "babel-core": "^6.22.1",
24 | "babel-loader": "^7.1.1",
25 | "babel-plugin-transform-runtime": "^6.22.0",
26 | "babel-preset-env": "^1.3.2",
27 | "babel-preset-stage-2": "^6.22.0",
28 | "babel-register": "^6.22.0",
29 | "chalk": "^2.0.1",
30 | "connect-history-api-fallback": "^1.3.0",
31 | "copy-webpack-plugin": "^4.0.1",
32 | "css-loader": "^0.28.0",
33 | "eventsource-polyfill": "^0.9.6",
34 | "express": "^4.14.1",
35 | "extract-text-webpack-plugin": "^3.0.0",
36 | "file-loader": "^1.1.4",
37 | "friendly-errors-webpack-plugin": "^1.6.1",
38 | "html-webpack-plugin": "^2.30.1",
39 | "http-proxy-middleware": "^0.17.3",
40 | "webpack-bundle-analyzer": "^2.9.0",
41 | "cross-env": "^5.0.1",
42 | "karma": "^1.4.1",
43 | "karma-coverage": "^1.1.1",
44 | "karma-mocha": "^1.3.0",
45 | "karma-phantomjs-launcher": "^1.0.2",
46 | "karma-phantomjs-shim": "^1.4.0",
47 | "karma-sinon-chai": "^1.3.1",
48 | "karma-sourcemap-loader": "^0.3.7",
49 | "karma-spec-reporter": "0.0.31",
50 | "karma-webpack": "^2.0.2",
51 | "mocha": "^3.2.0",
52 | "chai": "^4.1.2",
53 | "sinon": "^4.0.0",
54 | "sinon-chai": "^2.8.0",
55 | "inject-loader": "^3.0.0",
56 | "babel-plugin-istanbul": "^4.1.1",
57 | "phantomjs-prebuilt": "^2.1.14",
58 | "chromedriver": "^2.27.2",
59 | "cross-spawn": "^5.0.1",
60 | "nightwatch": "^0.9.12",
61 | "selenium-server": "^3.0.1",
62 | "semver": "^5.3.0",
63 | "shelljs": "^0.7.6",
64 | "opn": "^5.1.0",
65 | "optimize-css-assets-webpack-plugin": "^3.2.0",
66 | "ora": "^1.2.0",
67 | "rimraf": "^2.6.0",
68 | "url-loader": "^0.5.8",
69 | "vue-loader": "^13.3.0",
70 | "vue-style-loader": "^3.0.1",
71 | "vue-template-compiler": "^2.5.2",
72 | "portfinder": "^1.0.13",
73 | "webpack": "^3.6.0",
74 | "webpack-dev-middleware": "^1.12.0",
75 | "webpack-hot-middleware": "^2.18.2",
76 | "webpack-merge": "^4.1.0"
77 | },
78 | "engines": {
79 | "node": ">= 4.0.0",
80 | "npm": ">= 3.0.0"
81 | },
82 | "browserslist": [
83 | "> 1%",
84 | "last 2 versions",
85 | "not ie <= 8"
86 | ]
87 | }
88 |
--------------------------------------------------------------------------------
/dist/static/js/app.fe9ac084af73375d6135.js:
--------------------------------------------------------------------------------
1 | webpackJsonp([1],{"2+Mw":function(e,t,a){"use strict";var n=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"content"},[a("Calendar",{ref:"Calendar",attrs:{markDateMore:e.arr,markDate:e.arr2,agoDayHide:"1530115221"},on:{isToday:e.clickToday,choseDay:e.clickDay,changeMonth:e.changeDate}}),e._v(" "),a("br"),e._v(" "),a("h3",{on:{click:e.demo}},[e._v("markDateMore标记不同风格：：1号2号一种风格====13号另一种风格")]),e._v(" "),a("br"),e._v(" "),a("h3",[e._v("markDate 标记23号 单一风格 更简单")]),e._v(" "),a("div",{staticClass:"div",on:{click:e.demo}},[e._v("点击跳到2018-12-12")])],1)},r=[],o={render:n,staticRenderFns:r};t.a=o},"2lNz":function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=a("qPaF"),r=function(e){return e&&e.__esModule?e:{default:e}}(n);t.default={data:function(){return{arr2:[],arr:[{date:"2018/8/1",className:"mark1"},{date:"2018/8/13",className:"mark2"}]}},components:{Calendar:r.default},methods:{clickDay:function(e){console.log("选中了",e),this.$toast("选中了"+e)},clickToday:function(e){console.log("跳到了本月今天",e)},changeDate:function(e){this.$toast("切换到的月份为"+e),console.log("左右点击切换月份",e)},demo:function(){this.$refs.Calendar.ChoseMonth("2018-12-13")}},created:function(){function e(e,t){return e=new Date(e),e.getFullYear()+"-"+(e.getMonth()+1)+"-"+t}var t=this;setTimeout(function(){t.arr=[{date:e(new Date,3),className:"mark1"},{date:e(new Date,12),className:"mark2"}],t.arr.push({date:e(new Date,15),className:"mark1"})},300)}}},"40c4":function(e,t,a){"use strict";var n=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{attrs:{id:"app"}},[a("router-view")],1)},r=[],o={render:n,staticRenderFns:r};t.a=o},M93x:function(e,t,a){"use strict";function n(e){a("Q+oy")}Object.defineProperty(t,"__esModule",{value:!0});var r=a("xJD8"),o=a.n(r);for(var u in r)"default"!==u&&function(e){a.d(t,e,function(){return r[e]})}(u);var c=a("40c4"),l=a("VU/8"),s=n,i=l(o.a,c.a,!1,s,null,null);t.default=i.exports},NHnr:function(e,t,a){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}var r=a("7+uW"),o=n(r),u=a("M93x"),c=n(u),l=a("YaEn"),s=n(l),i=a("lmBj"),d=n(i);o.default.config.productionTip=!1,o.default.use(d.default),new o.default({el:"#app",router:s.default,template:"",components:{App:c.default}})},"Q+oy":function(e,t){},YaEn:function(e,t,a){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var r=a("7+uW"),o=n(r),u=a("/ocq"),c=n(u),l=a("eNIl"),s=n(l);o.default.use(c.default),t.default=new c.default({routes:[{path:"/",name:"Hello",component:s.default}]})},dHB5:function(e,t){},eNIl:function(e,t,a){"use strict";function n(e){a("dHB5")}Object.defineProperty(t,"__esModule",{value:!0});var r=a("2lNz"),o=a.n(r);for(var u in r)"default"!==u&&function(e){a.d(t,e,function(){return r[e]})}(u);var c=a("2+Mw"),l=a("VU/8"),s=n,i=l(o.a,c.a,!1,s,"data-v-02a3a480",null);t.default=i.exports},xJD8:function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={name:"app"}}},["NHnr"]);
--------------------------------------------------------------------------------
/src/demo/demo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
14 |
15 |
markDateMore标记不同风格：：1号2号一种风格====13号另一种风格
16 |
17 |
markDate 标记23号 单一风格 更简单
18 |
点击跳到2018-12-12
19 |
100 | 然后在根目录创建一个 .babelrc 文件
101 | 在输入,
102 | {
103 | "presets": ["env"]
104 | }
105 |
保存 重新build就OK了
106 |
107 | [babel-preset-env官方文档](https://github.com/babel/babel-preset-env)
108 | ## Other
109 |
110 | * src 下面的 App.vue 有 demo 可以参考
111 | * 如果有其他问题或者版本上, 功能上不兼容的 邮件沟通 zwhcoder@gmail.com，请具体 标明问题。
112 |
--------------------------------------------------------------------------------
/src/vue-calendar-component/calendar.vue:
--------------------------------------------------------------------------------
1 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
{{dateTop}}
143 |
144 |
145 |
146 |
147 |
152 |
160 |