├── .nvmrc ├── static └── .gitkeep ├── .eslintignore ├── config ├── prod.env.js ├── npm.env.js ├── test.env.js ├── dev.env.js └── index.js ├── index.js ├── src ├── assets │ ├── demo.gif │ ├── logo.png │ ├── fonts │ │ ├── calendar.eot │ │ ├── calendar.ttf │ │ ├── calendar.woff │ │ └── calendar.svg │ └── sass │ │ └── markdown.scss ├── views │ ├── index.js │ └── demo │ │ └── index.js ├── components │ ├── Logo.vue │ ├── Lorem.vue │ ├── Hello.vue │ └── Calendar.vue ├── locale │ ├── en.js │ ├── zh-CN.js │ └── zh-TW.js ├── main.js ├── modules │ ├── App.vue │ └── Docs.vue ├── utils │ ├── event.js │ └── lunar.js └── directives │ └── transfer.js ├── test └── unit │ ├── .eslintrc │ ├── specs │ └── Hello.spec.js │ ├── index.js │ └── karma.conf.js ├── lib ├── calendar.min.js.LICENSE.txt ├── locale │ ├── zh-CN.js │ ├── zh-TW.js │ └── en.js ├── utils │ ├── event.js │ └── lunar.js ├── directives │ └── transfer.js ├── calendar.min.css ├── calendar.css ├── calendar.min.js └── Calendar.vue ├── .editorconfig ├── .postcssrc.js ├── index.html ├── .gitignore ├── deploy └── doc.sh ├── .babelrc ├── .eslintrc.js ├── LICENSE ├── example └── demo.html ├── package.json └── README.md /.nvmrc: -------------------------------------------------------------------------------- 1 | 18 2 | -------------------------------------------------------------------------------- /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/*.js 2 | config/*.js 3 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | export default { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /config/npm.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | export default { 3 | NODE_ENV: '"npm"' 4 | } 5 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import Calendar from './lib/Calendar.vue'; 2 | export default Calendar; 3 | 4 | -------------------------------------------------------------------------------- /src/assets/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/icai/vue3-calendar/HEAD/src/assets/demo.gif -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/icai/vue3-calendar/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/fonts/calendar.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/icai/vue3-calendar/HEAD/src/assets/fonts/calendar.eot -------------------------------------------------------------------------------- /src/assets/fonts/calendar.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/icai/vue3-calendar/HEAD/src/assets/fonts/calendar.ttf -------------------------------------------------------------------------------- /src/assets/fonts/calendar.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/icai/vue3-calendar/HEAD/src/assets/fonts/calendar.woff -------------------------------------------------------------------------------- /test/unit/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "mocha": true 4 | }, 5 | "globals": { 6 | "expect": true, 7 | "sinon": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /lib/calendar.min.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /*! 2 | * vue3-calendar v3.0.3 3 | * (c) 2023 Terry 4 | * https://github.com/icai/vue3-calendar#readme 5 | */ 6 | -------------------------------------------------------------------------------- /config/test.env.js: -------------------------------------------------------------------------------- 1 | import { merge } from "webpack-merge"; 2 | import devEnv from './dev.env.js' 3 | 4 | export default merge(devEnv, { 5 | NODE_ENV: '"testing"' 6 | }) 7 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | import { merge } from "webpack-merge"; 2 | import prodEnv from './prod.env.js' 3 | 4 | export default merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /src/views/index.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from '@/modules/App' 3 | import 'bootstrap/dist/css/bootstrap.min.css' 4 | 5 | createApp(App).mount('#app'); 6 | 7 | -------------------------------------------------------------------------------- /src/views/demo/index.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import Docs from '@/modules/Docs' 3 | import 'bootstrap/dist/css/bootstrap.min.css' 4 | 5 | createApp(Docs).mount('#app'); 6 | 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserslist" field in package.json 6 | "autoprefixer": {} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /lib/locale/zh-CN.js: -------------------------------------------------------------------------------- 1 | export default{daysOfWeek:["日","一","二","三","四","五","六"],limit:"已达到限制（最多{{limit}}项）。",loading:"加载中...",minLength:"最小长度",months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],notSelected:"未选择任何项",required:"必填",search:"搜索"}; -------------------------------------------------------------------------------- /lib/locale/zh-TW.js: -------------------------------------------------------------------------------- 1 | export default{daysOfWeek:["日","一","二","三","四","五","六"],limit:"已達到限制（最多{{limit}}項）。",loading:"載入中...",minLength:"最小長度",months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],notSelected:"未選擇任何項目",required:"必填",search:"搜尋"}; -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue3-calendar 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | docs/ 5 | npm-debug.log* 6 | yarn-debug.log* 7 | yarn-error.log* 8 | test/unit/coverage 9 | 10 | # Editor directories and files 11 | .idea 12 | .vscode 13 | *.suo 14 | *.ntvs* 15 | *.njsproj 16 | *.sln 17 | -------------------------------------------------------------------------------- /lib/locale/en.js: -------------------------------------------------------------------------------- 1 | export default{daysOfWeek:["Su","Mo","Tu","We","Th","Fr","Sa"],limit:"Limit reached ({{limit}} items max).",loading:"Loading...",minLength:"Min. Length",months:["January","February","March","April","May","June","July","August","September","October","November","December"],notSelected:"Nothing Selected",required:"Required",search:"Search"}; -------------------------------------------------------------------------------- /src/components/Logo.vue: -------------------------------------------------------------------------------- 1 | 6 | 16 | -------------------------------------------------------------------------------- /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/locale/en.js: -------------------------------------------------------------------------------- 1 | export default { 2 | daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], 3 | limit: 'Limit reached ({{limit}} items max).', 4 | loading: 'Loading...', 5 | minLength: 'Min. Length', 6 | months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], 7 | notSelected: 'Nothing Selected', 8 | required: 'Required', 9 | search: 'Search' 10 | } 11 | -------------------------------------------------------------------------------- /src/locale/zh-CN.js: -------------------------------------------------------------------------------- 1 | export default { 2 | daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"], 3 | limit: "已达到限制（最多{{limit}}项）。", 4 | loading: "加载中...", 5 | minLength: "最小长度", 6 | months: [ 7 | "一月", 8 | "二月", 9 | "三月", 10 | "四月", 11 | "五月", 12 | "六月", 13 | "七月", 14 | "八月", 15 | "九月", 16 | "十月", 17 | "十一月", 18 | "十二月" 19 | ], 20 | notSelected: "未选择任何项", 21 | required: "必填", 22 | search: "搜索" 23 | }; 24 | -------------------------------------------------------------------------------- /src/locale/zh-TW.js: -------------------------------------------------------------------------------- 1 | export default { 2 | daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"], 3 | limit: "已達到限制（最多{{limit}}項）。", 4 | loading: "載入中...", 5 | minLength: "最小長度", 6 | months: [ 7 | "一月", 8 | "二月", 9 | "三月", 10 | "四月", 11 | "五月", 12 | "六月", 13 | "七月", 14 | "八月", 15 | "九月", 16 | "十月", 17 | "十一月", 18 | "十二月" 19 | ], 20 | notSelected: "未選擇任何項目", 21 | required: "必填", 22 | search: "搜尋" 23 | }; 24 | -------------------------------------------------------------------------------- /deploy/doc.sh: -------------------------------------------------------------------------------- 1 | if [ ! -d "docs/" ]; then 2 | echo "build docs, firstly [npm run doc]" 3 | exit 0 4 | fi 5 | 6 | export TRAVIS_COMMIT_MSG="[deploy] $(git log --format='%h - %B' --no-merges -n 1)" 7 | mkdir temp_web 8 | 9 | git clone --depth 1 -b gh-pages --single-branch git@github.com:icai/vue3-calendar.git temp_web 10 | 11 | cp -rf docs/** temp_web/ 12 | 13 | cd temp_web 14 | git add -A . 15 | git commit -m "$TRAVIS_COMMIT_MSG" 16 | git push origin gh-pages 17 | cd .. 18 | rm -rf temp_web/ 19 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "modules": false, 7 | "targets": { 8 | "browsers": [ 9 | "> 1%", 10 | "last 2 versions", 11 | "not ie <= 8" 12 | ] 13 | } 14 | } 15 | ] 16 | ], 17 | "plugins": [ 18 | [ 19 | "@babel/plugin-proposal-decorators", 20 | { 21 | "legacy": true 22 | } 23 | ], 24 | "@babel/plugin-proposal-function-sent", 25 | "@babel/plugin-proposal-throw-expressions" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue"; 2 | import App from './modules/App' 3 | // import Docs from './modules/Docs' 4 | // import 'bootstrap-sass' 5 | import pp from '../package.json' assert {type:'json'} 6 | 7 | const routemaps = { 8 | '/': function () { 9 | createApp(App).mount('#app'); 10 | }, 11 | '/demo/': function () { 12 | createApp(Docs).mount('#app'); 13 | } 14 | } 15 | 16 | const prefix = pp.name 17 | var route = '' 18 | if (window.location.pathname.indexOf(prefix)) { 19 | route = window.location.pathname.replace('/' + prefix, '') 20 | } else { 21 | route = window.location.pathname 22 | } 23 | const app = routemaps[route] 24 | app && app() 25 | -------------------------------------------------------------------------------- /lib/utils/event.js: -------------------------------------------------------------------------------- 1 | function E(){}E.prototype={on:function(t,e,n){var i=this.e||(this.e={});return(i[t]||(i[t]=[])).push({fn:e,ctx:n}),this},once:function(t,e,n){var i=this;function o(){i.off(t,o),e.apply(n,arguments)}return o._=e,this.on(t,o,n)},emit:function(t){for(var e=[].slice.call(arguments,1),n=((this.e||(this.e={}))[t]||[]).slice(),i=0,o=n.length;iemitter.on(...t),$once:(...t)=>emitter.once(...t),$off:(...t)=>emitter.off(...t),$emit:(...t)=>emitter.emit(...t)}; -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // https://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parserOptions: { 6 | "parser": "babel-eslint", 7 | sourceType: 'module' 8 | }, 9 | env: { 10 | browser: true, 11 | }, 12 | // https://github.com/standard/standard/blob/master/docs/RULES-en.md 13 | extends: [ 14 | 'plugin:vue/essential' 15 | ], 16 | // required to lint *.vue files 17 | plugins: [ 18 | 'vue' 19 | ], 20 | // add your custom rules here 21 | 'rules': { 22 | // allow paren-less arrow functions 23 | 'arrow-parens': 0, 24 | // allow async-await 25 | 'generator-star-spacing': 0, 26 | // allow debugger during development 27 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/components/Lorem.vue: -------------------------------------------------------------------------------- 1 | 6 | 34 | -------------------------------------------------------------------------------- /src/components/Hello.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 21 | 40 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Terry Cai 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /lib/directives/transfer.js: -------------------------------------------------------------------------------- 1 | function getTarget(e){return void 0===e&&(e=document.body),!0===e?document.body:e instanceof window.Node?e:document.querySelector(e)}const transfer={mounted(e,t){const a=t.value;if(!1===a)return!1;e.className=e.className?e.className+" v-transfer":"v-transfer";const r=e.parentNode;if(!r)return;const n=document.createComment("");let o=!1;!1!==a&&(r.replaceChild(n,e),getTarget(a).appendChild(e),o=!0),e.__transferDomData||(e.__transferDomData={parentNode:r,home:n,target:getTarget(a),hasMovedOut:o})},updated(e,t){const a=t.value;if(!1===a)return!1;const r=e.__transferDomData;if(!r)return;const n=r.parentNode,o=r.home,s=r.hasMovedOut;!s&&a?(n.replaceChild(o,e),getTarget(a).appendChild(e),e.__transferDomData=Object.assign({},e.__transferDomData,{hasMovedOut:!0,target:getTarget(a)})):s&&!1===a?(n.replaceChild(e,o),e.__transferDomData=Object.assign({},e.__transferDomData,{hasMovedOut:!1,target:getTarget(a)})):a&&getTarget(a).appendChild(e)},unmounted(e,t){if(!1===t.value)return!1;e.className=e.className.replace("v-transfer","");e.__transferDomData&&(!0===e.__transferDomData.hasMovedOut&&e.__transferDomData.parentNode&&e.__transferDomData.parentNode.appendChild(e),e.__transferDomData=null)}};export default transfer; -------------------------------------------------------------------------------- /src/assets/fonts/calendar.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/modules/App.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 38 | 39 | 40 | 64 | -------------------------------------------------------------------------------- /example/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | vue3-calendar 8 | 12 | 13 | 14 | 15 | 16 |
17 |
18 | 26 |
27 |
28 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /src/utils/event.js: -------------------------------------------------------------------------------- 1 | function E () { 2 | // Keep this empty so it's easier to inherit from 3 | // (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3) 4 | } 5 | 6 | E.prototype = { 7 | on: function (name, callback, ctx) { 8 | var e = this.e || (this.e = {}); 9 | 10 | (e[name] || (e[name] = [])).push({ 11 | fn: callback, 12 | ctx: ctx 13 | }); 14 | 15 | return this; 16 | }, 17 | 18 | once: function (name, callback, ctx) { 19 | var self = this; 20 | function listener () { 21 | self.off(name, listener); 22 | callback.apply(ctx, arguments); 23 | }; 24 | 25 | listener._ = callback 26 | return this.on(name, listener, ctx); 27 | }, 28 | 29 | emit: function (name) { 30 | var data = [].slice.call(arguments, 1); 31 | var evtArr = ((this.e || (this.e = {}))[name] || []).slice(); 32 | var i = 0; 33 | var len = evtArr.length; 34 | 35 | for (i; i < len; i++) { 36 | evtArr[i].fn.apply(evtArr[i].ctx, data); 37 | } 38 | 39 | return this; 40 | }, 41 | 42 | off: function (name, callback) { 43 | var e = this.e || (this.e = {}); 44 | var evts = e[name]; 45 | var liveEvents = []; 46 | 47 | if (evts && callback) { 48 | for (var i = 0, len = evts.length; i < len; i++) { 49 | if (evts[i].fn !== callback && evts[i].fn._ !== callback) 50 | liveEvents.push(evts[i]); 51 | } 52 | } 53 | 54 | // Remove event from queue to prevent memory leak 55 | // Suggested by https://github.com/lazd 56 | // Ref: https://github.com/scottcorgan/tiny-emitter/commit/c6ebfaa9bc973b33d110a84a307742b7cf94c953#commitcomment-5024910 57 | 58 | (liveEvents.length) 59 | ? e[name] = liveEvents 60 | : delete e[name]; 61 | 62 | return this; 63 | } 64 | }; 65 | 66 | export default E; 67 | export const emitter = new E(); 68 | 69 | export const eventbus = { 70 | $on: (...args) => emitter.on(...args), 71 | $once: (...args) => emitter.once(...args), 72 | $off: (...args) => emitter.off(...args), 73 | $emit: (...args) => emitter.emit(...args) 74 | } 75 | -------------------------------------------------------------------------------- /src/directives/transfer.js: -------------------------------------------------------------------------------- 1 | function getTarget(node) { 2 | if (node === void 0) { 3 | node = document.body; 4 | } 5 | if (node === true) { 6 | return document.body; 7 | } 8 | return node instanceof window.Node ? node : document.querySelector(node); 9 | } 10 | // https://v3-migration.vuejs.org/breaking-changes/custom-directives.html#_3-x-syntax 11 | const transfer = { 12 | mounted(el, binding) { 13 | const value = binding.value; 14 | if (value === false) return false; 15 | el.className = el.className ? el.className + " v-transfer" : "v-transfer"; 16 | const parentNode = el.parentNode; 17 | if (!parentNode) return; 18 | const home = document.createComment(""); 19 | let hasMovedOut = false; 20 | if (value !== false) { 21 | parentNode.replaceChild(home, el); // moving out, el is no longer in the document 22 | getTarget(value).appendChild(el); // moving into new place 23 | hasMovedOut = true; 24 | } 25 | if (!el.__transferDomData) { 26 | el.__transferDomData = { 27 | parentNode: parentNode, 28 | home: home, 29 | target: getTarget(value), 30 | hasMovedOut: hasMovedOut 31 | }; 32 | } 33 | }, 34 | updated(el, binding) { 35 | const value = binding.value; 36 | if (value === false) return false; 37 | // need to make sure children are done updating (vs. `update`) 38 | const ref$1 = el.__transferDomData; 39 | if (!ref$1) return; 40 | // homes.get(el) 41 | const parentNode = ref$1.parentNode; 42 | const home = ref$1.home; 43 | const hasMovedOut = ref$1.hasMovedOut; // recall where home is 44 | 45 | if (!hasMovedOut && value) { 46 | // remove from document and leave placeholder 47 | parentNode.replaceChild(home, el); 48 | // append to target 49 | getTarget(value).appendChild(el); 50 | el.__transferDomData = Object.assign({}, el.__transferDomData, { 51 | hasMovedOut: true, 52 | target: getTarget(value) 53 | }); 54 | } else if (hasMovedOut && value === false) { 55 | // previously moved, coming back home 56 | parentNode.replaceChild(el, home); 57 | el.__transferDomData = Object.assign({}, el.__transferDomData, { 58 | hasMovedOut: false, 59 | target: getTarget(value) 60 | }); 61 | } else if (value) { 62 | // already moved, going somewhere else 63 | getTarget(value).appendChild(el); 64 | } 65 | }, 66 | unmounted(el, binding) { 67 | const value = binding.value; 68 | if (value === false) return false; 69 | el.className = el.className.replace("v-transfer", ""); 70 | const ref$1 = el.__transferDomData; 71 | if (!ref$1) return; 72 | if (el.__transferDomData.hasMovedOut === true) { 73 | el.__transferDomData.parentNode && 74 | el.__transferDomData.parentNode.appendChild(el); 75 | } 76 | el.__transferDomData = null; 77 | } 78 | }; 79 | 80 | export default transfer; 81 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | import path from 'path' 2 | import pp from '../package.json' assert {type:'json'} 3 | import prodEnv from './prod.env.js' 4 | import devEnv from './dev.env.js' 5 | import npmEnv from './npm.env.js' 6 | import {fileURLToPath} from 'url'; 7 | const __filename = fileURLToPath(import.meta.url); 8 | const __dirname = path.dirname(__filename) 9 | 10 | 11 | export default { 12 | build: { 13 | env: prodEnv, 14 | index: path.resolve(__dirname, '../dist/index.html'), 15 | demo: path.resolve(__dirname, '../dist/demo/index.html'), 16 | assetsRoot: path.resolve(__dirname, '../dist'), 17 | assetsSubDirectory: 'static', 18 | assetsPublicPath: '/', 19 | productionSourceMap: true, 20 | // Gzip off by default as many popular static hosts such as 21 | // Surge or Netlify already gzip all static assets for you. 22 | // Before setting to `true`, make sure to: 23 | // npm install --save-dev compression-webpack-plugin 24 | productionGzip: false, 25 | productionGzipExtensions: ['js', 'css'], 26 | // Run the build command with an extra argument to 27 | // View the bundle analyzer report after build finishes: 28 | // `npm run build --report` 29 | // Set to `true` or `false` to always turn it on or off 30 | bundleAnalyzerReport: process.env.npm_config_report 31 | }, 32 | dev: { 33 | env: devEnv, 34 | index: path.resolve(__dirname, '../dist/index.html'), 35 | demo: path.resolve(__dirname, '../dist/demo/index.html'), 36 | assetsRoot: path.resolve(__dirname, '../dist'), 37 | port: process.env.PORT || 4000, 38 | autoOpenBrowser: true, 39 | assetsSubDirectory: 'static', 40 | assetsPublicPath: '/', 41 | proxyTable: {}, 42 | // CSS Sourcemaps off by default because relative paths are "buggy" 43 | // with this option, according to the CSS-Loader README 44 | // (https://github.com/webpack/css-loader#sourcemaps) 45 | // In our experience, they generally work as expected, 46 | // just be aware of this issue when enabling this option. 47 | cssSourceMap: false 48 | }, 49 | npm: { 50 | env: npmEnv, 51 | assetsRoot: path.resolve(__dirname, '../lib'), 52 | productionSourceMap: true 53 | }, 54 | doc: { 55 | env: prodEnv, 56 | index: path.resolve(__dirname, '../docs/index.html'), 57 | demo: path.resolve(__dirname, '../docs/demo/index.html'), 58 | assetsRoot: path.resolve(__dirname, '../docs'), 59 | assetsSubDirectory: 'static', 60 | assetsPublicPath: path.join('/', pp.name, '/'), 61 | productionSourceMap: true, 62 | // Gzip off by default as many popular static hosts such as 63 | // Surge or Netlify already gzip all static assets for you. 64 | // Before setting to `true`, make sure to: 65 | // npm install --save-dev compression-webpack-plugin 66 | productionGzip: false, 67 | productionGzipExtensions: ['js', 'css'], 68 | bundleAnalyzerReport: process.env.npm_config_report, 69 | 70 | publicPath: 'http://localhost:8080/', 71 | 72 | port: process.env.PORT || 4000, 73 | assetsDemoDirectory: 'demo', 74 | proxyTable: {}, 75 | // CSS Sourcemaps off by default because relative paths are "buggy" 76 | // with this option, according to the CSS-Loader README 77 | // (https://github.com/webpack/css-loader#sourcemaps) 78 | // In our experience, they generally work as expected, 79 | // just be aware of this issue when enabling this option. 80 | cssSourceMap: false 81 | } 82 | 83 | } 84 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-slot-calendar", 3 | "aliasName": "vue3-calendar", 4 | "version": "3.0.3", 5 | "description": "vue3 bootstrap style calendar", 6 | "author": "Terry ", 7 | "scripts": { 8 | "dev": "webpack serve --config build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | "doc": "node build/docs.js", 11 | "doc:serve": "node build/doc.server.js", 12 | "build": "node build/build.js", 13 | "lib": "cross-env BABEL_ENV=npm node build/npm.js", 14 | "deploy:doc": "npm run doc && sh deploy/doc.sh", 15 | "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run", 16 | "test": "npm run unit", 17 | "lint": "eslint --ext .js,.vue src test/unit/specs --fix" 18 | }, 19 | "main": "./index.js", 20 | "type": "module", 21 | "files": [ 22 | "index.js", 23 | "lib", 24 | "example" 25 | ], 26 | "devDependencies": { 27 | "@babel/core": "^7.23.6", 28 | "@babel/plugin-proposal-decorators": "^7.23.6", 29 | "@babel/plugin-proposal-function-sent": "^7.23.3", 30 | "@babel/plugin-proposal-throw-expressions": "^7.23.3", 31 | "@babel/preset-env": "^7.23.3", 32 | "autoprefixer": "^10.4.16", 33 | "babel-eslint": "^10.1.0", 34 | "babel-loader": "^9.1.3", 35 | "bootstrap": "^5.3.2", 36 | "chai": "^4.3.10", 37 | "chalk": "^5.3.0", 38 | "connect-history-api-fallback": "^2.0.0", 39 | "copy-webpack-plugin": "^11.0.0", 40 | "core-js": "3", 41 | "cross-env": "^7.0.3", 42 | "css-loader": "^6.8.1", 43 | "css-minimizer-webpack-plugin": "^5.0.1", 44 | "eslint": "^8.54.0", 45 | "eslint-config-standard": "^17.1.0", 46 | "eslint-plugin-html": "^7.1.0", 47 | "eslint-plugin-import": "^2.29.0", 48 | "eslint-plugin-node": "^11.1.0", 49 | "eslint-plugin-promise": "^6.1.1", 50 | "eslint-plugin-standard": "^5.0.0", 51 | "eslint-plugin-vue": "^9.18.1", 52 | "eslint-webpack-plugin": "^4.0.1", 53 | "eventsource-polyfill": "^0.9.6", 54 | "express": "^4.18.2", 55 | "file-loader": "^6.2.0", 56 | "html-loader": "^4.2.0", 57 | "html-webpack-plugin": "^5.5.3", 58 | "http-proxy-middleware": "^2.0.6", 59 | "karma": "^6.4.2", 60 | "karma-coverage": "^2.2.1", 61 | "karma-mocha": "^2.0.1", 62 | "karma-phantomjs-launcher": "^1.0.4", 63 | "karma-phantomjs-shim": "^1.5.0", 64 | "karma-sinon-chai": "^2.0.2", 65 | "karma-sourcemap-loader": "^0.4.0", 66 | "karma-spec-reporter": "0.0.36", 67 | "karma-webpack": "^5.0.0", 68 | "lolex": "^6.0.0", 69 | "markdown-loader": "^8.0.0", 70 | "mini-css-extract-plugin": "^2.7.6", 71 | "mocha": "^10.2.0", 72 | "node-sass": "^9.0.0", 73 | "opn": "^6.0.0", 74 | "ora": "^7.0.1", 75 | "phantomjs-prebuilt": "^2.1.16", 76 | "portfinder": "^1.0.32", 77 | "rimraf": "^5.0.5", 78 | "sass-loader": "^13.3.2", 79 | "semver": "^7.5.4", 80 | "shelljs": "^0.8.5", 81 | "sinon": "^17.0.1", 82 | "sinon-chai": "^3.7.0", 83 | "terser-webpack-plugin": "^5.3.9", 84 | "url-loader": "^4.1.1", 85 | "vue": "^3.4.0", 86 | "vue-loader": "^17.4.0", 87 | "vue-style-loader": "^4.1.3", 88 | "vue-template-compiler": "^2.7.16", 89 | "webpack": "^5.89.0", 90 | "webpack-bundle-analyzer": "^4.10.1", 91 | "webpack-cli": "^5.1.4", 92 | "webpack-dev-middleware": "^7.0.0", 93 | "webpack-dev-server": "^4.15.1", 94 | "webpack-hot-middleware": "^2.26.0", 95 | "webpack-merge": "^5.10.0" 96 | }, 97 | "engines": { 98 | "node": ">= 18.0.0", 99 | "npm": ">= 9.8.1" 100 | }, 101 | "browserslist": [ 102 | "> 0.25%, not dead" 103 | ], 104 | "directories": { 105 | "doc": "docs", 106 | "test": "test" 107 | }, 108 | "repository": { 109 | "type": "git", 110 | "url": "git+https://github.com/icai/vue3-calendar.git" 111 | }, 112 | "keywords": [ 113 | "vue2", 114 | "vue3", 115 | "calendar", 116 | "slot", 117 | "boostrap" 118 | ], 119 | "license": "MIT", 120 | "bugs": { 121 | "url": "https://github.com/icai/vue3-calendar/issues" 122 | }, 123 | "homepage": "https://github.com/icai/vue3-calendar#readme" 124 | } 125 | -------------------------------------------------------------------------------- /lib/calendar.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * vue3-calendar v3.0.3 3 | * (c) 2023 Terry 4 | * https://github.com/icai/vue3-calendar#readme 5 | */.datepicker{box-sizing:border-box;font-family:Avenir,Helvetica,Arial,sans-serif;font-size:14px;-webkit-tap-highlight-color:#0000;-webkit-font-smoothing:antialiased;color:rgba(0,0,0,.651);display:inline-block;position:relative}.datepicker .form-control{background-color:#fff;background-image:none;border:1px solid #d9d9d9;border-radius:4px;box-shadow:none;box-sizing:border-box;color:#555;display:block;font-size:14px;height:34px;line-height:1.42857;padding:6px 12px;width:100%}.datepicker .form-control:focus,.datepicker .form-control:hover{border-color:#40a9ff;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px #66afe999;outline:0}.datepicker button.close{-webkit-appearance:none;background:#0000;border:0;color:#000;cursor:pointer;filter:alpha(opacity=20);float:right;font-size:21px;font-weight:700;line-height:1;opacity:.2;padding:0;text-shadow:0 1px 0 #fff}input.datepicker-input.with-reset-button{padding-right:25px}.datepicker>button.close{display:block;height:34px;line-height:34px;outline:none;position:absolute;right:0;text-align:center;top:0;width:34px;z-index:2}.datepicker>button.close:focus{opacity:.2}.datepicker-wrapper{position:absolute;z-index:1000}.datepicker-popup{background:#fff;border:1px solid #fff;border-radius:5px;box-shadow:0 2px 8px #00000026;margin-top:2px}.datepicker-popup:after,.datepicker-popup:before{content:" ";display:table}.datepicker-popup:after{clear:both}.datepicker-inner{float:left;width:218px}.datepicker-body{padding:10px;text-align:center}.datepicker-body p{margin:0 0 10px}.datepicker-body span,.datepicker-ctrl p,.datepicker-ctrl span{display:inline-block;height:28px;line-height:28px;width:28px}.datepicker-ctrl p{width:65%}.datepicker-ctrl span{position:absolute}.datepicker-body span{text-align:center}.datepicker-monthRange span{height:50px;line-height:45px;width:48px}.datepicker-item-disable{background-color:#fff!important;cursor:not-allowed!important}.datepicker-item-disable,.datepicker-item-gray,.decadeRange span:first-child,.decadeRange span:last-child{color:#999}.datepicker-dateRange-item-active,.datepicker-dateRange-item-active:hover{background:#3276b1!important;color:#fff!important}.datepicker-item-disabled{color:#aaa;text-decoration:line-through}.datepicker-monthRange{margin-top:10px}.datepicker-ctrl p,.datepicker-ctrl span,.datepicker-dateRange span,.datepicker-monthRange span{cursor:pointer}.datepicker-ctrl i:hover,.datepicker-ctrl p:hover,.datepicker-dateRange span:hover,.datepicker-dateRange-item-hover,.datepicker-monthRange span:hover{background-color:#eee}.datepicker-dateRange .daytoday-end,.datepicker-dateRange .daytoday-end:hover,.datepicker-dateRange .daytoday-start,.datepicker-dateRange .daytoday-start:hover{background:#3276b1!important;color:#fff!important}.datepicker-dateRange .daytoday-range,.datepicker-dateRange .daytoday-range:hover{background-color:#ddd}.datepicker-weekRange span{font-weight:700}.datepicker-label{background-color:#f8f8f8;font-weight:700;padding:7px 0;text-align:center}.datepicker-ctrl{font-weight:700;line-height:30px;position:relative;text-align:center;top:3px}.month-btn{font-weight:700;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.datepicker-preBtn{left:2px}.datepicker-nextBtn,.datepicker-preBtn{background-repeat:no-repeat;background-size:18px;height:20px!important;width:20px!important}.datepicker-nextBtn{right:2px}.calendaricon-angle-left{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDI0IiBoZWlnaHQ9IjEwMjQiPjxwYXRoIGQ9Ik03MTcuMjc2IDIxOC41NTFjMCA1LjY1NC0yLjgyOCAxMS45OS03LjA2MiAxNi4yMTNMNDMzLjAwMSA1MTEuOTc3IDcxMC4yMTQgNzg5LjE5YzQuMjQ0IDQuMjQ0IDcuMDYyIDEwLjU4MiA3LjA2MiAxNi4yMTNzLTIuODI4IDExLjk5LTcuMDYyIDE2LjIxM2wtMzUuMjY1IDM1LjI2NWMtNC4yNDQgNC4yNDQtMTAuNTgyIDcuMDYyLTE2LjIxMyA3LjA2MnMtMTEuOTktMi44MjgtMTYuMjEzLTcuMDYyTDMxMy44MDkgNTI4LjE2N2MtNC4yNDQtNC4yNDQtNy4wNjItMTAuNTgyLTcuMDYyLTE2LjIxM3MyLjgyOC0xMS45OSA3LjA2Mi0xNi4yMTNsMzI4LjcxNC0zMjguNzE0YzQuMjQ0LTQuMjQ0IDEwLjU4Mi03LjA2MiAxNi4yMTMtNy4wNjJzMTEuOTkgMi44MjggMTYuMjEzIDcuMDYybDM1LjI2NSAzNS4yNjVjNC4yNDQgNC4yNDQgNy4wNjIgOS44NzggNy4wNjIgMTYuMjEzeiIvPjwvc3ZnPg==);top:10px}.calendaricon-angle-right{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDI0IiBoZWlnaHQ9IjEwMjQiPjxwYXRoIGQ9Ik03MTcuMjc0IDUxMmMwIDUuNjUtMi44MjUgMTEuOTg5LTcuMDYyIDE2LjIxOEwzODEuNDg0IDg1Ni45NDZjLTQuMjM4IDQuMjM4LTEwLjU4MiA3LjA2Mi0xNi4yMTggNy4wNjJzLTExLjk4OS0yLjgyNS0xNi4yMTgtNy4wNjJsLTM1LjI2NC0zNS4yNjRjLTQuMjM4LTQuMjM4LTcuMDYyLTkuODc4LTcuMDYyLTE2LjIxOCAwLTUuNjUgMi44MjUtMTEuOTg5IDcuMDYyLTE2LjIxOGwyNzcuMjIyLTI3Ny4yMjItMjc3LjIyMi0yNzcuMjIyYy00LjIzOC00LjIzOC03LjA2Mi0xMC41ODItNy4wNjItMTYuMjE4czIuODI1LTExLjk4OSA3LjA2Mi0xNi4yMThsMzUuMjY0LTM1LjI2NGM0LjIzOC00LjIzOCAxMC41ODItNy4wNjIgMTYuMjE4LTcuMDYyczExLjk4OSAyLjgyNSAxNi4yMTggNy4wNjJMNzEwLjIxMiA0OTUuODNjNC4yMzggNC4yMzggNy4wNjIgMTAuNTgyIDcuMDYyIDE2LjIxOHoiLz48L3N2Zz4=);top:10px} -------------------------------------------------------------------------------- /lib/calendar.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * vue3-calendar v3.0.3 3 | * (c) 2023 Terry 4 | * https://github.com/icai/vue3-calendar#readme 5 | */ 6 | .datepicker { 7 | font-size: 14px; 8 | font-family: "Avenir", Helvetica, Arial, sans-serif; 9 | box-sizing: border-box; 10 | -webkit-tap-highlight-color: #0000; 11 | -webkit-font-smoothing: antialiased; 12 | color: rgba(0, 0, 0, 0.65098); 13 | position: relative; 14 | display: inline-block; 15 | } 16 | .datepicker .form-control { 17 | box-sizing: border-box; 18 | display: block; 19 | width: 100%; 20 | height: 34px; 21 | padding: 6px 12px; 22 | font-size: 14px; 23 | line-height: 1.42857; 24 | color: #555; 25 | background-color: #fff; 26 | background-image: none; 27 | border: 1px solid #d9d9d9; 28 | border-radius: 4px; 29 | box-shadow: none; 30 | } 31 | .datepicker .form-control:hover, .datepicker .form-control:focus { 32 | outline: 0; 33 | border-color: #40a9ff; 34 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); 35 | } 36 | .datepicker button.close { 37 | padding: 0; 38 | cursor: pointer; 39 | background: #0000; 40 | border: 0; 41 | -webkit-appearance: none; 42 | float: right; 43 | font-size: 21px; 44 | font-weight: bold; 45 | line-height: 1; 46 | color: #000; 47 | text-shadow: 0 1px 0 #fff; 48 | opacity: 0.2; 49 | filter: alpha(opacity=20); 50 | } 51 | input.datepicker-input.with-reset-button { 52 | padding-right: 25px; 53 | } 54 | .datepicker > button.close { 55 | position: absolute; 56 | top: 0; 57 | right: 0; 58 | outline: none; 59 | z-index: 2; 60 | display: block; 61 | width: 34px; 62 | height: 34px; 63 | line-height: 34px; 64 | text-align: center; 65 | } 66 | .datepicker > button.close:focus { 67 | opacity: 0.2; 68 | } 69 | .datepicker-wrapper { 70 | position: absolute; 71 | z-index: 1000; 72 | } 73 | .datepicker-popup { 74 | border: 1px solid #fff; 75 | border-radius: 5px; 76 | background: #fff; 77 | margin-top: 2px; 78 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); 79 | } 80 | .datepicker-popup:before, .datepicker-popup:after { 81 | content: " "; 82 | display: table; 83 | } 84 | .datepicker-popup:after { 85 | clear: both; 86 | } 87 | .datepicker-inner { 88 | width: 218px; 89 | float: left; 90 | } 91 | .datepicker-body { 92 | padding: 10px 10px; 93 | text-align: center; 94 | } 95 | .datepicker-body p { 96 | margin: 0 0 10px; 97 | } 98 | .datepicker-ctrl p, 99 | .datepicker-ctrl span, 100 | .datepicker-body span { 101 | display: inline-block; 102 | width: 28px; 103 | line-height: 28px; 104 | height: 28px; 105 | } 106 | .datepicker-ctrl p { 107 | width: 65%; 108 | } 109 | .datepicker-ctrl span { 110 | position: absolute; 111 | } 112 | .datepicker-body span { 113 | text-align: center; 114 | } 115 | .datepicker-monthRange span { 116 | width: 48px; 117 | height: 50px; 118 | line-height: 45px; 119 | } 120 | .datepicker-item-disable { 121 | background-color: white !important; 122 | cursor: not-allowed !important; 123 | } 124 | .decadeRange span:first-child, 125 | .decadeRange span:last-child, 126 | .datepicker-item-disable, 127 | .datepicker-item-gray { 128 | color: #999; 129 | } 130 | .datepicker-dateRange-item-active:hover, 131 | .datepicker-dateRange-item-active { 132 | background: #3276b1 !important; 133 | color: white !important; 134 | } 135 | .datepicker-item-disabled { 136 | color: #aaa; 137 | text-decoration: line-through; 138 | } 139 | .datepicker-monthRange { 140 | margin-top: 10px; 141 | } 142 | .datepicker-monthRange span, 143 | .datepicker-ctrl span, 144 | .datepicker-ctrl p, 145 | .datepicker-dateRange span { 146 | cursor: pointer; 147 | } 148 | .datepicker-monthRange span:hover, 149 | .datepicker-ctrl p:hover, 150 | .datepicker-ctrl i:hover, 151 | .datepicker-dateRange span:hover, 152 | .datepicker-dateRange-item-hover { 153 | background-color: #eeeeee; 154 | } 155 | .datepicker-dateRange .daytoday-start, 156 | .datepicker-dateRange .daytoday-start:hover, 157 | .datepicker-dateRange .daytoday-end, 158 | .datepicker-dateRange .daytoday-end:hover { 159 | background: #3276b1 !important; 160 | color: white !important; 161 | } 162 | .datepicker-dateRange .daytoday-range, 163 | .datepicker-dateRange .daytoday-range:hover { 164 | background-color: #ddd; 165 | } 166 | .datepicker-weekRange span { 167 | font-weight: bold; 168 | } 169 | .datepicker-label { 170 | background-color: #f8f8f8; 171 | font-weight: 700; 172 | padding: 7px 0; 173 | text-align: center; 174 | } 175 | .datepicker-ctrl { 176 | position: relative; 177 | /*height: 30px;*/ 178 | line-height: 30px; 179 | font-weight: bold; 180 | text-align: center; 181 | top: 3px; 182 | } 183 | .month-btn { 184 | font-weight: bold; 185 | -webkit-user-select: none; 186 | -moz-user-select: none; 187 | -ms-user-select: none; 188 | user-select: none; 189 | } 190 | .datepicker-preBtn { 191 | left: 2px; 192 | width: 20px !important; 193 | height: 20px !important; 194 | background-repeat: no-repeat; 195 | background-size: 18px; 196 | } 197 | .datepicker-nextBtn { 198 | right: 2px; 199 | width: 20px !important; 200 | height: 20px !important; 201 | background-repeat: no-repeat; 202 | background-size: 18px; 203 | } 204 | .calendaricon-angle-left { 205 | top: 10px; 206 | background-image: url(data:image/svg+xml;base64,PCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iMTAyNCIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCI+Cjx0aXRsZT48L3RpdGxlPgo8ZyBpZD0iaWNvbW9vbi1pZ25vcmUiPgo8L2c+CjxwYXRoIGQ9Ik03MTcuMjc2IDIxOC41NTFjMCA1LjY1NC0yLjgyOCAxMS45OS03LjA2MiAxNi4yMTNsLTI3Ny4yMTMgMjc3LjIxMyAyNzcuMjEzIDI3Ny4yMTNjNC4yNDQgNC4yNDQgNy4wNjIgMTAuNTgyIDcuMDYyIDE2LjIxM3MtMi44MjggMTEuOTktNy4wNjIgMTYuMjEzbC0zNS4yNjUgMzUuMjY1Yy00LjI0NCA0LjI0NC0xMC41ODIgNy4wNjItMTYuMjEzIDcuMDYycy0xMS45OS0yLjgyOC0xNi4yMTMtNy4wNjJsLTMyOC43MTQtMzI4LjcxNGMtNC4yNDQtNC4yNDQtNy4wNjItMTAuNTgyLTcuMDYyLTE2LjIxM3MyLjgyOC0xMS45OSA3LjA2Mi0xNi4yMTNsMzI4LjcxNC0zMjguNzE0YzQuMjQ0LTQuMjQ0IDEwLjU4Mi03LjA2MiAxNi4yMTMtNy4wNjJzMTEuOTkgMi44MjggMTYuMjEzIDcuMDYybDM1LjI2NSAzNS4yNjVjNC4yNDQgNC4yNDQgNy4wNjIgOS44NzggNy4wNjIgMTYuMjEzeiI+PC9wYXRoPgo8L3N2Zz4K); 207 | } 208 | .calendaricon-angle-right { 209 | top: 10px; 210 | background-image: url(data:image/svg+xml;base64,PCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iMTAyNCIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCI+Cjx0aXRsZT48L3RpdGxlPgo8ZyBpZD0iaWNvbW9vbi1pZ25vcmUiPgo8L2c+CjxwYXRoIGQ9Ik03MTcuMjc0IDUxMmMwIDUuNjUtMi44MjUgMTEuOTg5LTcuMDYyIDE2LjIxOGwtMzI4LjcyOCAzMjguNzI4Yy00LjIzOCA0LjIzOC0xMC41ODIgNy4wNjItMTYuMjE4IDcuMDYycy0xMS45ODktMi44MjUtMTYuMjE4LTcuMDYybC0zNS4yNjQtMzUuMjY0Yy00LjIzOC00LjIzOC03LjA2Mi05Ljg3OC03LjA2Mi0xNi4yMTggMC01LjY1IDIuODI1LTExLjk4OSA3LjA2Mi0xNi4yMThsMjc3LjIyMi0yNzcuMjIyLTI3Ny4yMjItMjc3LjIyMmMtNC4yMzgtNC4yMzgtNy4wNjItMTAuNTgyLTcuMDYyLTE2LjIxOHMyLjgyNS0xMS45ODkgNy4wNjItMTYuMjE4bDM1LjI2NC0zNS4yNjRjNC4yMzgtNC4yMzggMTAuNTgyLTcuMDYyIDE2LjIxOC03LjA2MnMxMS45ODkgMi44MjUgMTYuMjE4IDcuMDYybDMyOC43MjggMzI4LjcyOGM0LjIzOCA0LjIzOCA3LjA2MiAxMC41ODIgNy4wNjIgMTYuMjE4eiI+PC9wYXRoPgo8L3N2Zz4K); 211 | } 212 | 213 | -------------------------------------------------------------------------------- /lib/utils/lunar.js: -------------------------------------------------------------------------------- 1 | "use strict";var lunarInfo=new Array(19416,19168,42352,21717,53856,55632,91476,22176,39632,21970,19168,42422,42192,53840,119381,46400,54944,44450,38320,84343,18800,42160,46261,27216,27968,109396,11104,38256,21234,18800,25958,54432,59984,28309,23248,11104,100067,37600,116951,51536,54432,120998,46416,22176,107956,9680,37584,53938,43344,46423,27808,46416,86869,19872,42448,83315,21200,43432,59728,27296,44710,43856,19296,43748,42352,21088,62051,55632,23383,22176,38608,19925,19152,42192,54484,53840,54616,46400,46496,103846,38320,18864,43380,42160,45690,27216,27968,44870,43872,38256,19189,18800,25776,29859,59984,27480,21952,43872,38613,37600,51552,55636,54432,55888,30034,22176,43959,9680,37584,51893,43344,46240,47780,44368,21977,19360,42416,86390,21168,43312,31060,27296,44368,23378,19296,42726,42208,53856,60005,54576,23200,30371,38608,19415,19152,42192,118966,53840,54560,56645,46496,22224,21938,18864,42359,42160,43600,111189,27936,44448),sFtv=new Array("0101*元旦 新年","0106 中国第13亿人口日","0108 周恩来逝世纪念日","0115 释迦如来成道日","0121 列宁逝世纪念日 国际声援南非日 弥勒佛诞辰","0202 世界湿地日","0207 二七大罢工纪念日","0210 国际气象节","0214 情人节","0215 中国12亿人口日","0219 邓小平逝世纪念日","0221 国际母语日 反对殖民制度斗争日","0222 苗族芦笙节","0224 第三世界青年日","0228 世界居住条件调查日","0301 国际海豹日","0303 全国爱耳日","0305 学雷锋纪念日 中国青年志愿者服务日","0308 妇女节","0309 保护母亲河日","0311 国际尊严尊敬日","0312 植树节&孙中山逝世纪念日","0314 国际警察日 白色情人节","0315 消费者权益日","0316 手拉手情系贫困小伙伴全国统一行动日","0317 中国国医节 国际航海日","0318 全国科技人才活动日","0321 世界森林日 世界儿歌日 世界睡眠日","0322 世界水日","0323 世界气象日","0324 世界防治结核病日","0325 全国中小学生安全教育日","0329 中国黄花岗七十二烈士殉难纪念","0330 巴勒斯坦国土日","0401 愚人节&全国爱国卫生运动月(四月)","0402 国际儿童图书日","0407 世界卫生日","0411 世界帕金森病日","0421 全国企业家活动日","0422 世界地球日 世界法律日","0423 世界图书和版权日","0424 亚非新闻工作者日 世界青年反对殖民主义日","0425 全国预防接种宣传日","0426 世界知识产权日","0430 世界交通安全反思日","0501*劳动节&国际劳动节","0503 世界哮喘日 世界新闻自由日","0504 青年节&中国五四青年节 科技传播日","0505 碘缺乏病防治日 日本男孩节","0508 世界红十字日","0512 国际护士节","0515 国际家庭日","0517 国际电信日","0518 国际博物馆日","0520 全国学生营养日 全国母乳喂养宣传日","0523 国际牛奶日","0526 世界向人体条件挑战日","0530 中国“五卅”运动纪念日","0531 世界无烟日 英国银行休假日","0601 儿童节&国际儿童节","0605 世界环境保护日","0614 世界献血者日","0617 防治荒漠化和干旱日","0620 世界难民日","0622 中国儿童慈善活动日","0623 国际奥林匹克日","0625 全国土地日","0626 国际禁毒日 国际宪章日","0630 世界青年联欢节","0701 建党节&香港回归纪念日 中共诞辰 世界建筑日","0702 国际体育记者日","0706 朱德逝世纪念日","0707 抗日战争纪念日","0711 世界人口日 中国航海日","0726 世界语创立日","0728 第一次世界大战爆发","0730 非洲妇女日","0801 建军节&中国人民解放军建军节","0805 恩格斯逝世纪念日","0806 国际电影节","0808 中国男子节(爸爸节)","0812 国际青年节","0813 国际左撇子日","0815 抗日战争胜利纪念","0826 全国律师咨询日","0902 日本签署无条件投降书日","0903 中国抗日战争胜利纪念日","0905 瑞士萨永中世纪节","0906 帕瓦罗蒂去世","0908 国际扫盲日 国际新闻工作者日","0909 毛泽东逝世纪念日","0910 教师节&中国教师节 世界预防自杀日","0914 世界清洁地球日","0916 国际臭氧层保护日 中国脑健康日","0918 九·一八事变纪念日","0920 国际爱牙日","0921 世界停火日 预防世界老年性痴呆宣传日","0927 世界旅游日","0928 孔子诞辰","0930 国际翻译日","1001*国庆节&世界音乐日 国际老人节","1002*国庆节假日 国际和平与民主自由斗争日","1003*国庆节假日","1004 世界动物日","1005 国际教师节","1006 中国老年节","1008 全国高血压日 世界视觉日","1009 世界邮政日 万国邮联日","1010 辛亥革命纪念日 世界精神卫生日","1013 世界保健日 国际教师节","1014 世界标准日","1015 国际盲人节(白手杖节)","1016 世界粮食日","1017 世界消除贫困日","1020 世界骨质疏松日","1022 世界传统医药日","1024 联合国日 世界发展新闻日","1028 中国男性健康日","1031 万圣节 世界勤俭日","1102 达摩祖师圣诞","1106 柴科夫斯基逝世悼念日","1107 十月社会主义革命纪念日","1108 中国记者日","1109 全国消防安全宣传教育日","1110 世界青年节","1111 光棍节 国际科学与和平周","1112 孙中山诞辰纪念日","1114 世界糖尿病日","1115 泰国大象节","1117 国际大学生节 世界学生节 世界戒烟日","1120 世界儿童日","1121 世界问候日 世界电视日","1129 国际声援巴勒斯坦人民国际日","1201 世界艾滋病日","1202 废除一切形式奴役世界日","1203 世界残疾人日","1204 全国法制宣传日","1205 国际经济和社会发展志愿人员日 世界弱能人士日","1207 国际民航日","1208 国际儿童电视日","1209 世界足球日 一二·九运动纪念日","1210 世界人权日","1211 世界防止哮喘日","1212 西安事变纪念日","1213 南京大屠杀纪念日","1214 国际儿童广播电视节","1215 世界强化免疫日","1220 澳门回归纪念","1221 国际篮球日","1224 平安夜","1225 圣诞节","1226 毛泽东诞辰纪念日&节礼日","1229 国际生物多样性日"),lFtv=new Array("0101*春节 大年初一","0102*初二","0115 元宵节","0505*端午节","0707 七夕情人节","0715 中元节","0815*中秋节","0909 重阳节","1208 腊八节","1223 小年","0100*除夕"),wFtv=new Array("0150 世界麻风日","0351 全国中小学生安全教育日","0453 秘书节","0512 国世界哮喘日","0520 母亲节&国际母亲节 救助贫困母亲日","0530 全国助残日","0532 国际牛奶日","0626 中国文化遗产日","0630 父亲节&国际父亲节","0716 国际合作节","0730 被奴役国家周","0932 国际和平日","0936 全民国防教育日","0940 国际聋人节 世界儿童日","0950 世界海事日 世界心脏病日","1011 国际住房日 世界建筑日 世界人居日","1023 国际减轻自然灾害日(减灾日)","1024 世界视觉日","1144 感恩节","1220 国际儿童电视广播日"),solarMonth=new Array(31,28,31,30,31,30,31,31,30,31,30,31),Gan=new Array("甲","乙","丙","丁","戊","己","庚","辛","壬","癸"),Zhi=new Array("子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"),Animals=new Array("鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"),solarTerm=new Array("小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"),sTermInfo=new Array(0,21208,42467,63836,85337,107014,128867,150921,173149,195551,218072,240693,263343,285989,308563,331033,353350,375494,397447,419210,440795,462224,483532,504758),nStr1=new Array("日","一","二","三","四","五","六","七","八","九","十","十一","十二"),nStr2=new Array("初","十","廿","卅","　"),monthName=new Array("JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"),BG_DATA={立春:"http://img03.taobaocdn.com/tps/i3/T1JZWnXnJpXXXXXXXX-83-56.jpg",情人节:"http://img01.taobaocdn.com/tps/i1/T17cynXf0sXXXXXXXX-83-56.jpg",妇女节:"http://img01.taobaocdn.com/tps/i1/T1D0enXmJnXXXXXXXX-83-56.jpg","植树节&孙中山逝世纪念日":"http://img03.taobaocdn.com/tps/i3/T1Q0enXlxnXXXXXXXX-83-56.jpg",清明:"http://img04.taobaocdn.com/tps/i4/T1WIWnXmdpXXXXXXXX-83-56.jpg","劳动节&国际劳动节":"http://img04.taobaocdn.com/tps/i4/T1PcunXXltXXXXXXXX-83-56.jpg","青年节&中国五四青年节 科技传播日":"http://img02.taobaocdn.com/tps/i2/T1qZGnXmhrXXXXXXXX-83-56.jpg","儿童节&国际儿童节":"http://img01.taobaocdn.com/tps/i1/T1XqafXepoXXXXXXXX-83-56.jpg",防治荒漠化和干旱日:"http://img02.taobaocdn.com/tps/i2/T1XWafXedoXXXXXXXX-83-56.jpg",父亲节:"http://img03.taobaocdn.com/tps/i3/T1gGafXd4oXXXXXXXX-83-56.jpg",端午节:"http://img04.taobaocdn.com/tps/i4/T15synXgXsXXXXXXXX-83-56.jpg",世界人口日:"http://img02.taobaocdn.com/tps/i2/T109egXeVnXXXXXXXX-83-56.jpg",大暑:"http://img01.taobaocdn.com/tps/i1/T10SegXfXnXXXXXXXX-83-56.jpg","建党节 香港回归纪念日 世界建筑日":"http://img04.taobaocdn.com/tps/i4/T1NCegXfplXXXXXXXX-83-56.jpg",抗日战争纪念日:"http://img03.taobaocdn.com/tps/i3/T1MCegXgtnXXXXXXXX-83-56.jpg",建军节:"http://img01.taobaocdn.com/tps/i1/T1Er83XbdCXXXXXXXX-83-56.jpg",处暑:"http://img04.taobaocdn.com/tps/i4/T1MbN3XeNBXXXXXXXX-83-56.jpg",七夕情人节:"http://img03.taobaocdn.com/tps/i3/T12HN3XfpAXXXXXXXX-83-56.jpg",抗日战争胜利纪念:"http://img02.taobaocdn.com/tps/i2/T1EbJ3Xj8AXXXXXXXX-83-56.jpg",教师节:"http://img01.taobaocdn.com/tps/i1/T1jselXfhzXXXXXXXX-83-56.gif",中秋节:"http://img04.taobaocdn.com/tps/i4/T1BIalXd8zXXXXXXXX-83-56.gif",孔子诞辰:"http://img02.taobaocdn.com/tps/i2/T1RIalXkJzXXXXXXXX-83-56.gif",九一八事变纪念日:"http://img04.taobaocdn.com/tps/i4/T1ucKnXfhrXXXXXXXX-83-56.jpg","国庆节 世界音乐日 国际老人节":"http://img03.taobaocdn.com/tps/i3/T1LAilXjtyXXXXXXXX-83-56.jpg","重阳节 国际减轻自然灾害日(减灾日)":"http://img04.taobaocdn.com/tps/i4/T1Z0enXkpnXXXXXXXX-83-56.jpg","辛亥革命纪念日 世界精神卫生日":"http://img01.taobaocdn.com/tps/i1/T1lcGnXmRrXXXXXXXX-83-56.jpg",感恩节:"http://img02.taobaocdn.com/tps/i2/T1OImnXhtpXXXXXXXX-83-56.jpg",孙中山诞辰:"http://img02.taobaocdn.com/tps/i2/T1JdenXmXnXXXXXXXX-83-56.jpg",澳门回归纪念:"http://img03.taobaocdn.com/tps/i3/T1LsunXXFtXXXXXXXX-83-56.jpg",冬至:"http://img03.taobaocdn.com/tps/i3/T1BsunXldrXXXXXXXX-83-56.jpg",毛泽东诞辰:"http://img03.taobaocdn.com/tps/i3/T1mIWnXjtpXXXXXXXX-83-56.jpg",圣诞节:"http://img01.taobaocdn.com/tps/i1/T1ksGnXfhrXXXXXXXX-83-56.jpg",除夕:"http://img04.taobaocdn.com/tps/i4/T1odenXn4nXXXXXXXX-83-56.jpg",春节:"http://img01.taobaocdn.com/tps/i1/T16ZWnXkFpXXXXXXXX-83-56.jpg",元宵节:"http://img02.taobaocdn.com/tps/i2/T1BIWnXolpXXXXXXXX-83-56.jpg"};function lYearDays(X){var t,a=348;for(t=32768;t>8;t>>=1)a+=lunarInfo[X-1900]&t?1:0;return a+leapDays(X)}function leapDays(X){return leapMonth(X)?65536&lunarInfo[X-1900]?30:29:0}function leapMonth(X){return 15&lunarInfo[X-1900]}function monthDays(X,t){return lunarInfo[X-1900]&65536>>t?30:29}function Lunar(X){var t,a,i=0,o=new Date(1900,0,31),s=Math.floor((X.getTime()+22064256e5)/864e5);for("objDate="+X.getTime()+", new Date(1900,0,31)="+o.getTime(),"offset="+s,this.dayCyl=s+40,this.monCyl=14,t=1900;t<2050&&s>0;t++)s-=i=lYearDays(t),this.monCyl+=12;for(s<0&&(s+=i,t--,this.monCyl-=12),this.year=t,this.yearCyl=t-1864,a=leapMonth(t),this.isLeap=!1,t=1;t<13&&s>0;t++)a>0&&t==a+1&&0==this.isLeap?(--t,this.isLeap=!0,i=leapDays(this.year)):i=monthDays(this.year,t),1==this.isLeap&&t==a+1&&(this.isLeap=!1),s-=i,0==this.isLeap&&this.monCyl++;0==s&&a>0&&t==a+1&&(this.isLeap?this.isLeap=!1:(this.isLeap=!0,--t,--this.monCyl)),s<0&&(s+=i,--t,--this.monCyl),this.month=t,this.day=s+1,this.year,this.yearCyl,this.month,this.monthCyl,this.day,this.dayCyl}function solarDays(X,t){return 1==t?X%4==0&&X%100!=0||X%400==0?29:28:solarMonth[t]}function cyclical(X){return Gan[X%10]+Zhi[X%12]}function calElement(X,t,a,i,o,s,n,e,r,p,h){this.isToday=!1,this.sYear=X,this.sMonth=t,this.sDay=a,this.week=i,this.lYear=o,this.lMonth=s,this.lDay=n,this.isLeap=e,this.cYear=r,this.cMonth=p,this.cDay=h,this.color="",this.lunarFestival="",this.solarFestival="",this.solarTerms=""}function sTerm(X,t){return new Date(31556925974.7*(X-1900)+6e4*sTermInfo[t]-22085493e5).getUTCDate()}function calendar(X,t,a,i,o){var s,n,e,r,p,h,m,c=1,g=0,l=new Array(3),y=0,f=0;s=new Date(X,t,1),this.length=solarDays(X,t),this.firstWeek=s.getDay();for(var d=0;dg&&(e=(n=new Lunar(s=new Date(X,t,d+1))).year,r=n.month,c=n.day,g=(p=n.isLeap)?leapDays(e):monthDays(e,r),0==y&&(f=r),l[y++]=d-c+1),this[d]=new calElement(X,t+1,d+1,nStr1[(d+this.firstWeek)%7],e,r,c++,p,cyclical(n.yearCyl),cyclical(n.monCyl),cyclical(n.dayCyl++)),(d+this.firstWeek)%7==0&&(this[d].color="#ff5f07"),(d+this.firstWeek)%14==13&&(this[d].color="#ff5f07");for(d in h=sTerm(X,2*t)-1,m=sTerm(X,2*t+1)-1,this[h].solarTerms=solarTerm[2*t],this[m].solarTerms=solarTerm[2*t+1],3==t&&(this[h].color="#ff5f07"),sFtv)sFtv[d].match(/^(\d{2})(\d{2})([\s\*])(.+)$/)&&Number(RegExp.$1)==t+1&&(this[Number(RegExp.$2)-1].solarFestival+=RegExp.$4+" ","*"==RegExp.$3&&(this[Number(RegExp.$2)-1].color="#ff5f07"));for(d in wFtv)wFtv[d].match(/^(\d{2})(\d)(\d)([\s\*])(.+)$/)&&Number(RegExp.$1)==t+1&&(h=Number(RegExp.$2),m=Number(RegExp.$3),this[(this.firstWeek>m?7:0)+7*(h-1)+m-this.firstWeek]&&(this[(this.firstWeek>m?7:0)+7*(h-1)+m-this.firstWeek].solarFestival+=RegExp.$5+" "));for(d in lFtv)lFtv[d].match(/^(\d{2})(.{2})([\s\*])(.+)$/)&&(-11==(h=Number(RegExp.$1)-f)&&(h=1),h>=0&&h=0&&m 2 | 3 |
4 |
5 | 6 | 7 | 8 | 9 | 10 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 |
25 | 26 |
27 | 28 |
29 |
30 |
31 | 32 |
33 | 34 |
35 |
36 |
37 | 38 | 39 |
40 | 41 |

{{date1}}

42 |
43 | 44 | 45 |
46 | 47 | 48 | 49 |
50 | 51 | 52 | 53 |
54 | 55 | 56 |

{{date2}}

57 |
58 | 59 |
60 | 61 | 62 | 67 | 68 |

{{date3}}

69 |
70 | 71 |
72 | 73 | 78 | 79 |

{{date4}}

80 |
81 | 82 | 83 |
84 | Happy New Year! 85 |
86 |

consectetur adipisicing elit,

87 |
88 |
89 | 90 | 334 | 335 | 336 | 380 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue3-calendar 2 | 3 | > vue 3 calendar, datepicker component which supported lunar or date event 4 | 5 |

6 | 7 | Live Demo >> 8 | 9 |
10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 |
45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 |
58 |
59 |

60 | 61 | - This project is not only a vue component, but also a webpack **multi-page** project in action. 62 | 63 | - Boostrap style like 64 | 65 | - I18n support 66 | 67 | - Community feedback 68 | 69 | 70 | ## vue 2.x version 71 | 72 | [vue2-slot-calendar](https://github.com/icai/vue3-calendar/tree/2.x) 73 | 74 | 75 | 76 | 77 | ## Install 78 | 79 | 80 | vue 2.x 81 | 82 | ```bash 83 | $ pnpm i vue2-slot-calendar@2.x.x --save 84 | 85 | ``` 86 | 87 | vue 3.x 88 | 89 | 90 | ```bash 91 | 92 | $ pnpm i vue3-slot-calendar@3.x.x --save 93 | ``` 94 | 95 | 96 | ### Import using module 97 | 98 | ```JavaScript 99 | 100 | 101 | // js file 102 | import 'vue3-slot-calendar/lib/calendar.min.css'; 103 | import calendar from 'vue3-slot-calendar/lib/calendar'; 104 | 105 | // vue file 106 | import Calendar from 'vue3-slot-calendar'; 107 | 108 | 109 | ``` 110 | 111 | ### Import using script tag 112 | 113 | ```HTML 114 | 115 | 116 | 117 | ``` 118 | 119 | Also see the demo file, `example/demo.html` 120 | 121 | 122 | ## I18n support 123 | 124 | currently, provide `window.VueCalendarLang` function hook to change your lang 125 | 126 | 127 | ```js 128 | translations(lang) { 129 | lang = lang || "en"; 130 | let text = { 131 | daysOfWeek: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], 132 | limit: "Limit reached ({{limit}} items max).", 133 | loading: "Loading...", 134 | minLength: "Min. Length", 135 | months: [ 136 | "January", 137 | "February", 138 | "March", 139 | "April", 140 | "May", 141 | "June", 142 | "July", 143 | "August", 144 | "September", 145 | "October", 146 | "November", 147 | "December" 148 | ], 149 | notSelected: "Nothing Selected", 150 | required: "Required", 151 | search: "Search" 152 | }; 153 | return window.VueCalendarLang ? window.VueCalendarLang(lang) : text; 154 | }, 155 | ``` 156 | 157 | ### locale files 158 | 159 | ``` 160 | import cn from 'vue3-slot-calendar/lib/locale/zh-CN' 161 | import en from 'vue3-slot-calendar/lib/locale/en-US' 162 | import tw from 'vue3-slot-calendar/lib/locale/zh-TW' 163 | 164 | ``` 165 | 166 | 167 | 168 | ## Build Setup 169 | 170 | ```bash 171 | # install dependencies 172 | npm install 173 | 174 | # serve with hot reload at localhost:4000 175 | npm run dev 176 | 177 | # build for production with minification 178 | npm run build 179 | 180 | # run unit tests 181 | npm run unit 182 | 183 | # run all tests 184 | npm test 185 | ``` 186 | 187 | ## Screenshot 188 | 189 | ![](https://raw.githubusercontent.com/icai/vue3-calendar/master/src/assets/demo.gif?1477232397) 190 | 191 | ## Usage 192 | 193 | ```html 194 | 205 | ``` 206 | 207 | ### Use slot to render async data 208 | 209 | ```html 210 | 222 |
223 | ${{evt.content}} ↓ 224 |
225 | 226 | ``` 227 | 228 | ### Range Hover Status 229 | 230 | ```html 231 | 241 | 242 | 252 | ``` 253 | 254 | ### Input Slot 255 | 256 | ```html 257 | 258 | 264 | 265 | ``` 266 | 267 | ### Props 268 | 269 | Options/Props 270 | 271 | | Name | Type | Default | Description | 272 | | --------------------- | ---------- | -------------- | --------------------------------------------------------------------------------------------------------------------------- | 273 | | v-model | `String` | '' | Value of the input DOM | 274 | | width | `String` | '200px' | Width of the input DOM | 275 | | format | `String` | `MMMM/dd/yyyy` | The date format, combination of d, dd, M, MM, MMM, MMMM, yyyy. | 276 | | disabled-days-of-week | `Array` | | Days of the week that should be disabled. Values are 0 (Sunday) to 6 (Saturday). Multiple values should be comma-separated. | 277 | | clear-button | `Bollean` | false | If true shows an × shaped button to clear the selected date. Usefull in forms where date entry is optional. | 278 | | placeholder | `String` | | Placeholder to put on the input field when no date (null or empty) is set | 279 | | hasInput | `Boolean` | true | Default is has-input style, if don't have input will show pane directly | 280 | | pane | `Number` | 1 | pane count | 281 | | borderWidth | `Number` | 2 | This value is for calculating the pane width | 282 | | onDayClick | `Function` | | Only for `hasInput` set false | 283 | | specialDays | `Object` | | To repalce the day text | 284 | | changePane | `Function` | | For pane change parameter (year, month, pane) month[0,11], demo `/src/modules/Docs.vue` | 285 | | rangeBus | `Function` | | should return `new Vue()` as sibling component communication events bus | 286 | | rangeStatus | `Number` | 0 | Default is `disabled` range hover effect, currently only support [0,1,2] `1` will communicate with `2` | 287 | | onDrawDate | `Function` | | DrawDate Function `allowSelect` to update date cell style | 288 | | showDateOnly | `Boolean` | false | show date pane only | 289 | | transfer | `Boolean` | false | transfer popup to `document.body` | 290 | | elementId | `String` | | elementId for label tag `for` attribute | 291 | | firstDayOfWeek | `Number` | 0 | first day of the week, default sunday, [0,6] | 292 | 293 | ### Events 294 | 295 | | Name | Description | 296 | | -------- | -------------------------------- | 297 | | drawDate | drawDate Event | 298 | 299 | 300 | ```javascript 301 | props: { 302 | modelValue: { 303 | type: [String, Date] 304 | }, 305 | format: { 306 | default: 'MM/dd/yyyy' 307 | }, 308 | firstDayOfWeek: { 309 | // sunday 310 | default: 0 311 | }, 312 | disabledDaysOfWeek: { 313 | type: Array, 314 | default () { 315 | return [] 316 | } 317 | }, 318 | width: { 319 | type: String, 320 | default: '200px' 321 | }, 322 | clearButton: { 323 | type: Boolean, 324 | default: false 325 | }, 326 | inputClasses: { 327 | type: String, 328 | default: '' 329 | }, 330 | lang: { 331 | type: String, 332 | default: navigator.language 333 | }, 334 | placeholder: { 335 | type: String 336 | }, 337 | hasInput: { 338 | type: Boolean, 339 | default: true 340 | }, 341 | pane: { 342 | type: Number, 343 | default: 1 344 | }, 345 | borderWidth: { 346 | type: Number, 347 | default: 2 348 | }, 349 | onDayClick: { 350 | type: Function, 351 | default () {} 352 | }, 353 | changePane: { 354 | type: Function, 355 | default () {} 356 | }, 357 | specialDays: { 358 | type: Object, 359 | default () { 360 | return {} 361 | } 362 | }, 363 | rangeBus: { 364 | type: Function, 365 | default () { 366 | // return new Vue() 367 | } 368 | }, 369 | rangeStatus: { 370 | type: Number, 371 | default: 0 372 | }, 373 | // onDrawDate: { 374 | // type: Function, 375 | // default () {} 376 | // }, 377 | maxDate: { 378 | type: String 379 | }, 380 | minDate: { 381 | type: String 382 | }, 383 | showDateOnly: { 384 | type: Boolean, 385 | default: false 386 | }, 387 | transfer: { 388 | type: Boolean, 389 | default: false 390 | }, 391 | elementId: [String] 392 | } 393 | ``` 394 | 395 | ### Methods 396 | 397 | 398 | 399 | #### eventbus 400 | ``` 401 | import { eventbus } from 'vue3-slot-calendar/lib/utils/event' 402 | 403 | eventbus.$on('drawDate', (date) => { 404 | console.log(date) 405 | }) 406 | 407 | ``` 408 | 409 | 410 | #### transfer directive 411 | 412 | transfer directive like `` 413 | 414 | ``` 415 | import transfer from 'vue3-slot-calendar/lib/directives/transfer' 416 | 417 | directives: { 418 | transfer 419 | } 420 | ``` 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | ## Credits 432 | 433 | Inspired by [vue-strap](https://github.com/yuche/vue-strap) datepicker component. 434 | 435 | For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 436 | -------------------------------------------------------------------------------- /src/assets/sass/markdown.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: octicons-anchor; 3 | src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAYcAA0AAAAACjQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABMAAAABwAAAAca8vGTk9TLzIAAAFMAAAARAAAAFZG1VHVY21hcAAAAZAAAAA+AAABQgAP9AdjdnQgAAAB0AAAAAQAAAAEACICiGdhc3AAAAHUAAAACAAAAAj//wADZ2x5ZgAAAdwAAADRAAABEKyikaNoZWFkAAACsAAAAC0AAAA2AtXoA2hoZWEAAALgAAAAHAAAACQHngNFaG10eAAAAvwAAAAQAAAAEAwAACJsb2NhAAADDAAAAAoAAAAKALIAVG1heHAAAAMYAAAAHwAAACABEAB2bmFtZQAAAzgAAALBAAAFu3I9x/Nwb3N0AAAF/AAAAB0AAAAvaoFvbwAAAAEAAAAAzBdyYwAAAADP2IQvAAAAAM/bz7t4nGNgZGFgnMDAysDB1Ml0hoGBoR9CM75mMGLkYGBgYmBlZsAKAtJcUxgcPsR8iGF2+O/AEMPsznAYKMwIkgMA5REMOXicY2BgYGaAYBkGRgYQsAHyGMF8FgYFIM0ChED+h5j//yEk/3KoSgZGNgYYk4GRCUgwMaACRoZhDwCs7QgGAAAAIgKIAAAAAf//AAJ4nHWMMQrCQBBF/0zWrCCIKUQsTDCL2EXMohYGSSmorScInsRGL2DOYJe0Ntp7BK+gJ1BxF1stZvjz/v8DRghQzEc4kIgKwiAppcA9LtzKLSkdNhKFY3HF4lK69ExKslx7Xa+vPRVS43G98vG1DnkDMIBUgFN0MDXflU8tbaZOUkXUH0+U27RoRpOIyCKjbMCVejwypzJJG4jIwb43rfl6wbwanocrJm9XFYfskuVC5K/TPyczNU7b84CXcbxks1Un6H6tLH9vf2LRnn8Ax7A5WQAAAHicY2BkYGAA4teL1+yI57f5ysDNwgAC529f0kOmWRiYVgEpDgYmEA8AUzEKsQAAAHicY2BkYGB2+O/AEMPCAAJAkpEBFbAAADgKAe0EAAAiAAAAAAQAAAAEAAAAAAAAKgAqACoAiAAAeJxjYGRgYGBhsGFgYgABEMkFhAwM/xn0QAIAD6YBhwB4nI1Ty07cMBS9QwKlQapQW3VXySvEqDCZGbGaHULiIQ1FKgjWMxknMfLEke2A+IJu+wntrt/QbVf9gG75jK577Lg8K1qQPCfnnnt8fX1NRC/pmjrk/zprC+8D7tBy9DHgBXoWfQ44Av8t4Bj4Z8CLtBL9CniJluPXASf0Lm4CXqFX8Q84dOLnMB17N4c7tBo1AS/Qi+hTwBH4rwHHwN8DXqQ30XXAS7QaLwSc0Gn8NuAVWou/gFmnjLrEaEh9GmDdDGgL3B4JsrRPDU2hTOiMSuJUIdKQQayiAth69r6akSSFqIJuA19TrzCIaY8sIoxyrNIrL//pw7A2iMygkX5vDj+G+kuoLdX4GlGK/8Lnlz6/h9MpmoO9rafrz7ILXEHHaAx95s9lsI7AHNMBWEZHULnfAXwG9/ZqdzLI08iuwRloXE8kfhXYAvE23+23DU3t626rbs8/8adv+9DWknsHp3E17oCf+Z48rvEQNZ78paYM38qfk3v/u3l3u3GXN2Dmvmvpf1Srwk3pB/VSsp512bA/GG5i2WJ7wu430yQ5K3nFGiOqgtmSB5pJVSizwaacmUZzZhXLlZTq8qGGFY2YcSkqbth6aW1tRmlaCFs2016m5qn36SbJrqosG4uMV4aP2PHBmB3tjtmgN2izkGQyLWprekbIntJFing32a5rKWCN/SdSoga45EJykyQ7asZvHQ8PTm6cslIpwyeyjbVltNikc2HTR7YKh9LBl9DADC0U/jLcBZDKrMhUBfQBvXRzLtFtjU9eNHKin0x5InTqb8lNpfKv1s1xHzTXRqgKzek/mb7nB8RZTCDhGEX3kK/8Q75AmUM/eLkfA+0Hi908Kx4eNsMgudg5GLdRD7a84npi+YxNr5i5KIbW5izXas7cHXIMAau1OueZhfj+cOcP3P8MNIWLyYOBuxL6DRylJ4cAAAB4nGNgYoAALjDJyIAOWMCiTIxMLDmZedkABtIBygAAAA==) format('woff'); 4 | } 5 | 6 | 7 | .markdown-body { 8 | padding: 45px; 9 | border: 1px solid #ddd; 10 | border-radius: 3px; 11 | word-wrap: break-word; 12 | } 13 | 14 | pre { 15 | font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace; 16 | } 17 | 18 | .markdown-body { 19 | -webkit-text-size-adjust: 100%; 20 | text-size-adjust: 100%; 21 | color: #333; 22 | font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 23 | font-size: 16px; 24 | line-height: 1.6; 25 | word-wrap: break-word; 26 | } 27 | 28 | .markdown-body a { 29 | background-color: transparent; 30 | } 31 | 32 | .markdown-body a:active, 33 | .markdown-body a:hover { 34 | outline: 0; 35 | } 36 | 37 | .markdown-body strong { 38 | font-weight: bold; 39 | } 40 | 41 | .markdown-body h1 { 42 | font-size: 2em; 43 | margin: 0.67em 0; 44 | } 45 | 46 | .markdown-body img { 47 | border: 0; 48 | } 49 | 50 | .markdown-body hr { 51 | box-sizing: content-box; 52 | height: 0; 53 | } 54 | 55 | .markdown-body pre { 56 | overflow: auto; 57 | } 58 | 59 | .markdown-body code, 60 | .markdown-body kbd, 61 | .markdown-body pre { 62 | font-family: monospace, monospace; 63 | font-size: 1em; 64 | } 65 | 66 | .markdown-body input { 67 | color: inherit; 68 | font: inherit; 69 | margin: 0; 70 | } 71 | 72 | .markdown-body html input[disabled] { 73 | cursor: default; 74 | } 75 | 76 | .markdown-body input { 77 | line-height: normal; 78 | } 79 | 80 | .markdown-body input[type="checkbox"] { 81 | box-sizing: border-box; 82 | padding: 0; 83 | } 84 | 85 | .markdown-body table { 86 | border-collapse: collapse; 87 | border-spacing: 0; 88 | } 89 | 90 | .markdown-body td, 91 | .markdown-body th { 92 | padding: 0; 93 | } 94 | 95 | .markdown-body input { 96 | font: 13px / 1.4 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 97 | } 98 | 99 | .markdown-body a { 100 | color: #4078c0; 101 | text-decoration: none; 102 | } 103 | 104 | .markdown-body a:hover, 105 | .markdown-body a:active { 106 | text-decoration: underline; 107 | } 108 | 109 | .markdown-body hr { 110 | height: 0; 111 | margin: 15px 0; 112 | overflow: hidden; 113 | background: transparent; 114 | border: 0; 115 | border-bottom: 1px solid #ddd; 116 | } 117 | 118 | .markdown-body hr:before { 119 | display: table; 120 | content: ""; 121 | } 122 | 123 | .markdown-body hr:after { 124 | display: table; 125 | clear: both; 126 | content: ""; 127 | } 128 | 129 | .markdown-body h1, 130 | .markdown-body h2, 131 | .markdown-body h3, 132 | .markdown-body h4, 133 | .markdown-body h5, 134 | .markdown-body h6 { 135 | margin-top: 15px; 136 | margin-bottom: 15px; 137 | line-height: 1.1; 138 | } 139 | 140 | .markdown-body h1 { 141 | font-size: 30px; 142 | } 143 | 144 | .markdown-body h2 { 145 | font-size: 21px; 146 | } 147 | 148 | .markdown-body h3 { 149 | font-size: 16px; 150 | } 151 | 152 | .markdown-body h4 { 153 | font-size: 14px; 154 | } 155 | 156 | .markdown-body h5 { 157 | font-size: 12px; 158 | } 159 | 160 | .markdown-body h6 { 161 | font-size: 11px; 162 | } 163 | 164 | .markdown-body blockquote { 165 | margin: 0; 166 | } 167 | 168 | .markdown-body ul, 169 | .markdown-body ol { 170 | padding: 0; 171 | margin-top: 0; 172 | margin-bottom: 0; 173 | } 174 | 175 | .markdown-body ol ol, 176 | .markdown-body ul ol { 177 | list-style-type: lower-roman; 178 | } 179 | 180 | .markdown-body ul ul ol, 181 | .markdown-body ul ol ol, 182 | .markdown-body ol ul ol, 183 | .markdown-body ol ol ol { 184 | list-style-type: lower-alpha; 185 | } 186 | 187 | .markdown-body dd { 188 | margin-left: 0; 189 | } 190 | 191 | .markdown-body code { 192 | font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; 193 | font-size: 12px; 194 | } 195 | 196 | .markdown-body pre { 197 | margin-top: 0; 198 | margin-bottom: 0; 199 | font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace; 200 | } 201 | 202 | .markdown-body .select::-ms-expand { 203 | opacity: 0; 204 | } 205 | 206 | .markdown-body .octicon { 207 | font: normal normal normal 16px/1 octicons-anchor; 208 | display: inline-block; 209 | text-decoration: none; 210 | text-rendering: auto; 211 | -webkit-font-smoothing: antialiased; 212 | -moz-osx-font-smoothing: grayscale; 213 | -webkit-user-select: none; 214 | -moz-user-select: none; 215 | -ms-user-select: none; 216 | user-select: none; 217 | } 218 | 219 | .markdown-body .octicon-link:before { 220 | content: '\f05c'; 221 | } 222 | 223 | .markdown-body:before { 224 | display: table; 225 | content: ""; 226 | } 227 | 228 | .markdown-body:after { 229 | display: table; 230 | clear: both; 231 | content: ""; 232 | } 233 | 234 | .markdown-body>*:first-child { 235 | margin-top: 0 !important; 236 | } 237 | 238 | .markdown-body>*:last-child { 239 | margin-bottom: 0 !important; 240 | } 241 | 242 | .markdown-body a:not([href]) { 243 | color: inherit; 244 | text-decoration: none; 245 | } 246 | 247 | .markdown-body .anchor { 248 | display: inline-block; 249 | padding-right: 2px; 250 | margin-left: -18px; 251 | } 252 | 253 | .markdown-body .anchor:focus { 254 | outline: none; 255 | } 256 | 257 | .markdown-body h1, 258 | .markdown-body h2, 259 | .markdown-body h3, 260 | .markdown-body h4, 261 | .markdown-body h5, 262 | .markdown-body h6 { 263 | margin-top: 1em; 264 | margin-bottom: 16px; 265 | font-weight: bold; 266 | line-height: 1.4; 267 | } 268 | 269 | .markdown-body h1 .octicon-link, 270 | .markdown-body h2 .octicon-link, 271 | .markdown-body h3 .octicon-link, 272 | .markdown-body h4 .octicon-link, 273 | .markdown-body h5 .octicon-link, 274 | .markdown-body h6 .octicon-link { 275 | color: #000; 276 | vertical-align: middle; 277 | visibility: hidden; 278 | } 279 | 280 | .markdown-body h1:hover .anchor, 281 | .markdown-body h2:hover .anchor, 282 | .markdown-body h3:hover .anchor, 283 | .markdown-body h4:hover .anchor, 284 | .markdown-body h5:hover .anchor, 285 | .markdown-body h6:hover .anchor { 286 | text-decoration: none; 287 | } 288 | 289 | .markdown-body h1:hover .anchor .octicon-link, 290 | .markdown-body h2:hover .anchor .octicon-link, 291 | .markdown-body h3:hover .anchor .octicon-link, 292 | .markdown-body h4:hover .anchor .octicon-link, 293 | .markdown-body h5:hover .anchor .octicon-link, 294 | .markdown-body h6:hover .anchor .octicon-link { 295 | visibility: visible; 296 | } 297 | 298 | .markdown-body h1 { 299 | padding-bottom: 0.3em; 300 | font-size: 2.25em; 301 | line-height: 1.2; 302 | border-bottom: 1px solid #eee; 303 | } 304 | 305 | .markdown-body h1 .anchor { 306 | line-height: 1; 307 | } 308 | 309 | .markdown-body h2 { 310 | padding-bottom: 0.3em; 311 | font-size: 1.75em; 312 | line-height: 1.225; 313 | border-bottom: 1px solid #eee; 314 | } 315 | 316 | .markdown-body h2 .anchor { 317 | line-height: 1; 318 | } 319 | 320 | .markdown-body h3 { 321 | font-size: 1.5em; 322 | line-height: 1.43; 323 | } 324 | 325 | .markdown-body h3 .anchor { 326 | line-height: 1.2; 327 | } 328 | 329 | .markdown-body h4 { 330 | font-size: 1.25em; 331 | } 332 | 333 | .markdown-body h4 .anchor { 334 | line-height: 1.2; 335 | } 336 | 337 | .markdown-body h5 { 338 | font-size: 1em; 339 | } 340 | 341 | .markdown-body h5 .anchor { 342 | line-height: 1.1; 343 | } 344 | 345 | .markdown-body h6 { 346 | font-size: 1em; 347 | color: #777; 348 | } 349 | 350 | .markdown-body h6 .anchor { 351 | line-height: 1.1; 352 | } 353 | 354 | .markdown-body p, 355 | .markdown-body blockquote, 356 | .markdown-body ul, 357 | .markdown-body ol, 358 | .markdown-body dl, 359 | .markdown-body table, 360 | .markdown-body pre { 361 | margin-top: 0; 362 | margin-bottom: 16px; 363 | } 364 | 365 | .markdown-body hr { 366 | height: 4px; 367 | padding: 0; 368 | margin: 16px 0; 369 | background-color: #e7e7e7; 370 | border: 0 none; 371 | } 372 | 373 | .markdown-body ul, 374 | .markdown-body ol { 375 | padding-left: 2em; 376 | } 377 | 378 | .markdown-body ul ul, 379 | .markdown-body ul ol, 380 | .markdown-body ol ol, 381 | .markdown-body ol ul { 382 | margin-top: 0; 383 | margin-bottom: 0; 384 | } 385 | 386 | .markdown-body li>p { 387 | margin-top: 16px; 388 | } 389 | 390 | .markdown-body dl { 391 | padding: 0; 392 | } 393 | 394 | .markdown-body dl dt { 395 | padding: 0; 396 | margin-top: 16px; 397 | font-size: 1em; 398 | font-style: italic; 399 | font-weight: bold; 400 | } 401 | 402 | .markdown-body dl dd { 403 | padding: 0 16px; 404 | margin-bottom: 16px; 405 | } 406 | 407 | .markdown-body blockquote { 408 | padding: 0 15px; 409 | color: #777; 410 | border-left: 4px solid #ddd; 411 | } 412 | 413 | .markdown-body blockquote>:first-child { 414 | margin-top: 0; 415 | } 416 | 417 | .markdown-body blockquote>:last-child { 418 | margin-bottom: 0; 419 | } 420 | 421 | .markdown-body table { 422 | display: block; 423 | width: 100%; 424 | overflow: auto; 425 | word-break: normal; 426 | word-break: keep-all; 427 | } 428 | 429 | .markdown-body table th { 430 | font-weight: bold; 431 | } 432 | 433 | .markdown-body table th, 434 | .markdown-body table td { 435 | padding: 6px 13px; 436 | border: 1px solid #ddd; 437 | } 438 | 439 | .markdown-body table tr { 440 | background-color: #fff; 441 | border-top: 1px solid #ccc; 442 | } 443 | 444 | .markdown-body table tr:nth-child(2n) { 445 | background-color: #f8f8f8; 446 | } 447 | 448 | .markdown-body img { 449 | max-width: 100%; 450 | box-sizing: content-box; 451 | background-color: #fff; 452 | } 453 | 454 | .markdown-body code { 455 | padding: 0; 456 | padding-top: 0.2em; 457 | padding-bottom: 0.2em; 458 | margin: 0; 459 | font-size: 85%; 460 | background-color: rgba(0,0,0,0.04); 461 | border-radius: 3px; 462 | } 463 | 464 | .markdown-body code:before, 465 | .markdown-body code:after { 466 | letter-spacing: -0.2em; 467 | content: "\00a0"; 468 | } 469 | 470 | .markdown-body pre>code { 471 | padding: 0; 472 | margin: 0; 473 | font-size: 100%; 474 | word-break: normal; 475 | white-space: pre; 476 | background: transparent; 477 | border: 0; 478 | } 479 | 480 | .markdown-body .highlight { 481 | margin-bottom: 16px; 482 | } 483 | 484 | .markdown-body .highlight pre, 485 | .markdown-body pre { 486 | padding: 16px; 487 | overflow: auto; 488 | font-size: 85%; 489 | line-height: 1.45; 490 | background-color: #f7f7f7; 491 | border-radius: 3px; 492 | } 493 | 494 | .markdown-body .highlight pre { 495 | margin-bottom: 0; 496 | word-break: normal; 497 | } 498 | 499 | .markdown-body pre { 500 | word-wrap: normal; 501 | } 502 | 503 | .markdown-body pre code { 504 | display: inline; 505 | max-width: initial; 506 | padding: 0; 507 | margin: 0; 508 | overflow: initial; 509 | line-height: inherit; 510 | word-wrap: normal; 511 | background-color: transparent; 512 | border: 0; 513 | } 514 | 515 | .markdown-body pre code:before, 516 | .markdown-body pre code:after { 517 | content: normal; 518 | } 519 | 520 | .markdown-body kbd { 521 | display: inline-block; 522 | padding: 3px 5px; 523 | font-size: 11px; 524 | line-height: 10px; 525 | color: #555; 526 | vertical-align: middle; 527 | background-color: #fcfcfc; 528 | border: solid 1px #ccc; 529 | border-bottom-color: #bbb; 530 | border-radius: 3px; 531 | box-shadow: inset 0 -1px 0 #bbb; 532 | } 533 | 534 | .markdown-body .pl-c { 535 | color: #969896; 536 | } 537 | 538 | .markdown-body .pl-c1, 539 | .markdown-body .pl-s .pl-v { 540 | color: #0086b3; 541 | } 542 | 543 | .markdown-body .pl-e, 544 | .markdown-body .pl-en { 545 | color: #795da3; 546 | } 547 | 548 | .markdown-body .pl-s .pl-s1, 549 | .markdown-body .pl-smi { 550 | color: #333; 551 | } 552 | 553 | .markdown-body .pl-ent { 554 | color: #63a35c; 555 | } 556 | 557 | .markdown-body .pl-k { 558 | color: #a71d5d; 559 | } 560 | 561 | .markdown-body .pl-pds, 562 | .markdown-body .pl-s, 563 | .markdown-body .pl-s .pl-pse .pl-s1, 564 | .markdown-body .pl-sr, 565 | .markdown-body .pl-sr .pl-cce, 566 | .markdown-body .pl-sr .pl-sra, 567 | .markdown-body .pl-sr .pl-sre { 568 | color: #183691; 569 | } 570 | 571 | .markdown-body .pl-v { 572 | color: #ed6a43; 573 | } 574 | 575 | .markdown-body .pl-id { 576 | color: #b52a1d; 577 | } 578 | 579 | .markdown-body .pl-ii { 580 | background-color: #b52a1d; 581 | color: #f8f8f8; 582 | } 583 | 584 | .markdown-body .pl-sr .pl-cce { 585 | color: #63a35c; 586 | font-weight: bold; 587 | } 588 | 589 | .markdown-body .pl-ml { 590 | color: #693a17; 591 | } 592 | 593 | .markdown-body .pl-mh, 594 | .markdown-body .pl-mh .pl-en, 595 | .markdown-body .pl-ms { 596 | color: #1d3e81; 597 | font-weight: bold; 598 | } 599 | 600 | .markdown-body .pl-mq { 601 | color: #008080; 602 | } 603 | 604 | .markdown-body .pl-mi { 605 | color: #333; 606 | font-style: italic; 607 | } 608 | 609 | .markdown-body .pl-mb { 610 | color: #333; 611 | font-weight: bold; 612 | } 613 | 614 | .markdown-body .pl-md { 615 | background-color: #ffecec; 616 | color: #bd2c00; 617 | } 618 | 619 | .markdown-body .pl-mi1 { 620 | background-color: #eaffea; 621 | color: #55a532; 622 | } 623 | 624 | .markdown-body .pl-mdr { 625 | color: #795da3; 626 | font-weight: bold; 627 | } 628 | 629 | .markdown-body .pl-mo { 630 | color: #1d3e81; 631 | } 632 | 633 | .markdown-body kbd { 634 | display: inline-block; 635 | padding: 3px 5px; 636 | font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace; 637 | line-height: 10px; 638 | color: #555; 639 | vertical-align: middle; 640 | background-color: #fcfcfc; 641 | border: solid 1px #ccc; 642 | border-bottom-color: #bbb; 643 | border-radius: 3px; 644 | box-shadow: inset 0 -1px 0 #bbb; 645 | } 646 | 647 | .markdown-body .plan-price-unit { 648 | color: #767676; 649 | font-weight: normal; 650 | } 651 | 652 | .markdown-body .task-list-item { 653 | list-style-type: none; 654 | } 655 | 656 | .markdown-body .task-list-item+.task-list-item { 657 | margin-top: 3px; 658 | } 659 | 660 | .markdown-body .task-list-item input { 661 | margin: 0 0.35em 0.25em -1.6em; 662 | vertical-align: middle; 663 | } 664 | 665 | .markdown-body .plan-choice { 666 | padding: 15px; 667 | padding-left: 40px; 668 | display: block; 669 | border: 1px solid #e0e0e0; 670 | position: relative; 671 | font-weight: normal; 672 | background-color: #fafafa; 673 | } 674 | 675 | .markdown-body .plan-choice.open { 676 | background-color: #fff; 677 | } 678 | 679 | .markdown-body .plan-choice.open .plan-choice-seat-breakdown { 680 | display: block; 681 | } 682 | 683 | .markdown-body .plan-choice-free { 684 | border-radius: 3px 3px 0 0; 685 | } 686 | 687 | .markdown-body .plan-choice-paid { 688 | border-radius: 0 0 3px 3px; 689 | border-top: 0; 690 | margin-bottom: 20px; 691 | } 692 | 693 | .markdown-body .plan-choice-radio { 694 | position: absolute; 695 | left: 15px; 696 | top: 18px; 697 | } 698 | 699 | .markdown-body .plan-choice-exp { 700 | color: #999; 701 | font-size: 12px; 702 | margin-top: 5px; 703 | } 704 | 705 | .markdown-body .plan-choice-seat-breakdown { 706 | margin-top: 10px; 707 | display: none; 708 | } 709 | 710 | .markdown-body :checked+.radio-label { 711 | z-index: 1; 712 | position: relative; 713 | border-color: #4078c0; 714 | } 715 | -------------------------------------------------------------------------------- /src/utils/lunar.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | "use strict"; 3 | /*publish time:2011-09-09 21:04:04*/ 4 | var lunarInfo = new Array( 5 | 19416, 19168, 42352, 21717, 53856, 55632, 6 | 91476, 22176, 39632, 21970, 19168, 42422, 7 | 42192, 53840, 119381, 46400, 54944, 44450, 8 | 38320, 84343, 18800, 42160, 46261, 27216, 9 | 27968, 109396, 11104, 38256, 21234, 18800, 10 | 25958, 54432, 59984, 28309, 23248, 11104, 11 | 100067, 37600, 116951, 51536, 54432, 120998, 12 | 46416, 22176, 107956, 9680, 37584, 53938, 13 | 43344, 46423, 27808, 46416, 86869, 19872, 14 | 42448, 83315, 21200, 43432, 59728, 27296, 15 | 44710, 43856, 19296, 43748, 42352, 21088, 16 | 62051, 55632, 23383, 22176, 38608, 19925, 17 | 19152, 42192, 54484, 53840, 54616, 46400, 18 | 46496, 103846, 38320, 18864, 43380, 42160, 19 | 45690, 27216, 27968, 44870, 43872, 38256, 20 | 19189, 18800, 25776, 29859, 59984, 27480, 21 | 21952, 43872, 38613, 37600, 51552, 55636, 22 | 54432, 55888, 30034, 22176, 43959, 9680, 23 | 37584, 51893, 43344, 46240, 47780, 44368, 24 | 21977, 19360, 42416, 86390, 21168, 43312, 25 | 31060, 27296, 44368, 23378, 19296, 42726, 26 | 42208, 53856, 60005, 54576, 23200, 30371, 27 | 38608, 19415, 19152, 42192, 118966, 53840, 28 | 54560, 56645, 46496, 22224, 21938, 18864, 29 | 42359, 42160, 43600, 111189, 27936, 44448 30 | ); 31 | 32 | //国历节日 *表示放假日 33 | var sFtv = new Array( 34 | "0101*元旦 新年", 35 | "0106 中国第13亿人口日", 36 | "0108 周恩来逝世纪念日", 37 | "0115 释迦如来成道日", 38 | "0121 列宁逝世纪念日 国际声援南非日 弥勒佛诞辰", 39 | "0202 世界湿地日", 40 | "0207 二七大罢工纪念日", 41 | "0210 国际气象节", 42 | "0214 情人节", 43 | "0215 中国12亿人口日", 44 | "0219 邓小平逝世纪念日", 45 | "0221 国际母语日 反对殖民制度斗争日", 46 | "0222 苗族芦笙节", 47 | "0224 第三世界青年日", 48 | "0228 世界居住条件调查日", 49 | "0301 国际海豹日", 50 | "0303 全国爱耳日", 51 | "0305 学雷锋纪念日 中国青年志愿者服务日", 52 | "0308 妇女节", 53 | "0309 保护母亲河日", 54 | "0311 国际尊严尊敬日", 55 | "0312 植树节&孙中山逝世纪念日", 56 | "0314 国际警察日 白色情人节", 57 | "0315 消费者权益日", 58 | "0316 手拉手情系贫困小伙伴全国统一行动日", 59 | "0317 中国国医节 国际航海日", 60 | "0318 全国科技人才活动日", 61 | "0321 世界森林日 世界儿歌日 世界睡眠日", 62 | "0322 世界水日", 63 | "0323 世界气象日", 64 | "0324 世界防治结核病日", 65 | "0325 全国中小学生安全教育日", 66 | "0329 中国黄花岗七十二烈士殉难纪念", 67 | "0330 巴勒斯坦国土日", 68 | "0401 愚人节&全国爱国卫生运动月(四月)", 69 | "0402 国际儿童图书日", 70 | "0407 世界卫生日", 71 | "0411 世界帕金森病日", 72 | "0421 全国企业家活动日", 73 | "0422 世界地球日 世界法律日", 74 | "0423 世界图书和版权日", 75 | "0424 亚非新闻工作者日 世界青年反对殖民主义日", 76 | "0425 全国预防接种宣传日", 77 | "0426 世界知识产权日", 78 | "0430 世界交通安全反思日", 79 | "0501*劳动节&国际劳动节", 80 | "0503 世界哮喘日 世界新闻自由日", 81 | "0504 青年节&中国五四青年节 科技传播日", 82 | "0505 碘缺乏病防治日 日本男孩节", 83 | "0508 世界红十字日", 84 | "0512 国际护士节", 85 | "0515 国际家庭日", 86 | "0517 国际电信日", 87 | "0518 国际博物馆日", 88 | "0520 全国学生营养日 全国母乳喂养宣传日", 89 | "0523 国际牛奶日", 90 | "0526 世界向人体条件挑战日", 91 | "0530 中国“五卅”运动纪念日", 92 | "0531 世界无烟日 英国银行休假日", 93 | "0601 儿童节&国际儿童节", 94 | "0605 世界环境保护日", 95 | "0614 世界献血者日", 96 | "0617 防治荒漠化和干旱日", 97 | "0620 世界难民日", 98 | "0622 中国儿童慈善活动日", 99 | "0623 国际奥林匹克日", 100 | "0625 全国土地日", 101 | "0626 国际禁毒日 国际宪章日", 102 | "0630 世界青年联欢节", 103 | "0701 建党节&香港回归纪念日 中共诞辰 世界建筑日", 104 | "0702 国际体育记者日", 105 | "0706 朱德逝世纪念日", 106 | "0707 抗日战争纪念日", 107 | "0711 世界人口日 中国航海日", 108 | "0726 世界语创立日", 109 | "0728 第一次世界大战爆发", 110 | "0730 非洲妇女日", 111 | "0801 建军节&中国人民解放军建军节", 112 | "0805 恩格斯逝世纪念日", 113 | "0806 国际电影节", 114 | "0808 中国男子节(爸爸节)", 115 | "0812 国际青年节", 116 | "0813 国际左撇子日", 117 | "0815 抗日战争胜利纪念", 118 | "0826 全国律师咨询日", 119 | "0902 日本签署无条件投降书日", 120 | "0903 中国抗日战争胜利纪念日", 121 | "0905 瑞士萨永中世纪节", 122 | "0906 帕瓦罗蒂去世", 123 | "0908 国际扫盲日 国际新闻工作者日", 124 | "0909 毛泽东逝世纪念日", 125 | "0910 教师节&中国教师节 世界预防自杀日", 126 | "0914 世界清洁地球日", 127 | "0916 国际臭氧层保护日 中国脑健康日", 128 | "0918 九·一八事变纪念日", 129 | "0920 国际爱牙日", 130 | "0921 世界停火日 预防世界老年性痴呆宣传日", 131 | "0927 世界旅游日", 132 | "0928 孔子诞辰", 133 | "0930 国际翻译日", 134 | "1001*国庆节&世界音乐日 国际老人节", 135 | "1002*国庆节假日 国际和平与民主自由斗争日", 136 | "1003*国庆节假日", 137 | "1004 世界动物日", 138 | "1005 国际教师节", 139 | "1006 中国老年节", 140 | "1008 全国高血压日 世界视觉日", 141 | "1009 世界邮政日 万国邮联日", 142 | "1010 辛亥革命纪念日 世界精神卫生日", 143 | "1013 世界保健日 国际教师节", 144 | "1014 世界标准日", 145 | "1015 国际盲人节(白手杖节)", 146 | "1016 世界粮食日", 147 | "1017 世界消除贫困日", 148 | "1020 世界骨质疏松日", 149 | "1022 世界传统医药日", 150 | "1024 联合国日 世界发展新闻日", 151 | "1028 中国男性健康日", 152 | "1031 万圣节 世界勤俭日", 153 | "1102 达摩祖师圣诞", 154 | "1106 柴科夫斯基逝世悼念日", 155 | "1107 十月社会主义革命纪念日", 156 | "1108 中国记者日", 157 | "1109 全国消防安全宣传教育日", 158 | "1110 世界青年节", 159 | "1111 光棍节 国际科学与和平周", 160 | "1112 孙中山诞辰纪念日", 161 | "1114 世界糖尿病日", 162 | "1115 泰国大象节", 163 | "1117 国际大学生节 世界学生节 世界戒烟日", 164 | "1120 世界儿童日", 165 | "1121 世界问候日 世界电视日", 166 | "1129 国际声援巴勒斯坦人民国际日", 167 | "1201 世界艾滋病日", 168 | "1202 废除一切形式奴役世界日", 169 | "1203 世界残疾人日", 170 | "1204 全国法制宣传日", 171 | "1205 国际经济和社会发展志愿人员日 世界弱能人士日", 172 | "1207 国际民航日", 173 | "1208 国际儿童电视日", 174 | "1209 世界足球日 一二·九运动纪念日", 175 | "1210 世界人权日", 176 | "1211 世界防止哮喘日", 177 | "1212 西安事变纪念日", 178 | "1213 南京大屠杀纪念日", 179 | "1214 国际儿童广播电视节", 180 | "1215 世界强化免疫日", 181 | "1220 澳门回归纪念", 182 | "1221 国际篮球日", 183 | "1224 平安夜", 184 | "1225 圣诞节", 185 | "1226 毛泽东诞辰纪念日&节礼日", 186 | "1229 国际生物多样性日" 187 | ); 188 | 189 | //农历节日 *表示放假日 190 | var lFtv = new Array( 191 | "0101*春节 大年初一", 192 | "0102*初二", 193 | "0115 元宵节", 194 | "0505*端午节", 195 | "0707 七夕情人节", 196 | "0715 中元节", 197 | "0815*中秋节", 198 | "0909 重阳节", 199 | "1208 腊八节", 200 | "1223 小年", 201 | "0100*除夕" 202 | ); 203 | 204 | //某月的第几个星期几 205 | var wFtv = new Array( 206 | "0150 世界麻风日", //一月的最后一个星期日（月倒数第一个星期日） 207 | "0351 全国中小学生安全教育日", 208 | "0453 秘书节", 209 | "0512 国世界哮喘日", 210 | "0520 母亲节&国际母亲节 救助贫困母亲日", 211 | "0530 全国助残日", 212 | "0532 国际牛奶日", 213 | "0626 中国文化遗产日", 214 | "0630 父亲节&国际父亲节", 215 | "0716 国际合作节", 216 | "0730 被奴役国家周", 217 | "0932 国际和平日", 218 | "0936 全民国防教育日", 219 | "0940 国际聋人节 世界儿童日", 220 | "0950 世界海事日 世界心脏病日", 221 | "1011 国际住房日 世界建筑日 世界人居日", 222 | "1023 国际减轻自然灾害日(减灾日)", 223 | "1024 世界视觉日", 224 | "1144 感恩节", 225 | "1220 国际儿童电视广播日" 226 | ); 227 | 228 | var solarMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); 229 | var Gan = new Array("\u7532", "\u4e59", "\u4e19", "\u4e01", "\u620a", "\u5df1", "\u5e9a", "\u8f9b", "\u58ec", "\u7678"); 230 | var Zhi = new Array("\u5b50", "\u4e11", "\u5bc5", "\u536f", "\u8fb0", "\u5df3", "\u5348", "\u672a", "\u7533", "\u9149", "\u620c", "\u4ea5"); 231 | var Animals = new Array("\u9f20", "\u725b", "\u864e", "\u5154", "\u9f99", "\u86c7", "\u9a6c", "\u7f8a", "\u7334", "\u9e21", "\u72d7", "\u732a"); 232 | var solarTerm = new Array("\u5c0f\u5bd2", "\u5927\u5bd2", "\u7acb\u6625", "\u96e8\u6c34", "\u60ca\u86f0", "\u6625\u5206", "\u6e05\u660e", "\u8c37\u96e8", "\u7acb\u590f", "\u5c0f\u6ee1", "\u8292\u79cd", "\u590f\u81f3", "\u5c0f\u6691", "\u5927\u6691", "\u7acb\u79cb", "\u5904\u6691", "\u767d\u9732", "\u79cb\u5206", "\u5bd2\u9732", "\u971c\u964d", "\u7acb\u51ac", "\u5c0f\u96ea", "\u5927\u96ea", "\u51ac\u81f3"); 233 | var sTermInfo = new Array(0, 21208, 42467, 63836, 85337, 107014, 128867, 150921, 173149, 195551, 218072, 240693, 263343, 285989, 308563, 331033, 353350, 375494, 397447, 419210, 440795, 462224, 483532, 504758); 234 | var nStr1 = new Array("\u65e5", "\u4e00", "\u4e8c", "\u4e09", "\u56db", "\u4e94", "\u516d", "\u4e03", "\u516b", "\u4e5d", "\u5341", "\u5341\u4e00", "\u5341\u4e8c"); 235 | var nStr2 = new Array("\u521d", "\u5341", "\u5eff", "\u5345", "\u3000"); 236 | var monthName = new Array("JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"); 237 | 238 | var BG_DATA = { 239 | "立春": "http://img03.taobaocdn.com/tps/i3/T1JZWnXnJpXXXXXXXX-83-56.jpg", 240 | "情人节": "http://img01.taobaocdn.com/tps/i1/T17cynXf0sXXXXXXXX-83-56.jpg", 241 | "妇女节": "http://img01.taobaocdn.com/tps/i1/T1D0enXmJnXXXXXXXX-83-56.jpg", 242 | "植树节&孙中山逝世纪念日": "http://img03.taobaocdn.com/tps/i3/T1Q0enXlxnXXXXXXXX-83-56.jpg", 243 | "清明": "http://img04.taobaocdn.com/tps/i4/T1WIWnXmdpXXXXXXXX-83-56.jpg", 244 | "劳动节&国际劳动节": "http://img04.taobaocdn.com/tps/i4/T1PcunXXltXXXXXXXX-83-56.jpg", 245 | "青年节&中国五四青年节 科技传播日": "http://img02.taobaocdn.com/tps/i2/T1qZGnXmhrXXXXXXXX-83-56.jpg", 246 | "儿童节&国际儿童节": "http://img01.taobaocdn.com/tps/i1/T1XqafXepoXXXXXXXX-83-56.jpg", 247 | "防治荒漠化和干旱日": "http://img02.taobaocdn.com/tps/i2/T1XWafXedoXXXXXXXX-83-56.jpg", 248 | "\u7236\u4eb2\u8282": "http://img03.taobaocdn.com/tps/i3/T1gGafXd4oXXXXXXXX-83-56.jpg", 249 | "\u7aef\u5348\u8282": "http://img04.taobaocdn.com/tps/i4/T15synXgXsXXXXXXXX-83-56.jpg", 250 | "\u4e16\u754c\u4eba\u53e3\u65e5": "http://img02.taobaocdn.com/tps/i2/T109egXeVnXXXXXXXX-83-56.jpg", 251 | "\u5927\u6691": "http://img01.taobaocdn.com/tps/i1/T10SegXfXnXXXXXXXX-83-56.jpg", 252 | "\u5efa\u515a\u8282 \u9999\u6e2f\u56de\u5f52\u7eaa\u5ff5\u65e5 \u4e16\u754c\u5efa\u7b51\u65e5": "http://img04.taobaocdn.com/tps/i4/T1NCegXfplXXXXXXXX-83-56.jpg", 253 | "\u6297\u65e5\u6218\u4e89\u7eaa\u5ff5\u65e5": "http://img03.taobaocdn.com/tps/i3/T1MCegXgtnXXXXXXXX-83-56.jpg", 254 | "\u5efa\u519b\u8282": "http://img01.taobaocdn.com/tps/i1/T1Er83XbdCXXXXXXXX-83-56.jpg", 255 | "\u5904\u6691": "http://img04.taobaocdn.com/tps/i4/T1MbN3XeNBXXXXXXXX-83-56.jpg", 256 | "\u4e03\u5915\u60c5\u4eba\u8282": "http://img03.taobaocdn.com/tps/i3/T12HN3XfpAXXXXXXXX-83-56.jpg", 257 | "\u6297\u65e5\u6218\u4e89\u80dc\u5229\u7eaa\u5ff5": "http://img02.taobaocdn.com/tps/i2/T1EbJ3Xj8AXXXXXXXX-83-56.jpg", 258 | "\u6559\u5e08\u8282": "http://img01.taobaocdn.com/tps/i1/T1jselXfhzXXXXXXXX-83-56.gif", 259 | "\u4e2d\u79cb\u8282": "http://img04.taobaocdn.com/tps/i4/T1BIalXd8zXXXXXXXX-83-56.gif", 260 | "\u5b54\u5b50\u8bde\u8fb0": "http://img02.taobaocdn.com/tps/i2/T1RIalXkJzXXXXXXXX-83-56.gif", 261 | "\u4e5d\u4e00\u516b\u4e8b\u53d8\u7eaa\u5ff5\u65e5": "http://img04.taobaocdn.com/tps/i4/T1ucKnXfhrXXXXXXXX-83-56.jpg", 262 | "\u56fd\u5e86\u8282 \u4e16\u754c\u97f3\u4e50\u65e5 \u56fd\u9645\u8001\u4eba\u8282": "http://img03.taobaocdn.com/tps/i3/T1LAilXjtyXXXXXXXX-83-56.jpg", 263 | "\u91cd\u9633\u8282 \u56fd\u9645\u51cf\u8f7b\u81ea\u7136\u707e\u5bb3\u65e5(\u51cf\u707e\u65e5)": "http://img04.taobaocdn.com/tps/i4/T1Z0enXkpnXXXXXXXX-83-56.jpg", 264 | "\u8f9b\u4ea5\u9769\u547d\u7eaa\u5ff5\u65e5 \u4e16\u754c\u7cbe\u795e\u536b\u751f\u65e5": "http://img01.taobaocdn.com/tps/i1/T1lcGnXmRrXXXXXXXX-83-56.jpg", 265 | "\u611f\u6069\u8282": "http://img02.taobaocdn.com/tps/i2/T1OImnXhtpXXXXXXXX-83-56.jpg", 266 | "\u5b59\u4e2d\u5c71\u8bde\u8fb0": "http://img02.taobaocdn.com/tps/i2/T1JdenXmXnXXXXXXXX-83-56.jpg", 267 | "\u6fb3\u95e8\u56de\u5f52\u7eaa\u5ff5": "http://img03.taobaocdn.com/tps/i3/T1LsunXXFtXXXXXXXX-83-56.jpg", 268 | "\u51ac\u81f3": "http://img03.taobaocdn.com/tps/i3/T1BsunXldrXXXXXXXX-83-56.jpg", 269 | "\u6bdb\u6cfd\u4e1c\u8bde\u8fb0": "http://img03.taobaocdn.com/tps/i3/T1mIWnXjtpXXXXXXXX-83-56.jpg", 270 | "\u5723\u8bde\u8282": "http://img01.taobaocdn.com/tps/i1/T1ksGnXfhrXXXXXXXX-83-56.jpg", 271 | "\u9664\u5915": "http://img04.taobaocdn.com/tps/i4/T1odenXn4nXXXXXXXX-83-56.jpg", 272 | "\u6625\u8282": "http://img01.taobaocdn.com/tps/i1/T16ZWnXkFpXXXXXXXX-83-56.jpg", 273 | "\u5143\u5bb5\u8282": "http://img02.taobaocdn.com/tps/i2/T1BIWnXolpXXXXXXXX-83-56.jpg" 274 | }; 275 | 276 | function lYearDays(C) { 277 | var A, B = 348; 278 | for (A = 32768; A > 8; A >>= 1) { 279 | B += (lunarInfo[C - 1900] & A) ? 1 : 0 280 | } 281 | return (B + leapDays(C)) 282 | } 283 | function leapDays(A) { 284 | if (leapMonth(A)) { 285 | return ((lunarInfo[A - 1900] & 65536) ? 30 : 29) 286 | } else { 287 | return (0) 288 | } 289 | } 290 | function leapMonth(A) { 291 | return (lunarInfo[A - 1900] & 15) 292 | } 293 | function monthDays(B, A) { 294 | return ((lunarInfo[B - 1900] & (65536 >> A)) ? 30 : 29) 295 | } 296 | function Lunar(F) { 297 | var A = ""; 298 | var D, C = 0, B = 0; 299 | var E = new Date(1900, 0, 31); 300 | var G = Math.floor((F.getTime() + 2206425600000) / 86400000); 301 | A += "objDate=" + F.getTime() + ", new Date(1900,0,31)=" + E.getTime(); 302 | A += "offset=" + G; 303 | this.dayCyl = G + 40; 304 | this.monCyl = 14; 305 | for (D = 1900; D < 2050 && G > 0; D++) { 306 | B = lYearDays(D); 307 | G -= B; 308 | this.monCyl += 12 309 | } 310 | if (G < 0) { 311 | G += B; 312 | D--; 313 | this.monCyl -= 12 314 | } 315 | this.year = D; 316 | this.yearCyl = D - 1864; 317 | C = leapMonth(D); 318 | this.isLeap = false; 319 | for (D = 1; D < 13 && G > 0; D++) { 320 | if (C > 0 && D == (C + 1) && this.isLeap == false) { 321 | --D; 322 | this.isLeap = true; 323 | B = leapDays(this.year) 324 | } else { 325 | B = monthDays(this.year, D) 326 | } 327 | if (this.isLeap == true && D == (C + 1)) { 328 | this.isLeap = false 329 | } 330 | G -= B; 331 | if (this.isLeap == false) { 332 | this.monCyl++ 333 | } 334 | } 335 | if (G == 0 && C > 0 && D == C + 1) { 336 | if (this.isLeap) { 337 | this.isLeap = false 338 | } else { 339 | this.isLeap = true; 340 | --D; 341 | --this.monCyl 342 | } 343 | } 344 | if (G < 0) { 345 | G += B; 346 | --D; 347 | --this.monCyl 348 | } 349 | this.month = D; 350 | this.day = G + 1; 351 | A += "\noffset=" + G + ", year=" + this.year + ", yearCyl=" + this.yearCyl + ", month=" + this.month + ",\n monthCyl=" + this.monthCyl + ", day=" + this.day + ", dayCyl=" + this.dayCyl; 352 | } 353 | function solarDays(B, A) { 354 | if (A == 1) { 355 | return (((B % 4 == 0) && (B % 100 != 0) || (B % 400 == 0)) ? 29 : 28) 356 | } else { 357 | return (solarMonth[A]) 358 | } 359 | } 360 | function cyclical(A) { 361 | return (Gan[A % 10] + Zhi[A % 12]) 362 | } 363 | function calElement(A, G, J, B, F, D, E, H, C, I, K) { 364 | this.isToday = false; 365 | this.sYear = A; 366 | this.sMonth = G; 367 | this.sDay = J; 368 | this.week = B; 369 | this.lYear = F; 370 | this.lMonth = D; 371 | this.lDay = E; 372 | this.isLeap = H; 373 | this.cYear = C; 374 | this.cMonth = I; 375 | this.cDay = K; 376 | this.color = ""; 377 | this.lunarFestival = ""; 378 | this.solarFestival = ""; 379 | this.solarTerms = "" 380 | } 381 | function sTerm(C, B) { 382 | var A = new Date((31556925974.7 * (C - 1900) + sTermInfo[B] * 60000) - 2208549300000); 383 | return (A.getUTCDate()) 384 | } 385 | function calendar(N, F,tY,tM,tD) { 386 | var O, I, L, B, K = 1, C, M = 0, H, G; 387 | var D = new Array(3); 388 | var E = 0; 389 | var A = 0; 390 | O = new Date(N, F, 1); 391 | this.length = solarDays(N, F); 392 | this.firstWeek = O.getDay(); 393 | for (var J = 0; J < this.length; J++) { 394 | if (K > M) { 395 | O = new Date(N, F, J + 1); 396 | I = new Lunar(O); 397 | L = I.year; 398 | B = I.month; 399 | K = I.day; 400 | C = I.isLeap; 401 | M = C ? leapDays(L) : monthDays(L, B); 402 | if (E == 0) { 403 | A = B 404 | } 405 | D[E++] = J - K + 1 406 | } 407 | this[J] = new calElement(N, F + 1, J + 1, nStr1[(J + this.firstWeek) % 7], L, B, K++, C, cyclical(I.yearCyl), cyclical(I.monCyl), cyclical(I.dayCyl++)); 408 | if ((J + this.firstWeek) % 7 == 0) { 409 | this[J].color = "#ff5f07" 410 | } 411 | if ((J + this.firstWeek) % 14 == 13) { 412 | this[J].color = "#ff5f07" 413 | } 414 | } 415 | H = sTerm(N, F * 2) - 1; 416 | G = sTerm(N, F * 2 + 1) - 1; 417 | this[H].solarTerms = solarTerm[F * 2]; 418 | this[G].solarTerms = solarTerm[F * 2 + 1]; 419 | if (F == 3) { 420 | this[H].color = "#ff5f07" 421 | } 422 | for (J in sFtv) { 423 | if (sFtv[J].match(/^(\d{2})(\d{2})([\s\*])(.+)$/)) { 424 | if (Number(RegExp.$1) == (F + 1)) { 425 | this[Number(RegExp.$2) - 1].solarFestival += RegExp.$4 + " "; 426 | if (RegExp.$3 == "*") { 427 | this[Number(RegExp.$2) - 1].color = "#ff5f07" 428 | } 429 | } 430 | } 431 | } 432 | for (J in wFtv) { 433 | if (wFtv[J].match(/^(\d{2})(\d)(\d)([\s\*])(.+)$/)) { 434 | if (Number(RegExp.$1) == (F + 1)) { 435 | H = Number(RegExp.$2); 436 | G = Number(RegExp.$3); 437 | this[((this.firstWeek > G) ? 7 : 0) + 7 * (H - 1) + G - this.firstWeek] && (this[((this.firstWeek > G) ? 7 : 0) + 7 * (H - 1) + G - this.firstWeek].solarFestival += RegExp.$5 + " ") 438 | } 439 | } 440 | } 441 | for (J in lFtv) { 442 | if (lFtv[J].match(/^(\d{2})(.{2})([\s\*])(.+)$/)) { 443 | H = Number(RegExp.$1) - A; 444 | if (H == -11) { 445 | H = 1 446 | } 447 | if (H >= 0 && H < E) { 448 | G = D[H] + Number(RegExp.$2) - 1; 449 | if (G >= 0 && G < this.length) { 450 | this[G].lunarFestival += RegExp.$4 + " "; 451 | if (RegExp.$3 == "*") { 452 | this[G].color = "#ff5f07" 453 | } 454 | } 455 | } 456 | } 457 | } 458 | if ((this.firstWeek + 12) % 7 == 5) { 459 | this[12].solarFestival += "\u9ed1\u8272\u661f\u671f\u4e94 " 460 | } 461 | if (N == tY && F == tM) { 462 | this[tD - 1].isToday = true 463 | } 464 | } 465 | function cDay(B) { 466 | var A; 467 | switch (B) { 468 | case 10: 469 | A = "\u521d\u5341"; 470 | break; 471 | case 20: 472 | A = "\u4e8c\u5341"; 473 | break; 474 | case 30: 475 | A = "\u4e09\u5341"; 476 | break; 477 | default: 478 | A = nStr2[Math.floor(B / 10)]; 479 | A += nStr1[B % 10] 480 | } 481 | return (A) 482 | } 483 | 484 | 485 | export default { 486 | Calendar: calendar, 487 | monthDays: monthDays, 488 | cDay: cDay 489 | }; 490 | -------------------------------------------------------------------------------- /lib/calendar.min.js: -------------------------------------------------------------------------------- 1 | /*! For license information please see calendar.min.js.LICENSE.txt */ 2 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("Vue")):"function"==typeof define&&define.amd?define("Calendar",["Vue"],t):"object"==typeof exports?exports.Calendar=t(require("Vue")):e.Calendar=t(e.Vue)}(self,(e=>(()=>{"use strict";var t={60:(e,t)=>{t.Z=(e,t)=>{const a=e.__vccOpts||e;for(const[e,n]of t)a[e]=n;return a}},740:t=>{t.exports=e}},a={};function n(e){var r=a[e];if(void 0!==r)return r.exports;var i=a[e]={exports:{}};return t[e](i,i.exports,n),i.exports}n.d=(e,t)=>{for(var a in t)n.o(t,a)&&!n.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var r={};return(()=>{n.d(r,{default:()=>B});var e=n(740),t={class:"datepicker",ref:"el"},a=["id","placeholder"],i=[(0,e.createElementVNode)("span",null,"×",-1)],s={class:"datepicker-ctrl"},o={class:"datepicker-body"},l={class:"datepicker-weekRange"},c={class:"datepicker-dateRange"},u=["data-date","onClick"],d={key:2},p={key:0,class:"datepicker-popup"},h={class:"datepicker-ctrl"},f={class:"datepicker-body"},y={class:"datepicker-monthRange"},g=["onClick"],m={key:1,class:"datepicker-popup"},D={class:"datepicker-ctrl"},k={class:"datepicker-body"},v={class:"datepicker-monthRange decadeRange"},w=["onClick"];function V(e){return void 0===e&&(e=document.body),!0===e?document.body:e instanceof window.Node?e:document.querySelector(e)}const b={mounted:function(e,t){var a=t.value;if(!1===a)return!1;e.className=e.className?e.className+" v-transfer":"v-transfer";var n=e.parentNode;if(n){var r=document.createComment(""),i=!1;!1!==a&&(n.replaceChild(r,e),V(a).appendChild(e),i=!0),e.__transferDomData||(e.__transferDomData={parentNode:n,home:r,target:V(a),hasMovedOut:i})}},updated:function(e,t){var a=t.value;if(!1===a)return!1;var n=e.__transferDomData;if(n){var r=n.parentNode,i=n.home,s=n.hasMovedOut;!s&&a?(r.replaceChild(i,e),V(a).appendChild(e),e.__transferDomData=Object.assign({},e.__transferDomData,{hasMovedOut:!0,target:V(a)})):s&&!1===a?(r.replaceChild(e,i),e.__transferDomData=Object.assign({},e.__transferDomData,{hasMovedOut:!1,target:V(a)})):a&&V(a).appendChild(e)}},unmounted:function(e,t){if(!1===t.value)return!1;e.className=e.className.replace("v-transfer",""),e.__transferDomData&&(!0===e.__transferDomData.hasMovedOut&&e.__transferDomData.parentNode&&e.__transferDomData.parentNode.appendChild(e),e.__transferDomData=null)}};function S(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function M(e,t,a){var n;return n=function(e,t){if("object"!=C(e)||!e)return e;var a=e[Symbol.toPrimitive];if(void 0!==a){var n=a.call(e,t||"default");if("object"!=C(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(t,"string"),(t="symbol"==C(n)?n:String(n))in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function C(e){return C="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},C(e)}const N={name:"calendar",props:{modelValue:{type:[String,Date]},format:{default:"MM/dd/yyyy"},firstDayOfWeek:{default:0},disabledDaysOfWeek:{type:Array,default:function(){return[]}},width:{type:String,default:"200px"},clearButton:{type:Boolean,default:!1},inputClasses:{type:String,default:""},lang:{type:String,default:navigator.language},placeholder:{type:String},hasInput:{type:Boolean,default:!0},pane:{type:Number,default:1},borderWidth:{type:Number,default:2},onDayClick:{type:Function,default:function(){}},changePane:{type:Function,default:function(){}},specialDays:{type:Object,default:function(){return{}}},rangeBus:{type:Function,default:function(){}},rangeStatus:{type:Number,default:0},maxDate:{type:String},minDate:{type:String},showDateOnly:{type:Boolean,default:!1},transfer:{type:Boolean,default:!1},elementId:[String]},emits:["update:modelValue","childCreated","drawDate"],directives:{transfer:b},mounted:function(){var e=this;this._blur=function(t){var a,n,r;e.transfer?null!==(a=e.$el)&&void 0!==a&&a.contains(t.target)||null!==(n=e.$refs.popup)&&void 0!==n&&n.contains(t.target)||!e.hasInput||e.close():null!==(r=e.$el)&&void 0!==r&&r.contains(t.target)||!e.hasInput||e.close()},this.$emit("childCreated",this),this.currDate=this.parse(this.inputValue)||this.parse(new Date);var t=this.currDate.getFullYear(),a=this.currDate.getMonth();this.changePane(t,a,this.pane),this.hasInput||(this.displayDayView=!0,this.updatePaneStyle()),this.rangeStatus&&(this.eventbus=this.rangeBus(),"object"!==C(this.eventbus)||this.eventbus.$on||(console.warn("Calendar rangeBus doesn't exist"),this.rangeStatus=0)),2===this.rangeStatus&&(this._updateRangeStart=function(t){e.rangeStart=t,e.currDate=t,e.inputValue=e.stringify(e.currDate)},this.eventbus.$on("calendarRangeStart",this._updateRangeStart)),document.addEventListener("click",this._blur)},beforeDestroy:function(){document.removeEventListener("click",this._blur),2===this.rangeStatus&&this.eventbus.$off("calendarRangeStart",this._updateRangeStart)},data:function(){return{dateFormat:this.format,currDate:new Date,dateRange:[],decadeRange:[],paneStyle:{width:""},displayDayView:!1,displayMonthView:!1,displayYearView:!1,rangeStart:!1,rangeEnd:!1}},watch:{currDate:function(){this.getDateRange()},modelValue:function(e){this.inputValue=e instanceof Date?this.stringify(e):e}},computed:{daysOfWeek:function(){var e=this.firstDayOfWeek;return 0==e?this.text.daysOfWeek:this.text.daysOfWeek.slice(e,7).concat(this.text.daysOfWeek.slice(0,e))},text:function(){return this.translations(this.lang)},isWrapperShow:function(){return this.displayDayView||this.displayMonthView||this.displayYearView},inputValue:{get:function(){return this.modelValue instanceof Date?this.stringify(this.modelValue):this.modelValue},set:function(e){this.$emit("update:modelValue",e),this.currDate=this.parse(e),1===this.rangeStatus&&this.eventbus&&this.eventbus.$emit("calendarRangeStart",this.currDate)}},classes:function(){var e=this.inputClasses;return this.clearButton&&(e+=" with-reset-button"),e}},methods:{handleMouseOver:function(e){var t=e.target;if(!this.rangeStart)return!0;if("mouseout"===e.type)return!0;for(;this.$el.contains(t)&&!~t.className.indexOf("day-cell");)t=t.parentNode;if(~t.className.indexOf("day-cell")&&!~t.className.indexOf("datepicker-item-gray")){var a=t.getAttribute("data-date");this.rangeStarta.getTime()&&(e.allowSelect=!1),this.isDate(n)&&t.getTime()this.rangeStart&&t.datedocument.documentElement.clientWidth&&(c.left=a+i-l+"px")):l+r>document.documentElement.clientWidth&&(c.right="0px"):c.position="initial",e.paneStyle=c}))},preNextDecadeClick:function(e){var t=this.currDate.getFullYear(),a=this.currDate.getMonth(),n=this.currDate.getDate();this.currDate=0===e?new Date(t-10,a,n):new Date(t+10,a,n)},preNextMonthClick:function(e){var t=this.currDate.getFullYear(),a=this.currDate.getMonth(),n=this.currDate.getDate();if(0===e){var r=this.getYearMonth(t,a-1),i=Math.min(this.getDayCount(r.year,r.month),n);this.currDate=new Date(r.year,r.month,i),this.changePane(r.year,r.month,this.pane)}else{var s=this.getYearMonth(t,a+1),o=Math.min(this.getDayCount(s.year,s.month),n);this.currDate=new Date(s.year,s.month,o),this.changePane(s.year,s.month,this.pane)}},preNextYearClick:function(e){var t=this.currDate.getFullYear(),a=this.currDate.getMonth(),n=this.currDate.getDate();this.currDate=0===e?new Date(t-1,a,n):new Date(t+1,a,n)},yearSelect:function(e){this.displayYearView=!1,this.displayMonthView=!0,this.currDate=new Date(e,this.currDate.getMonth(),this.currDate.getDate())},daySelect:function(e,t){var a=e.date,n=t.target;if(0==e.allowSelect||"datepicker-item-disable"===n.classList[0])return!1;this.hasInput?(this.currDate=a,this.inputValue=this.stringify(this.currDate),this.displayDayView=!1):this.onDayClick(a,this.stringify(a))},switchMonthView:function(){if(this.showDateOnly)return!0;this.displayDayView=!1,this.displayMonthView=!0},switchDecadeView:function(){this.displayMonthView=!1,this.displayYearView=!0},monthSelect:function(e,t){this.displayMonthView=!1,this.displayDayView=!0,this.currDate=new Date(e,t,this.currDate.getDate()),this.changePane(e,t,this.pane)},getYearMonth:function(e,t){return t>11?(e++,t=0):t<0&&(e--,t=11),{year:e,month:t}},getSpecailDay:function(e){return this.specialDays[this.stringify(e)]},stringifyDecadeHeader:function(e,t){var a=e.getFullYear().toString(),n=parseInt(a.substring(0,a.length-1)+0,10)+10*t;return n+"-"+(parseInt(n,10)+10)},siblingsMonth:function(e,t){return new Date(e.getFullYear(),1*e.getMonth()+t)},stringifyDayHeader:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,a=this.siblingsMonth(e,t);return this.text.months[a.getMonth()]+" "+a.getFullYear()},parseMonth:function(e){return this.text.months[e.getMonth()]},stringifyYearHeader:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;return e.getFullYear()+t},isDate:function(e){return!(!e||!e.getFullYear)},stringify:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:this.dateFormat;if(e||(e=this.parse(this.inputValue)),!e)return"";var a=e.getFullYear(),n=e.getMonth()+1,r=e.getDate(),i=this.parseMonth(e);return t.replace(/yyyy/g,a).replace(/MMMM/g,i).replace(/MMM/g,i.substring(0,3)).replace(/MM/g,("0"+n).slice(-2)).replace(/dd/g,("0"+r).slice(-2)).replace(/yy/g,a).replace(/M(?!a)/g,n).replace(/d/g,r)},parse:function(e){var t,a=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];return"string"==typeof e?(10!==e.length||"dd.MM.yyyy"!==this.dateFormat&&"dd-MM-yyyy"!==this.dateFormat&&"dd/MM/yyyy"!==this.dateFormat?(t=new Date(e)).setHours(0,0,0):t=new Date(e.substring(6,10),e.substring(3,5)-1,e.substring(0,2)),isNaN(t.getFullYear())&&a?new Date:t):e},getDayCount:function(e,t){return 1===t&&(e%400==0||e%4==0&&e%100!=0)?29:[31,28,31,30,31,30,31,31,30,31,30,31][t]},prefixLen:function(e){var t=this.firstDayOfWeek,a=e.getDay();return a>=t?a-t:7-t+a},getDateRange:function(){for(var e=this,t=[],a=[],n=0;n=1)for(var p=this.getYearMonth(i.year,i.month-1),h=this.getDayCount(p.year,p.month),f=0;f 2 |
3 | 12 |
16 |
17 |
18 | 19 | 21 |
22 | 47 |
48 |
49 |
50 | 51 | 53 |
54 | 70 |
71 |
72 |
73 | 75 | 77 |
78 | 93 |
94 |
95 |
96 | 97 | 98 | 722 | 723 | 936 | -------------------------------------------------------------------------------- /src/components/Calendar.vue: -------------------------------------------------------------------------------- 1 | 97 | 98 | 722 | 723 | 982 | --------------------------------------------------------------------------------