├── .nvmrc ├── .eslintignore ├── .prettierignore ├── tests ├── unit │ ├── coverage │ │ ├── lcov.info │ │ ├── coverage-final.json │ │ ├── lcov-report │ │ │ ├── sort-arrow-sprite.png │ │ │ └── prettify.css │ │ └── clover.xml │ ├── setup.js │ ├── .eslintrc │ ├── util │ │ └── wait.js │ └── jest.conf.js ├── __mocks__ │ └── styleMock.js └── .prettierrc ├── docs ├── .vuepress │ ├── styles │ │ ├── palette.styl │ │ ├── index.styl │ │ └── tailwind.css │ ├── theme │ │ ├── noopModule.js │ │ ├── styles │ │ │ ├── toc.styl │ │ │ ├── wrapper.styl │ │ │ ├── palette.styl │ │ │ ├── arrow.styl │ │ │ ├── custom-blocks.styl │ │ │ └── index.styl │ │ ├── components │ │ │ ├── Page.vue │ │ │ ├── DropdownTransition.vue │ │ │ ├── Sidebar.vue │ │ │ ├── SidebarButton.vue │ │ │ ├── NavLink.vue │ │ │ ├── CarbonAds.vue │ │ │ └── SidebarLinks.vue │ │ ├── layouts │ │ │ └── 404.vue │ │ ├── global-components │ │ │ └── Badge.vue │ │ ├── LICENSE │ │ └── index.js │ ├── public │ │ ├── hero.png │ │ ├── favicon.png │ │ └── profile.jpg │ ├── images │ │ └── dark-woods.jpg │ ├── components │ │ ├── guide │ │ │ ├── layouts │ │ │ │ ├── expanded.vue │ │ │ │ ├── rows.vue │ │ │ │ ├── trim-weeks.vue │ │ │ │ ├── responsive.vue │ │ │ │ ├── title-position.vue │ │ │ │ ├── weeknumbers.vue │ │ │ │ └── responsive-expanded.vue │ │ │ ├── readme │ │ │ │ ├── cal-basic.vue │ │ │ │ ├── dp-inline.vue │ │ │ │ ├── dp-available-dates.vue │ │ │ │ ├── dp-disabled-dates.vue │ │ │ │ ├── cal-date-range-no-start-end.vue │ │ │ │ ├── cal-date-range-no-start.vue │ │ │ │ ├── dp-min-max-dates.vue │ │ │ │ ├── cal-date-patterns-1.vue │ │ │ │ ├── cal-date-ranges.vue │ │ │ │ ├── cal-date-patterns.vue │ │ │ │ ├── cal-content-style.vue │ │ │ │ ├── cal-footer.vue │ │ │ │ ├── dp-input.vue │ │ │ │ └── dp-custom-slot.vue │ │ │ ├── datepicker │ │ │ │ ├── intro-inline.vue │ │ │ │ ├── simple-date.vue │ │ │ │ ├── minute-increment.vue │ │ │ │ ├── valid-hours.vue │ │ │ │ ├── simple-range.vue │ │ │ │ ├── min-max.vue │ │ │ │ ├── select-attribute.vue │ │ │ │ ├── range.vue │ │ │ │ ├── single-popover.vue │ │ │ │ ├── disable-dates.vue │ │ │ │ ├── intro-popover.vue │ │ │ │ ├── is-required.vue │ │ │ │ ├── input-format-parse.vue │ │ │ │ ├── disable-update.vue │ │ │ │ ├── input-debounce.vue │ │ │ │ ├── 24hr.vue │ │ │ │ ├── input-mask.vue │ │ │ │ ├── input-with-time.vue │ │ │ │ ├── disable-attribute.vue │ │ │ │ ├── single.vue │ │ │ │ ├── model-number.vue │ │ │ │ ├── range-popover.vue │ │ │ │ ├── model-string.vue │ │ │ │ ├── time-adjust.vue │ │ │ │ ├── time-adjust-range.vue │ │ │ │ └── range-input.vue │ │ │ ├── customize │ │ │ │ ├── header-title.vue │ │ │ │ ├── test.vue │ │ │ │ ├── header-title-pos.vue │ │ │ │ └── classes.vue │ │ │ ├── attributes │ │ │ │ ├── dot-style.vue │ │ │ │ ├── dot.vue │ │ │ │ ├── highlight.vue │ │ │ │ ├── highlight-color.vue │ │ │ │ ├── as-functions.vue │ │ │ │ ├── highlight-range.vue │ │ │ │ ├── multiple-dates.vue │ │ │ │ ├── highlight-custom.vue │ │ │ │ ├── bars.vue │ │ │ │ ├── dots.vue │ │ │ │ ├── popover-labels.vue │ │ │ │ └── popover-slot.vue │ │ │ └── format-parse-dates │ │ │ │ └── input.vue │ │ ├── sponsors │ │ │ ├── list.json │ │ │ └── page.vue │ │ ├── github │ │ │ ├── 280 │ │ │ │ ├── events.json │ │ │ │ └── 280.vue │ │ │ ├── 346.vue │ │ │ ├── _PickerTemplate.vue │ │ │ ├── 304.vue │ │ │ ├── 444.vue │ │ │ ├── 768.vue │ │ │ ├── 344.vue │ │ │ ├── 330.vue │ │ │ ├── 889.vue │ │ │ ├── 450.vue │ │ │ ├── 419.vue │ │ │ ├── 808.vue │ │ │ ├── 488.vue │ │ │ ├── 543.vue │ │ │ ├── 254.vue │ │ │ ├── 565.vue │ │ │ ├── 776.vue │ │ │ ├── 318.vue │ │ │ ├── 778.vue │ │ │ ├── 524.vue │ │ │ ├── 457.vue │ │ │ ├── 272.vue │ │ │ ├── 431.vue │ │ │ ├── 688.vue │ │ │ ├── 693.vue │ │ │ ├── 777.vue │ │ │ ├── 987.vue │ │ │ ├── 326.vue │ │ │ ├── 712.vue │ │ │ ├── 730.vue │ │ │ ├── 438.vue │ │ │ ├── 1052.vue │ │ │ ├── 469.vue │ │ │ ├── 140.vue │ │ │ ├── 302.vue │ │ │ ├── 379.vue │ │ │ ├── 308.vue │ │ │ ├── 682.vue │ │ │ ├── 570.vue │ │ │ ├── 984.vue │ │ │ ├── 323.vue │ │ │ ├── 695.vue │ │ │ ├── 088.vue │ │ │ ├── 632.vue │ │ │ ├── 761.vue │ │ │ ├── 370.vue │ │ │ ├── 1034.vue │ │ │ ├── 255.vue │ │ │ ├── 721.vue │ │ │ ├── 746.vue │ │ │ ├── 703.vue │ │ │ ├── 311.vue │ │ │ ├── 762.vue │ │ │ ├── 000.vue │ │ │ ├── 747.vue │ │ │ ├── 290.vue │ │ │ ├── 769.vue │ │ │ ├── 499.vue │ │ │ ├── 400.vue │ │ │ ├── 709.vue │ │ │ ├── 781.vue │ │ │ ├── 179.vue │ │ │ ├── 324.vue │ │ │ ├── 692.vue │ │ │ ├── 732.vue │ │ │ ├── 967.vue │ │ │ ├── 775.vue │ │ │ ├── 971.vue │ │ │ ├── 676.vue │ │ │ ├── 427.vue │ │ │ ├── 312.vue │ │ │ ├── 786.vue │ │ │ ├── 094.vue │ │ │ ├── 435.vue │ │ │ └── 772.vue │ │ ├── tests │ │ │ ├── theme.vue │ │ │ ├── disabled.vue │ │ │ ├── min-date.vue │ │ │ ├── range.vue │ │ │ └── inline-range.vue │ │ ├── homepage │ │ │ ├── multi-calendar.vue │ │ │ ├── banner.vue │ │ │ ├── datepicker.vue │ │ │ └── dark-mode.vue │ │ ├── showcase │ │ │ ├── class-highlight.vue │ │ │ └── dark-woods.vue │ │ ├── flatlogic │ │ │ └── template.vue │ │ └── examples │ │ │ ├── multiple-dates-legacy.vue │ │ │ ├── button-dropdown.vue │ │ │ └── multiple-dates.vue │ ├── tailwind.config.js │ └── enhanceApp.js ├── github │ └── README.md ├── showcase │ ├── README.md │ └── github.md ├── sponsors.md ├── tests │ └── README.md ├── flatlogic.md ├── custom-defaults.md ├── changelog │ ├── v0.2.md │ ├── v0.4.md │ ├── v0.3.md │ ├── v0.1.md │ └── v0.7.md ├── colors-dark-mode.md ├── api │ ├── v1.0 │ │ ├── README.md │ │ ├── date-patterns.md │ │ ├── page-object.md │ │ └── day-object.md │ └── v2.0 │ │ ├── README.md │ │ ├── date-patterns.md │ │ └── page-object.md ├── README.md └── quick-start.md ├── CHANGELOG.md ├── src ├── utils │ ├── defaults │ │ ├── screens.json │ │ ├── touch.json │ │ ├── masks.json │ │ └── index.js │ ├── mixins │ │ ├── index.js │ │ ├── safeScopedSlot.js │ │ └── child.js │ ├── setup.js │ ├── index.js │ ├── buildMediaQuery.js │ ├── _.js │ ├── touch.js │ ├── attributeStore.js │ ├── screens.js │ └── popovers.js ├── components │ ├── index.js │ └── SvgIcon.vue └── lib.js ├── .babelrc ├── .prettierrc ├── .editorconfig ├── .gitignore ├── .postcssrc.js ├── jest.config.js ├── vue.config.js ├── LICENSE ├── .eslintrc └── demo.html /.nvmrc: -------------------------------------------------------------------------------- 1 | v16.20.2 -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | lib/ 2 | tests/* -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | *.md 2 | *.json -------------------------------------------------------------------------------- /tests/unit/coverage/lcov.info: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/unit/coverage/coverage-final.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /tests/__mocks__/styleMock.js: -------------------------------------------------------------------------------- 1 | module.exports = {}; 2 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/palette.styl: -------------------------------------------------------------------------------- 1 | $accentColor = #667EEA -------------------------------------------------------------------------------- /docs/.vuepress/theme/noopModule.js: -------------------------------------------------------------------------------- 1 | export default {} 2 | -------------------------------------------------------------------------------- /tests/unit/setup.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | 3 | Vue.config.productionTip = false; 4 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/styles/toc.styl: -------------------------------------------------------------------------------- 1 | .table-of-contents 2 | .badge 3 | vertical-align middle 4 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | Visit the [docs site](https://v2.vcalendar.io/changelog/v2.0.html) for all changelog info. 2 | -------------------------------------------------------------------------------- /docs/github/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'GitHub Issues' 3 | layout: TestLayout 4 | --- 5 | 6 | -------------------------------------------------------------------------------- /docs/showcase/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Showcase 3 | sidebarDepth: 2 4 | --- 5 | 6 | -------------------------------------------------------------------------------- /tests/unit/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "jest": true 4 | }, 5 | "globals": { 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /docs/.vuepress/public/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathanreyes/v-calendar/HEAD/docs/.vuepress/public/hero.png -------------------------------------------------------------------------------- /src/utils/defaults/screens.json: -------------------------------------------------------------------------------- 1 | { 2 | "sm": "640px", 3 | "md": "768px", 4 | "lg": "1024px", 5 | "xl": "1280px" 6 | } -------------------------------------------------------------------------------- /docs/.vuepress/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathanreyes/v-calendar/HEAD/docs/.vuepress/public/favicon.png -------------------------------------------------------------------------------- /docs/.vuepress/public/profile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathanreyes/v-calendar/HEAD/docs/.vuepress/public/profile.jpg -------------------------------------------------------------------------------- /docs/sponsors.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Sponsors' 3 | sidebarDepth: 2 4 | --- 5 | 6 | ### Our Sponsors 7 | 8 | 9 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@vue/cli-plugin-babel/preset"], 3 | "plugins": ["@babel/plugin-transform-arrow-functions"] 4 | } 5 | -------------------------------------------------------------------------------- /docs/.vuepress/images/dark-woods.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathanreyes/v-calendar/HEAD/docs/.vuepress/images/dark-woods.jpg -------------------------------------------------------------------------------- /docs/.vuepress/styles/index.styl: -------------------------------------------------------------------------------- 1 | .page 2 | padding-top: 3.6rem 3 | 4 | .theme-container.quick-start 5 | h1 6 | font-size: 4rem -------------------------------------------------------------------------------- /src/utils/defaults/touch.json: -------------------------------------------------------------------------------- 1 | { 2 | "maxSwipeTime": 300, 3 | "minHorizontalSwipeDistance": 60, 4 | "maxVerticalSwipeDistance": 80 5 | } -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/layouts/expanded.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/layouts/rows.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /tests/unit/util/wait.js: -------------------------------------------------------------------------------- 1 | module.exports = function wait(milliseconds) { 2 | return new Promise(resolve => setTimeout(resolve, milliseconds)); 3 | }; 4 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": false, 3 | "singleQuote": true, 4 | "trailingComma": "all", 5 | "arrowParens": "avoid", 6 | "printWidth": 80 7 | } 8 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/readme/cal-basic.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/layouts/trim-weeks.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /tests/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": false, 3 | "singleQuote": true, 4 | "trailingComma": "all", 5 | "arrowParens": "avoid", 6 | "printWidth": 100 7 | } -------------------------------------------------------------------------------- /tests/unit/coverage/lcov-report/sort-arrow-sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathanreyes/v-calendar/HEAD/tests/unit/coverage/lcov-report/sort-arrow-sprite.png -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/layouts/responsive.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /docs/.vuepress/components/sponsors/list.json: -------------------------------------------------------------------------------- 1 | [{ 2 | "twitterHandle": "@jackmcdade", 3 | "githubUsername": "jackmcdade", 4 | "githubUserId": "44739", 5 | "since": "Nov 2019" 6 | }] -------------------------------------------------------------------------------- /docs/showcase/github.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: GitHub Issues 3 | sidebarDepth: 2 4 | pageClass: docs-page 5 | --- 6 | 7 | ## Issue #140 8 | 9 | 10 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/280/events.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 1, 4 | "title": "Example Event 1", 5 | "startDate": "2019-04-22T00:00:00", 6 | "endDate": "2019-04-30T00:00:00" 7 | } 8 | ] -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | export { default as Calendar } from './Calendar'; 2 | export { default as CalendarNav } from './CalendarNav'; 3 | export { default as DatePicker } from './DatePicker'; 4 | export { default as Popover } from './Popover'; 5 | -------------------------------------------------------------------------------- /docs/.vuepress/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | variants: { 3 | extend: { 4 | textDecoration: ['hover'], 5 | }, 6 | }, 7 | theme: { 8 | extend: { 9 | width: { 10 | 72: '18rem', 11 | }, 12 | }, 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /docs/.vuepress/components/tests/theme.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 16 | 17 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/styles/wrapper.styl: -------------------------------------------------------------------------------- 1 | $wrapper 2 | max-width $contentWidth 3 | margin 0 auto 4 | // padding 2rem 2.5rem 5 | padding 2rem 1rem 6 | @media (max-width: $MQNarrow) 7 | padding 1rem 0rem 8 | @media (max-width: $MQMobileNarrow) 9 | padding 1rem 0rem 10 | 11 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/346.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/layouts/title-position.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 14 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/readme/dp-inline.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/datepicker/intro-inline.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/datepicker/simple-date.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /docs/.vuepress/components/tests/disabled.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/_PickerTemplate.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /docs/.vuepress/components/tests/min-date.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | -------------------------------------------------------------------------------- /src/utils/mixins/index.js: -------------------------------------------------------------------------------- 1 | import { childMixin as child } from './child'; 2 | import { rootMixin as root } from './root'; 3 | import { safeScopedSlotMixin as safeScopedSlot } from './safeScopedSlot'; 4 | 5 | export const childMixin = child; 6 | export const rootMixin = root; 7 | export const safeScopedSlotMixin = safeScopedSlot; 8 | -------------------------------------------------------------------------------- /src/utils/mixins/safeScopedSlot.js: -------------------------------------------------------------------------------- 1 | import { isFunction } from '../_'; 2 | 3 | export const safeScopedSlotMixin = { 4 | methods: { 5 | safeScopedSlot(name, args, def = null) { 6 | return isFunction(this.$scopedSlots[name]) 7 | ? this.$scopedSlots[name](args) 8 | : def; 9 | }, 10 | }, 11 | }; 12 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/styles/palette.styl: -------------------------------------------------------------------------------- 1 | $contentClass = content__default 2 | 3 | // colors 4 | $textColor = #2c3e50 5 | $borderColor = #eaecef 6 | $codeBgColor = #2D3748 7 | $codeInlineBgColor = #EDF2F7 8 | $arrowBgColor = #ccc 9 | $badgeTipColor = #42b983 10 | $badgeWarningColor = darken(#ffe564, 35%) 11 | $badgeErrorColor = #DA5961 -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/customize/header-title.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | /lib 5 | docs/.vuepress/dist 6 | 7 | # local env files 8 | .env.local 9 | .env.*.local 10 | 11 | # Log files 12 | npm-debug.log* 13 | yarn-debug.log* 14 | yarn-error.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | -------------------------------------------------------------------------------- /src/utils/setup.js: -------------------------------------------------------------------------------- 1 | import { setupDefaults } from './defaults'; 2 | import { setupScreens } from './screens'; 3 | 4 | export default opts => { 5 | // Register plugin defaults 6 | const defaults = setupDefaults(opts); 7 | // Install support for responsive screens 8 | setupScreens(defaults.screens, true); 9 | return defaults; 10 | }; 11 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/304.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/444.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/768.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | 16 | -------------------------------------------------------------------------------- /docs/tests/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Tests' 3 | layout: TestLayout 4 | --- 5 | 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 | 18 |
-------------------------------------------------------------------------------- /src/utils/index.js: -------------------------------------------------------------------------------- 1 | export { default as Locale } from './locale'; 2 | export { default as DateInfo } from './dateInfo'; 3 | export { default as Attribute } from './attribute'; 4 | export { default as AttributeStore } from './attributeStore'; 5 | export { default as setupCalendar } from './setup'; 6 | export * from './helpers'; 7 | export * from './touch'; 8 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/datepicker/minute-increment.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | const postcssPresetEnv = require('postcss-preset-env'); 2 | // const purgecss = require('@fullhuman/postcss-purgecss'); 3 | 4 | module.exports = { 5 | plugins: [ 6 | postcssPresetEnv({ 7 | stage: 2, 8 | features: { 9 | 'nesting-rules': true, 10 | }, 11 | }), 12 | require('autoprefixer'), 13 | ], 14 | }; 15 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/344.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 16 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/datepicker/valid-hours.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /docs/.vuepress/components/homepage/multi-calendar.vue: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/330.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 18 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/datepicker/simple-range.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 19 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/889.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/readme/dp-available-dates.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 19 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | moduleFileExtensions: ['js', 'jsx', 'json', 'vue'], 3 | transform: { 4 | '^.+\\.vue$': 'vue-jest', 5 | '^.+\\.jsx?$': 'babel-jest', 6 | }, 7 | moduleNameMapper: { 8 | '^@/(.*)$': '/src/$1', 9 | '\\.(css)$': '/tests/__mocks__/styleMock.js', 10 | }, 11 | snapshotSerializers: ['jest-serializer-vue'], 12 | }; 13 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/readme/dp-disabled-dates.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 20 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/attributes/dot-style.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/datepicker/min-max.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 20 | -------------------------------------------------------------------------------- /docs/flatlogic.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Flatlogic' 3 | sidebarDepth: 2 4 | --- 5 | 6 | ### Flatlogic Templates 7 | 8 | Thanks to Flatlogic for [mentioning us](https://flatlogic.com/blog/best-javascript-date-picker-libraries/) as one of the top Vue.js date pickers. 9 | 10 | Support the development of V-Calendar by using one of the template links below to get a jump-start with your application. 11 | 12 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/datepicker/select-attribute.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 19 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/attributes/dot.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/450.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/attributes/highlight.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/419.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/attributes/highlight-color.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/datepicker/range.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 19 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/readme/cal-date-range-no-start-end.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/808.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 17 | -------------------------------------------------------------------------------- /tests/unit/coverage/clover.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/488.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/543.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/datepicker/single-popover.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 21 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/readme/cal-date-range-no-start.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/254.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 20 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/565.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/datepicker/disable-dates.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 22 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/776.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 21 | -------------------------------------------------------------------------------- /docs/custom-defaults.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Custom Defaults' 3 | sidebarDepth: 1 4 | --- 5 | 6 | ### Custom Defaults 7 | 8 | Custom defaults can be provided on initialization. Note that almost all of these defaults can be overridden by props on `v-calendar` or `v-date-picker` components. 9 | 10 | ```js 11 | Vue.use(VCalendar, { 12 | componentPrefix: 'vc', // Now use vc-calendar and vc-date-picker 13 | ... 14 | }) 15 | ``` 16 | 17 | [Click here to see all defaults.](../api/v2.0/defaults.md) -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/layouts/weeknumbers.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 22 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/318.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/778.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 21 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/components/Page.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 18 | 19 | 22 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/524.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | -------------------------------------------------------------------------------- /src/utils/defaults/masks.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "MMMM YYYY", 3 | "weekdays": "W", 4 | "navMonths": "MMM", 5 | "input": ["L", "YYYY-MM-DD", "YYYY/MM/DD"], 6 | "inputDateTime": ["L h:mm A", "YYYY-MM-DD h:mm A", "YYYY/MM/DD h:mm A"], 7 | "inputDateTime24hr": ["L HH:mm", "YYYY-MM-DD HH:mm", "YYYY/MM/DD HH:mm"], 8 | "inputTime": ["h:mm A"], 9 | "inputTime24hr": ["HH:mm"], 10 | "dayPopover": "WWW, MMM D, YYYY", 11 | "data": ["L", "YYYY-MM-DD", "YYYY/MM/DD"], 12 | "iso": "YYYY-MM-DDTHH:mm:ss.SSSZ" 13 | } -------------------------------------------------------------------------------- /docs/.vuepress/components/github/457.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 23 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/272.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 24 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/431.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/688.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 22 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer') 3 | // .BundleAnalyzerPlugin; 4 | 5 | module.exports = { 6 | css: { 7 | extract: false, 8 | }, 9 | outputDir: 'lib', 10 | configureWebpack: { 11 | // Uncomment to run analyzer - it freezes builds r/n for some reason 12 | // plugins: [new BundleAnalyzerPlugin()], 13 | resolve: { 14 | alias: { 15 | '@': path.resolve('src'), 16 | }, 17 | }, 18 | }, 19 | lintOnSave: undefined, 20 | }; 21 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/693.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/777.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 22 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/format-parse-dates/input.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 24 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/datepicker/intro-popover.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 24 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/987.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 22 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/datepicker/is-required.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 24 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/attributes/as-functions.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 26 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/datepicker/input-format-parse.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 24 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/readme/dp-min-max-dates.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 27 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/datepicker/disable-update.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 24 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/datepicker/input-debounce.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 24 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/layouts/404.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 25 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/326.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 28 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/712.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 22 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/730.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 29 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/datepicker/24hr.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 24 | -------------------------------------------------------------------------------- /docs/changelog/v0.2.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: v0.2 3 | --- 4 | 5 | ## v0.2.0 6 | 7 | * Simplify header title layout 8 | * Add navigation panel popover with indicators 9 | * Add passive event modifiers for touch events 10 | * Add 'go to today' with header title click 11 | * Add 'hover' as visibility option for popovers 12 | * Redesign popovers to display caret arrows 13 | * Move DateInfo class into separate file 14 | * Fix date logic for range intersections 15 | 16 | ## v0.2.1 17 | 18 | * Fix layout bug with navigation panel in Firefox 19 | 20 | ## v0.2.2 21 | 22 | * Fix bug where is-expanded prop not working for calendar component -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/layouts/responsive-expanded.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 27 | -------------------------------------------------------------------------------- /docs/colors-dark-mode.md: -------------------------------------------------------------------------------- 1 | ### Colors & Dark Mode 2 | 3 | You can apply a color or dark mode by using the `color` and `is-dark` props. 4 | 5 | :::tip 6 | The following colors are provided out of the box: **gray**, **red**, **orange**, **yellow**, **green**, **teal**, **blue**, **indigo**, **purple**, **pink**. 7 | ::: 8 | 9 | 10 | 11 |
12 | 18 |
19 | 20 | ```html 21 | 27 | ``` -------------------------------------------------------------------------------- /docs/.vuepress/components/github/438.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 28 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/customize/test.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 23 | 24 | 30 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/readme/cal-date-patterns-1.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/1052.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 26 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/datepicker/input-mask.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 27 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/attributes/highlight-range.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 25 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/469.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/readme/cal-date-ranges.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/140.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 24 | 25 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/302.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 24 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/379.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 30 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/readme/cal-date-patterns.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/308.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 31 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/682.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 29 | -------------------------------------------------------------------------------- /docs/.vuepress/components/homepage/banner.vue: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/datepicker/input-with-time.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/570.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 27 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/readme/cal-content-style.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/styles/arrow.styl: -------------------------------------------------------------------------------- 1 | @require './config' 2 | 3 | .arrow 4 | display inline-block 5 | width 0 6 | height 0 7 | &.up 8 | border-left 4px solid transparent 9 | border-right 4px solid transparent 10 | border-bottom 6px solid $arrowBgColor 11 | &.down 12 | border-left 4px solid transparent 13 | border-right 4px solid transparent 14 | border-top 6px solid $arrowBgColor 15 | &.right 16 | border-top 4px solid transparent 17 | border-bottom 4px solid transparent 18 | border-left 6px solid $arrowBgColor 19 | &.left 20 | border-top 4px solid transparent 21 | border-bottom 4px solid transparent 22 | border-right 6px solid $arrowBgColor 23 | -------------------------------------------------------------------------------- /tests/unit/coverage/lcov-report/prettify.css: -------------------------------------------------------------------------------- 1 | .pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee} 2 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/984.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 26 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/readme/cal-footer.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/323.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 30 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/695.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 24 | 25 | -------------------------------------------------------------------------------- /src/utils/mixins/child.js: -------------------------------------------------------------------------------- 1 | import { defaultsMixin } from '../defaults'; 2 | 3 | export const childMixin = { 4 | inject: ['sharedState'], 5 | mixins: [defaultsMixin], 6 | computed: { 7 | masks() { 8 | return this.sharedState.masks; 9 | }, 10 | theme() { 11 | return this.sharedState.theme; 12 | }, 13 | locale() { 14 | return this.sharedState.locale; 15 | }, 16 | dayPopoverId() { 17 | return this.sharedState.dayPopoverId; 18 | }, 19 | }, 20 | methods: { 21 | format(date, mask) { 22 | return this.locale.format(date, mask); 23 | }, 24 | pageForDate(date) { 25 | return this.locale.getDateParts(this.locale.normalizeDate(date)); 26 | }, 27 | }, 28 | }; 29 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/088.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/632.vue: -------------------------------------------------------------------------------- 1 | 11 | 29 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/attributes/multiple-dates.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 30 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/components/DropdownTransition.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 28 | 29 | 34 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/761.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 32 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/readme/dp-input.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/370.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 33 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/1034.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 32 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/255.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 34 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/datepicker/disable-attribute.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 32 | -------------------------------------------------------------------------------- /docs/.vuepress/enhanceApp.js: -------------------------------------------------------------------------------- 1 | import VCalendar from '../../src/lib'; 2 | import './styles/tailwind.css'; 3 | import pageComponents from '@internal/page-components'; 4 | 5 | export default ({ Vue }) => { 6 | for (const [name, component] of Object.entries(pageComponents)) { 7 | Vue.component(name, component); 8 | } 9 | Vue.use(VCalendar, { 10 | locales: { 11 | 'pt-PT': { 12 | firstDayOfWeek: 1, 13 | masks: { 14 | L: 'YYYY-MM-DD', // Default for formatting/parsing dates 15 | }, 16 | }, 17 | // Added for GitHub Issue #330 18 | hu: { 19 | firstDayOfWeek: 2, 20 | masks: { 21 | L: 'YYYY.MM.DD', 22 | title: 'YYYY MMMM', // <- this doesn't work 23 | }, 24 | }, 25 | }, 26 | }); 27 | }; 28 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/721.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 29 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/746.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 31 | -------------------------------------------------------------------------------- /docs/.vuepress/components/showcase/class-highlight.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 27 | 28 | 39 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/styles/custom-blocks.styl: -------------------------------------------------------------------------------- 1 | .custom-block 2 | .custom-block-title 3 | font-weight 600 4 | margin: 0 5 | &.tip, &.warning, &.danger 6 | padding 1rem 1.5rem 7 | border-left-width .5rem 8 | border-left-style solid 9 | margin 1rem 0 10 | &.tip 11 | background-color #f3f5f7 12 | border-color #42b983 13 | &.warning 14 | background-color rgba(255,229,100,.3) 15 | border-color darken(#ffe564, 35%) 16 | color darken(#ffe564, 70%) 17 | .custom-block-title 18 | color darken(#ffe564, 50%) 19 | a 20 | color $textColor 21 | &.danger 22 | background-color #ffe6e6 23 | border-color darken(red, 20%) 24 | color darken(red, 70%) 25 | .custom-block-title 26 | color darken(red, 40%) 27 | a 28 | color $textColor 29 | 30 | 31 | -------------------------------------------------------------------------------- /docs/changelog/v0.4.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: v0.4 3 | --- 4 | 5 | ## v0.4.0 6 | 7 | * Fix weekday labels not always having same exact width 8 | * Add support for complex attribute dates. Closes #7 and #12. 9 | * Add support for attribute `excludeDates`, date picker `availableDates`. Closes #19. 10 | * Add support for endless date ranges using null for start/end dates. Closes #20. 11 | * Add support for attaching custom data to attributes via `customData` property. Closes #21. 12 | * Add Turkish locale. 13 | 14 | ## v0.4.1 15 | 16 | * Use local nextTick reference, deleting Vue scope dependency. 17 | * Fix null attribute bug in date picker. 18 | 19 | ## v0.4.2 20 | 21 | * Convert event names to all lowercase to support in-DOM templates. Closes #26. 22 | 23 | ## v0.4.3 24 | 25 | * Fix bug for duplicated weekday label keys. Closes #28. -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/datepicker/single.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 30 | 31 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/703.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 28 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/311.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 34 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/762.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 34 | -------------------------------------------------------------------------------- /docs/api/v1.0/README.md: -------------------------------------------------------------------------------- 1 | # Overview 2 | 3 | :::warning 4 | This page is currently being updated. 5 | ::: 6 | 7 | [Defaults](./defaults.md) 8 | 9 | [Calendar](./calendar.md) 10 | * [Props](./calendar.md#props) 11 | * [Events](./calendar.md#events) 12 | * [Methods](./calendar.md#methods) 13 | * [Scoped Slots](./calendar.md#scoped-slots) 14 | 15 | [Page Object](./page-object.md) 16 | 17 | [Day Object](./day-object.md) 18 | 19 | [Attribute](./attribute.md) 20 | * [Highlight](./attribute.mds#highlight) 21 | * [Dot](./attribute.md#dot) 22 | * [Bar](./attribute.md#bar) 23 | * [Popover](./attribute.md#popover) 24 | * [Content](./attribute.md#content) 25 | 26 | [Date Picker](./datepicker.md) 27 | * [Props](./datepicker.md#props) 28 | * [Events](./datepicker.md#events) 29 | * [Slots](./datepicker.md#slots) 30 | 31 | [Date Patterns](./date-patterns.html) -------------------------------------------------------------------------------- /docs/api/v2.0/README.md: -------------------------------------------------------------------------------- 1 | # Overview 2 | 3 | :::warning 4 | This page is currently being updated. 5 | ::: 6 | 7 | [Defaults](./defaults.md) 8 | 9 | [Calendar](./calendar.md) 10 | * [Props](./calendar.md#props) 11 | * [Events](./calendar.md#events) 12 | * [Methods](./calendar.md#methods) 13 | * [Scoped Slots](./calendar.md#scoped-slots) 14 | 15 | [Page Object](./page-object.md) 16 | 17 | [Day Object](./day-object.md) 18 | 19 | [Attribute](./attribute.md) 20 | * [Highlight](./attribute.mds#highlight) 21 | * [Dot](./attribute.md#dot) 22 | * [Bar](./attribute.md#bar) 23 | * [Popover](./attribute.md#popover) 24 | * [Content](./attribute.md#content) 25 | 26 | [Date Picker](./datepicker.md) 27 | * [Props](./datepicker.md#props) 28 | * [Events](./datepicker.md#events) 29 | * [Slots](./datepicker.md#slots) 30 | 31 | [Date Patterns](./date-patterns.html) -------------------------------------------------------------------------------- /docs/.vuepress/components/github/000.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 35 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/747.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 36 | -------------------------------------------------------------------------------- /docs/changelog/v0.3.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: v0.3 3 | --- 4 | 5 | ## v0.3.0 6 | 7 | * Add support for accepting various defaults when calling Vue.use(VCalendar, { ...defaults... }) 8 | * Set default calendar pages to best show date picker values 9 | * Fix issue where inline date picker would not respond to is-expanded. Fixes #8. 10 | * Dismiss popovers on navigation month select and date selection. Fixes #9. 11 | * Fix issue where popover content not properly layered. Fixes #10. 12 | * Add locale detection and support user-supplied locales for month/weekday labels. Fixes #11. 13 | 14 | ## v0.3.1 15 | 16 | * Fix bug with duplicate events being fired. Closes #15. 17 | * Fix application of styling for date pickers when not inline. Closes #17. 18 | 19 | ## v0.3.2 20 | 21 | * Fix styling bug introduced by v0.3.1. 22 | 23 | ## v0.3.3 24 | 25 | * Fix duplicate input event for inline date picker -------------------------------------------------------------------------------- /docs/.vuepress/components/github/290.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/769.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 33 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Introduction' 3 | heroImage: /hero.png 4 | actionText: Get Started → 5 | actionLink: /guide/ 6 | footer: MIT Licensed | Copyright © 2017-Present Nathan Reyes 7 | pageClass: 'homepage' 8 | --- 9 | 10 |
11 | 12 | Banner image 13 | 14 | # V-Calendar 15 | 16 | ### An elegant calendar and datepicker plugin for Vuejs. 17 | 18 | ```bash 19 | npm i v-calendar 20 | ``` 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | #### Popovers w/ Custom Slots 31 | 32 | 33 | 34 | 35 | 36 | [View example in GitHub](https://github.com/nathanreyes/v-calendar/blob/master/docs/.vuepress/components/homepage/custom-calendar.vue) 37 | 38 |
39 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/components/Sidebar.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 30 | -------------------------------------------------------------------------------- /docs/.vuepress/components/flatlogic/template.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 37 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/499.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 36 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/400.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/709.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 40 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/781.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 36 | -------------------------------------------------------------------------------- /tests/unit/jest.conf.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | rootDir: path.resolve(__dirname, '../../'), 5 | moduleFileExtensions: [ 6 | 'js', 7 | 'json', 8 | 'vue', 9 | ], 10 | moduleNameMapper: { 11 | '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '/__mocks__/fileMock.js', 12 | '\\.(sass)$': '/__mocks__/fileMock.js', 13 | '^@/(.*)$': '/src/$1', 14 | }, 15 | transform: { 16 | '^.+\\.js$': '/node_modules/babel-jest', 17 | '.*\\.(vue)$': '/node_modules/vue-jest', 18 | }, 19 | snapshotSerializers: ['/node_modules/jest-serializer-vue'], 20 | setupFiles: ['/test/unit/setup'], 21 | mapCoverage: true, 22 | coverageDirectory: '/test/unit/coverage', 23 | collectCoverageFrom: [ 24 | // 'src/**/*.{js,vue}', 25 | '!src/lib.js', 26 | '!**/node_modules/**', 27 | ], 28 | }; 29 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/179.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 40 | -------------------------------------------------------------------------------- /src/utils/buildMediaQuery.js: -------------------------------------------------------------------------------- 1 | import { isString, isArray, map, has, get } from './_'; 2 | 3 | // This function gratuitously borrowed from TailwindCSS 4 | // https://github.com/tailwindcss/tailwindcss/blob/master/src/util/buildMediaQuery.js 5 | export default function buildMediaQuery(screens) { 6 | // Default min width 7 | if (isString(screens)) { 8 | screens = { min: screens }; 9 | } 10 | // Wrap in array 11 | if (!isArray(screens)) { 12 | screens = [screens]; 13 | } 14 | return screens 15 | .map(screen => { 16 | if (has(screen, 'raw')) { 17 | return screen.raw; 18 | } 19 | return map(screen, (value, feature) => { 20 | feature = get( 21 | { 22 | min: 'min-width', 23 | max: 'max-width', 24 | }, 25 | feature, 26 | feature, 27 | ); 28 | return `(${feature}: ${value})`; 29 | }).join(' and '); 30 | }) 31 | .join(', '); 32 | } 33 | -------------------------------------------------------------------------------- /docs/.vuepress/components/examples/multiple-dates-legacy.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 43 | -------------------------------------------------------------------------------- /docs/.vuepress/components/showcase/dark-woods.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 45 | 46 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/324.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 32 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/global-components/Badge.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 45 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/692.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 39 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Nathan Reyes 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/attributes/highlight-custom.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 43 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/732.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 43 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/datepicker/model-number.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 37 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/datepicker/range-popover.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 44 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/967.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 42 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/customize/header-title-pos.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 41 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018-present, Yuxi (Evan) You 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 13 | all 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 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/attributes/bars.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 45 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/attributes/dots.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 45 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/datepicker/model-string.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 42 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/datepicker/time-adjust.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 39 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/components/SidebarButton.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 43 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/datepicker/time-adjust-range.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 41 | -------------------------------------------------------------------------------- /docs/.vuepress/components/homepage/datepicker.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 44 | -------------------------------------------------------------------------------- /docs/changelog/v0.1.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: v0.1 3 | --- 4 | 5 | ## v0.0.4 6 | 7 | * Fix lib subfolder not published 8 | * Add license declaration 9 | * Add CHANGELOG file 10 | 11 | ## v0.0.5 12 | 13 | * Add tap to dismiss popover 14 | * Add tint color (with blending) for easy date picker styling 15 | * Add support for custom title position (left, center, right) 16 | 17 | ## v0.0.6 18 | 19 | * Fix README 20 | 21 | ## v0.0.7 22 | 23 | * Add 'theme-styles' prop to calendar for theming 24 | * Remove a number of '...-style' replaced by theme-styles object 25 | * Renamed 'select-mode' prop to 'mode' for datepicker 26 | 27 | ## v0.0.8 28 | 29 | * Add support for installing via CDN 30 | * Add licensing and copyright to README 31 | * Fix vertically centering header title 32 | * Fix styling bug with date picker 33 | * Fix setup instructions 34 | 35 | ## v0.0.9 36 | 37 | * Add support for more flexible month/year navigation 38 | * Fix popover visibility bug 39 | * Fix styling bug in date example 40 | 41 | ## v0.1.0 42 | 43 | * Add navigation pickers in calendar headers 44 | 45 | ## v0.1.1 46 | 47 | * Add documentation for custom theming 48 | * Restructure docs component hierarchy 49 | * Remove lib files from git tracking 50 | * Fix layout bug in calendar pane 51 | * Fix event forwarding for date picker -------------------------------------------------------------------------------- /src/lib.js: -------------------------------------------------------------------------------- 1 | import * as components from './components'; 2 | import * as utils from './utils'; 3 | 4 | // Declare install function executed by Vue.use() 5 | function install(Vue, opts) { 6 | // Don't install more than once 7 | if (install.installed) return; 8 | install.installed = true; 9 | // Manually setup calendar with options 10 | const defaults = utils.setupCalendar(opts); 11 | // Register components 12 | Object.entries(components).forEach(([componentName, component]) => { 13 | Vue.component(`${defaults.componentPrefix}${componentName}`, component); 14 | }); 15 | } 16 | 17 | // Create module definition for Vue.use() 18 | const plugin = { 19 | install, 20 | ...components, 21 | ...utils, 22 | }; 23 | 24 | // Use automatically when global Vue instance detected 25 | let GlobalVue = null; 26 | if (typeof window !== 'undefined') { 27 | GlobalVue = window.Vue; 28 | } else if (typeof global !== 'undefined') { 29 | GlobalVue = global.Vue; 30 | } 31 | if (GlobalVue) { 32 | GlobalVue.use(plugin); 33 | } 34 | 35 | // Default export is library as a whole, registered via Vue.use() 36 | export default plugin; 37 | 38 | // Allow component use individually 39 | export * from './components'; 40 | 41 | // Allow util use individually 42 | export * from './utils'; 43 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/775.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 43 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/components/NavLink.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 58 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/971.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 50 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/datepicker/range-input.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 47 | -------------------------------------------------------------------------------- /docs/.vuepress/components/tests/range.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 47 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/attributes/popover-labels.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 50 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/676.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 57 | -------------------------------------------------------------------------------- /docs/.vuepress/components/tests/inline-range.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 43 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/427.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | -------------------------------------------------------------------------------- /docs/.vuepress/components/examples/button-dropdown.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 40 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/index.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | // Theme API. 4 | module.exports = (options, ctx) => { 5 | const { themeConfig, siteConfig } = ctx 6 | 7 | // resolve algolia 8 | const isAlgoliaSearch = ( 9 | themeConfig.algolia 10 | || Object 11 | .keys(siteConfig.locales && themeConfig.locales || {}) 12 | .some(base => themeConfig.locales[base].algolia) 13 | ) 14 | 15 | const enableSmoothScroll = themeConfig.smoothScroll === true 16 | 17 | return { 18 | alias () { 19 | return { 20 | '@AlgoliaSearchBox': isAlgoliaSearch 21 | ? path.resolve(__dirname, 'components/AlgoliaSearchBox.vue') 22 | : path.resolve(__dirname, 'noopModule.js') 23 | } 24 | }, 25 | 26 | plugins: [ 27 | ['@vuepress/active-header-links', options.activeHeaderLinks], 28 | '@vuepress/search', 29 | '@vuepress/plugin-nprogress', 30 | ['container', { 31 | type: 'tip', 32 | defaultTitle: { 33 | '/': 'TIP', 34 | '/zh/': '提示' 35 | } 36 | }], 37 | ['container', { 38 | type: 'warning', 39 | defaultTitle: { 40 | '/': 'WARNING', 41 | '/zh/': '注意' 42 | } 43 | }], 44 | ['container', { 45 | type: 'danger', 46 | defaultTitle: { 47 | '/': 'WARNING', 48 | '/zh/': '警告' 49 | } 50 | }], 51 | ['smooth-scroll', enableSmoothScroll] 52 | ] 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "extends": ["plugin:vue/essential", "@vue/airbnb"], 4 | "parser": "vue-eslint-parser", 5 | "parserOptions": { 6 | "parser": "babel-eslint", 7 | "sourceType": "module", 8 | "ecmaVersion": 2018 9 | }, 10 | "rules": { 11 | "import/extensions": [ 12 | "error", 13 | "always", 14 | { 15 | "js": "never", 16 | "vue": "never" 17 | } 18 | ], 19 | "no-param-reassign": "off", 20 | "no-underscore-dangle": "off", 21 | "max-len": "off", 22 | "no-plusplus": "off", 23 | "linebreak-style": "off", 24 | "import/no-duplicates": "off", 25 | "import/no-webpack-loader-syntax": "off", 26 | "import/first": "off", 27 | "import/prefer-default-export": "off", 28 | "no-return-assign": "off", 29 | "arrow-parens": "off", 30 | "curly": "off", 31 | "no-mixed-operators": "off", 32 | "indent": "off", 33 | "no-confusing-arrow": "off", 34 | "eol-last": "off", 35 | "object-curly-newline": "off", 36 | "prefer-destructuring": "off", 37 | "function-paren-newline": "off", 38 | "no-restricted-globals": "off", 39 | "vue/html-self-closing": "error", 40 | "implicit-arrow-linebreak": "off", 41 | "operator-linebreak": "off", 42 | "class-methods-use-this": "off", 43 | "no-unused-vars": [ 44 | "error", 45 | { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" } 46 | ], 47 | "default-case": "off", 48 | "comma-dangle": "off" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /docs/quick-start.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Quick Start' 3 | sidebarDepth: 1 4 | pageClass: quick-start 5 | --- 6 | 7 | 8 | 9 | # V-Calendar 10 | 11 | V-Calendar is a modern and flexible plugin for displaying simple, attributed calendars in Vue.js. It uses attributes to decorate the calendar with various visual indicators including highlighted date regions, dots, bars, content classes and even popovers for simple tooltips or custom slot content. 12 | 13 | 14 | 15 | Any of these indicators can be displayed for single dates, date ranges and even complex date patterns like the following: 16 | * Every other Friday 17 | * 15th of every month 18 | * Last Friday of every other month. 19 | 20 | A date picker is included out of the box with single date, multiple date and date range selection modes. Also, because `v-date-picker` is simply a wrapper for `v-calendar`, it supports the same props, slots and custom custom theme support, 21 | 22 | And of course, V-Calendar is responsive and mobile friendly. 23 | 24 | #### Calendar 25 | 26 | `v-calendar` is the core component. By default, it has a neutral design that should blend nicely within any web application, with various layout configuration options: 27 | * Responsive multi-row and multi-column layouts 28 | * Slot support for custom header and day content 29 | * Semantic-inspired navigation popover 30 | * Navigation transitions (horizontal slide, vertical slide, fade) 31 | 32 | 33 | 34 | ```html 35 | 36 | ``` -------------------------------------------------------------------------------- /docs/.vuepress/components/github/312.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 53 | 54 | 55 | 60 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/styles/index.styl: -------------------------------------------------------------------------------- 1 | @require './code' 2 | @require './custom-blocks' 3 | @require './arrow' 4 | @require './wrapper' 5 | @require './toc' 6 | @require './palette.styl' 7 | 8 | .{$contentClass}:not(.custom) 9 | @extend $wrapper 10 | 11 | // a:hover 12 | // text-decoration underline 13 | 14 | p.demo 15 | padding 1rem 1.5rem 16 | border 1px solid #ddd 17 | border-radius 4px 18 | 19 | img 20 | max-width 100% 21 | 22 | .{$contentClass}.custom 23 | padding 0 24 | margin 0 25 | 26 | img 27 | max-width 100% 28 | 29 | p a code 30 | font-weight 400 31 | color $accentColor 32 | 33 | kbd 34 | background #eee 35 | border solid 0.15rem #ddd 36 | border-bottom solid 0.25rem #ddd 37 | border-radius 0.15rem 38 | padding 0 0.15em 39 | 40 | blockquote 41 | font-size 1rem 42 | color #999; 43 | border-left .2rem solid #dfe2e5 44 | margin 1rem 0 45 | padding .25rem 0 .25rem 1rem 46 | 47 | & > p 48 | margin 0 49 | 50 | ul, ol 51 | padding-left 1.2em 52 | 53 | strong 54 | font-weight 600 55 | 56 | a.header-anchor 57 | font-size 0.85em 58 | float left 59 | margin-left -0.87em 60 | padding-right 0.23em 61 | margin-top 0.125em 62 | opacity 0 63 | 64 | &:hover 65 | text-decoration none 66 | 67 | hr 68 | border 0 69 | border-top 1px solid $borderColor 70 | 71 | table 72 | border-collapse collapse 73 | margin 1rem 0 74 | display: block 75 | overflow-x: auto 76 | 77 | tr 78 | border-top 1px solid #dfe2e5 79 | 80 | &:nth-child(2n) 81 | background-color #f6f8fa 82 | 83 | th, td 84 | border 1px solid #dfe2e5 85 | padding .6em 1em 86 | -------------------------------------------------------------------------------- /src/utils/_.js: -------------------------------------------------------------------------------- 1 | // Type utils 2 | export { default as isBoolean } from 'lodash/isBoolean'; 3 | export { default as isNumber } from 'lodash/isNumber'; 4 | export { default as isString } from 'lodash/isString'; 5 | export { default as isArray } from 'lodash/isArrayLikeObject'; 6 | export { default as isFunction } from 'lodash/isFunction'; 7 | export { default as isUndefined } from 'lodash/isUndefined'; 8 | import _isDate from 'lodash/isDate'; 9 | 10 | // Number utils 11 | export { default as clamp } from 'lodash/clamp'; 12 | 13 | // Object utils 14 | export { default as get } from 'lodash/get'; 15 | export { default as set } from 'lodash/set'; 16 | export { default as mapValues } from 'lodash/mapValues'; 17 | export { default as toPairs } from 'lodash/toPairs'; 18 | export { default as defaults } from 'lodash/defaults'; 19 | export { default as defaultsDeep } from 'lodash/defaultsDeep'; 20 | export { default as pick } from 'lodash/pick'; 21 | export { default as omit } from 'lodash/omit'; 22 | import _has from 'lodash/has'; 23 | 24 | // Collection utils 25 | export { default as map } from 'lodash/map'; 26 | export { default as head } from 'lodash/head'; 27 | export { default as last } from 'lodash/last'; 28 | import _some from 'lodash/some'; 29 | 30 | // Type checkers 31 | export const getType = value => 32 | Object.prototype.toString.call(value).slice(8, -1); 33 | export const isDate = value => _isDate(value) && !isNaN(value.getTime()); 34 | export const isObject = value => getType(value) === 'Object'; 35 | // Object utils 36 | export const has = _has; 37 | export const hasAny = (obj, props) => _some(props, p => _has(obj, p)); 38 | // Collection utils 39 | export const some = _some; 40 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/786.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 57 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/components/CarbonAds.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 75 | -------------------------------------------------------------------------------- /docs/changelog/v0.7.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: v0.7 3 | --- 4 | 5 | ## v0.7.0 6 | 7 | ### Bug Fixes 8 | `v-calendar` 9 | * Fix animation bug when `weeks-transition` or `title-transition` is `"none"`. Closes #70. 10 | 11 | `v-date-picker` 12 | * Disabling dates on drag can invalidate current selected range. Closes #67. 13 | 14 | ### Improvements 15 | `v-calendar` 16 | * Uses Javascript's `Intl.DateTimeFormat` API to supply month and day names for to 35 languages with minimal bundle size. 17 | * Transitioned top level calendar component to render function for improved slot support. 18 | * Supports a new `formats` prop object where you can specify custom formats for title, weekdays and navigation months. 19 | * Deprecate `month-labels` and `weekday-labels` props in favor of using `formats` prop. 20 | * Improved handling of svg icons for smaller bundle size. 21 | 22 | `v-date-picker` 23 | * Transitioned all date picker components to render functions. This allows using all slots that `v-calendar` supports. Closes #49. 24 | * Supports a new `formats` prop object where you can specify custom formats for input element and date selection popovers. 25 | * Deprecate `dateFormatter` and `dateParser` props in favor of using `formats` prop. 26 | 27 | ## v0.7.1 28 | 29 | ### Bug Fixes 30 | * Fix setup crash when not manually specifying a locale 31 | 32 | ## v0.7.2 33 | 34 | ### Bug Fixes 35 | * Fix event collision when using render functions. Closes #82. 36 | * Fix date formatting bug in Safari. 37 | 38 | ## v0.7.3 39 | 40 | ### Bug Fixes 41 | * Fix scoped slot usage in `v-date-picker` render function. Closes #83. 42 | 43 | ## v0.7.4 44 | 45 | ### Bug Fixes 46 | * Redress issue introduced by v0.7.3. 47 | 48 | ## v0.7.5 49 | 50 | ### Bug Fixes 51 | * Remove `console.log` statement. Closes #85. -------------------------------------------------------------------------------- /docs/.vuepress/components/github/094.vue: -------------------------------------------------------------------------------- 1 | 51 | 52 | 64 | -------------------------------------------------------------------------------- /docs/api/v1.0/date-patterns.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Date Patterns 3 | sidebarDepth: 2 4 | pageClass: docs-page 5 | --- 6 | 7 | ## Date Patterns 8 | 9 | ### `days` 10 | 11 | **Type:** Number, Array 12 | 13 | **Description:** Day number from the start or end of the month. 14 | 15 | **Range:** 1 to 31, -1 to -31 16 | 17 | ### `weekdays` 18 | 19 | **Type:** Number, Array 20 | 21 | **Description:** Day of the week. 22 | 23 | **Range:** 1: Sun to 7: Sat 24 | 25 | ### `ordinalWeekdays` 26 | 27 | **Type:** Object (key: Number / value: Number, Array) 28 | 29 | **Description:** Weekday ordinal position from the start or end of the month. 30 | 31 | **Range:** 32 | * key: 1 to 6, -1 to -6 33 | * value: 1: Sun to 7: Sat 34 | 35 | ### `weeks` 36 | 37 | **Type:** Number, Array 38 | 39 | **Description:** Week number from the start or end of the month. 40 | 41 | **Range:** 1 to 6, -1 to -6 42 | 43 | ### `months` 44 | 45 | **Type:** Number, Array 46 | 47 | **Description:** Months of the year. 48 | 49 | **Range:** 1 to 12 50 | 51 | ### `years` 52 | 53 | **Type:** Number, Array 54 | 55 | **Description:** Year numbers. 56 | 57 | **Range:** 4-digit integer 58 | 59 | ### `dailyInterval` 60 | 61 | **Type:** Number 62 | 63 | **Description:** Interval number of days from the start date (or today when no start date provided). 64 | 65 | **Range:** n > 0 66 | 67 | ### `weeklyInterval` 68 | 69 | **Type:** Number 70 | 71 | **Description:** Interval number of weeks from the start date (or today). 72 | 73 | **Range:** n > 0 74 | 75 | ### `monthlyInterval` 76 | 77 | **Type:** Number 78 | 79 | **Description:** Interval number of months from the start date (or today). 80 | 81 | **Range:** n > 0 82 | 83 | ### `yearlyInterval` 84 | 85 | **Type:** Number 86 | 87 | **Description:** Interval number of years from the start date (or today). 88 | 89 | **Range:** n > 0 90 | -------------------------------------------------------------------------------- /docs/api/v2.0/date-patterns.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Date Patterns 3 | sidebarDepth: 2 4 | pageClass: docs-page 5 | --- 6 | 7 | ## Date Patterns 8 | 9 | ### `days` 10 | 11 | **Type:** Number, Array 12 | 13 | **Description:** Day number from the start or end of the month. 14 | 15 | **Range:** 1 to 31, -1 to -31 16 | 17 | ### `weekdays` 18 | 19 | **Type:** Number, Array 20 | 21 | **Description:** Day of the week. 22 | 23 | **Range:** 1: Sun to 7: Sat 24 | 25 | ### `ordinalWeekdays` 26 | 27 | **Type:** Object (key: Number / value: Number, Array) 28 | 29 | **Description:** Weekday ordinal position from the start or end of the month. 30 | 31 | **Range:** 32 | * key: 1 to 6, -1 to -6 33 | * value: 1: Sun to 7: Sat 34 | 35 | ### `weeks` 36 | 37 | **Type:** Number, Array 38 | 39 | **Description:** Week number from the start or end of the month. 40 | 41 | **Range:** 1 to 6, -1 to -6 42 | 43 | ### `months` 44 | 45 | **Type:** Number, Array 46 | 47 | **Description:** Months of the year. 48 | 49 | **Range:** 1 to 12 50 | 51 | ### `years` 52 | 53 | **Type:** Number, Array 54 | 55 | **Description:** Year numbers. 56 | 57 | **Range:** 4-digit integer 58 | 59 | ### `dailyInterval` 60 | 61 | **Type:** Number 62 | 63 | **Description:** Interval number of days from the start date (or today when no start date provided). 64 | 65 | **Range:** n > 0 66 | 67 | ### `weeklyInterval` 68 | 69 | **Type:** Number 70 | 71 | **Description:** Interval number of weeks from the start date (or today). 72 | 73 | **Range:** n > 0 74 | 75 | ### `monthlyInterval` 76 | 77 | **Type:** Number 78 | 79 | **Description:** Interval number of months from the start date (or today). 80 | 81 | **Range:** n > 0 82 | 83 | ### `yearlyInterval` 84 | 85 | **Type:** Number 86 | 87 | **Description:** Interval number of years from the start date (or today). 88 | 89 | **Range:** n > 0 90 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/readme/dp-custom-slot.vue: -------------------------------------------------------------------------------- 1 | 42 | 43 | 58 | -------------------------------------------------------------------------------- /src/utils/touch.js: -------------------------------------------------------------------------------- 1 | import { on, off } from './helpers'; 2 | import { isFunction } from './_'; 3 | 4 | export const addHorizontalSwipeHandler = ( 5 | element, 6 | handler, 7 | { maxSwipeTime, minHorizontalSwipeDistance, maxVerticalSwipeDistance }, 8 | ) => { 9 | if (!element || !element.addEventListener || !isFunction(handler)) { 10 | return null; 11 | } 12 | // State variables 13 | let startX = 0; 14 | let startY = 0; 15 | let startTime = null; 16 | let isSwiping = false; 17 | // Touch start handler 18 | function touchStart(e) { 19 | const t = e.changedTouches[0]; 20 | startX = t.screenX; 21 | startY = t.screenY; 22 | startTime = new Date().getTime(); 23 | isSwiping = true; 24 | } 25 | // Touch end handler 26 | function touchEnd(e) { 27 | if (!isSwiping) return; 28 | isSwiping = false; 29 | const t = e.changedTouches[0]; 30 | const deltaX = t.screenX - startX; 31 | const deltaY = t.screenY - startY; 32 | const deltaTime = new Date().getTime() - startTime; 33 | if (deltaTime < maxSwipeTime) { 34 | if ( 35 | Math.abs(deltaX) >= minHorizontalSwipeDistance && 36 | Math.abs(deltaY) <= maxVerticalSwipeDistance 37 | ) { 38 | const arg = { toLeft: false, toRight: false }; 39 | if (deltaX < 0) { 40 | // Swipe to the left 41 | arg.toLeft = true; 42 | } else { 43 | // Swipe to the right 44 | arg.toRight = true; 45 | } 46 | handler(arg); 47 | } 48 | } 49 | } 50 | // Add event handlers 51 | on(element, 'touchstart', touchStart, { passive: true }); 52 | // on(element, 'touchmove', touchmove); 53 | on(element, 'touchend', touchEnd, { passive: true }); 54 | // Return function that removes event handlers 55 | return () => { 56 | off(element, 'touchstart', touchStart); 57 | // off(element, 'touchmove', touchmove); 58 | off(element, 'touchend', touchEnd); 59 | }; 60 | }; 61 | -------------------------------------------------------------------------------- /docs/.vuepress/components/homepage/dark-mode.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 69 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/tailwind.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | 3 | @tailwind components; 4 | 5 | .distributed { 6 | @apply my-8 flex justify-around items-start; 7 | } 8 | 9 | .example, 10 | .example-home { 11 | @apply -mx-4 my-4 p-8 flex flex-col items-center justify-center bg-gray-100 border-t border-b; 12 | &.is-dark { 13 | @apply bg-gray-800; 14 | } 15 | } 16 | 17 | input[type='text'] { 18 | @apply w-full shadow appearance-none border rounded py-2 px-3 text-gray-700; 19 | } 20 | 21 | .homepage .home { 22 | max-width: initial; 23 | padding: 3.6rem 0 2rem 0; 24 | } 25 | 26 | .site-name { 27 | @apply text-indigo-700 !important; 28 | } 29 | 30 | .site-name:hover { 31 | @apply text-indigo-500 !important; 32 | } 33 | 34 | .homepage .hero { 35 | @apply px-4; 36 | } 37 | .homepage .hero img { 38 | max-height: 190px !important; 39 | } 40 | 41 | .homepage .content { 42 | & div[class*='language-'] { 43 | @apply max-w-md mx-auto; 44 | } 45 | } 46 | 47 | .homepage .hero .action-button { 48 | @apply px-6 py-2 !important; 49 | } 50 | 51 | .section { 52 | @apply my-10; 53 | } 54 | 55 | h1, 56 | .h1 { 57 | @apply text-3xl text-gray-800 p-0 mt-0 mb-4 !important; 58 | } 59 | 60 | h2, 61 | .h2 { 62 | @apply text-2xl text-gray-800 border-none mb-4; 63 | } 64 | 65 | h3, 66 | .h3 { 67 | @apply text-lg text-gray-700 font-medium tracking-wide mb-3; 68 | } 69 | 70 | h4, 71 | .h4 { 72 | @apply text-gray-700 font-semibold tracking-wide p-0 mt-3 mb-2; 73 | } 74 | 75 | h1, 76 | h2, 77 | h3, 78 | h4 { 79 | padding-top: 64px; 80 | margin-top: -64px; 81 | } 82 | 83 | a { 84 | @apply text-indigo-700 no-underline; 85 | &:hover { 86 | @apply text-indigo-600; 87 | } 88 | } 89 | 90 | ul { 91 | @apply list-disc; 92 | } 93 | 94 | /* ul li { 95 | @apply space-y-4; 96 | } */ 97 | 98 | ol { 99 | @apply list-decimal; 100 | } 101 | 102 | p { 103 | @apply my-2 leading-relaxed; 104 | } 105 | 106 | * { 107 | border-radius: 0; 108 | } 109 | 110 | @tailwind utilities; 111 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/customize/classes.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 44 | 45 | -------------------------------------------------------------------------------- /src/utils/attributeStore.js: -------------------------------------------------------------------------------- 1 | import Attribute from './attribute'; 2 | import { arrayHasItems, hash } from './helpers'; 3 | 4 | export default class AttributeStore { 5 | constructor(theme, locale, attrs) { 6 | this.theme = theme; 7 | this.locale = locale; 8 | this.map = {}; 9 | this.refresh(attrs, true); 10 | } 11 | 12 | destroy() { 13 | this.theme = null; 14 | this.locale = null; 15 | this.map = {}; 16 | this.list = []; 17 | this.pinAttr = null; 18 | } 19 | 20 | refresh(attrs, reset) { 21 | const map = {}; 22 | const list = []; 23 | let pinAttr = null; 24 | // Keep record of added and deleted attributes 25 | const adds = []; 26 | const deletes = reset ? new Set() : new Set(Object.keys(this.map)); 27 | if (arrayHasItems(attrs)) { 28 | attrs.forEach((attr, i) => { 29 | if (!attr || !attr.dates) return; 30 | const key = attr.key ? attr.key.toString() : i.toString(); 31 | const order = attr.order || 0; 32 | const hashcode = hash(JSON.stringify(attr)); 33 | let exAttr = this.map[key]; 34 | // If just tracking delta changes and attribute hash hasn't changed 35 | if (!reset && exAttr && exAttr.hashcode === hashcode) { 36 | // ...don't need to replace the attribute 37 | deletes.delete(key); 38 | } else { 39 | // Otherwise, create attribute and add to the list of adds 40 | exAttr = new Attribute( 41 | { 42 | key, 43 | order, 44 | hashcode, 45 | ...attr, 46 | }, 47 | this.theme, 48 | this.locale, 49 | ); 50 | adds.push(exAttr); 51 | } 52 | // Keep track of attribute to pin for initial page 53 | if (exAttr && exAttr.pinPage) { 54 | pinAttr = exAttr; 55 | } 56 | // Add attribute to map and list 57 | map[key] = exAttr; 58 | list.push(exAttr); 59 | }); 60 | } 61 | this.map = map; 62 | this.list = list; 63 | this.pinAttr = pinAttr; 64 | return { adds, deletes: Array.from(deletes) }; 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/utils/defaults/index.js: -------------------------------------------------------------------------------- 1 | // Vue won't get included in bundle as it is externalized 2 | // https://cli.vuejs.org/guide/build-targets.html#library 3 | import Vue from 'vue'; 4 | import { isObject, defaultsDeep, mapValues, get, has } from '../_'; 5 | import touch from './touch.json'; 6 | import masks from './masks.json'; 7 | import screens from './screens.json'; 8 | import locales from './locales'; 9 | 10 | const pluginDefaults = { 11 | componentPrefix: 'v', 12 | navVisibility: 'click', 13 | titlePosition: 'center', 14 | transition: 'slide-h', 15 | touch, 16 | masks, 17 | screens, 18 | locales, 19 | datePicker: { 20 | updateOnInput: true, 21 | inputDebounce: 1000, 22 | popover: { 23 | visibility: 'hover-focus', 24 | placement: 'bottom-start', 25 | keepVisibleOnInput: false, 26 | isInteractive: true, 27 | }, 28 | }, 29 | }; 30 | 31 | let defaults_ = null; 32 | 33 | export const setupDefaults = opts => { 34 | if (!defaults_) { 35 | defaults_ = new Vue({ 36 | data() { 37 | return { 38 | defaults: defaultsDeep(opts, pluginDefaults), 39 | }; 40 | }, 41 | computed: { 42 | locales() { 43 | return mapValues(this.defaults.locales, v => { 44 | v.masks = defaultsDeep(v.masks, this.defaults.masks); 45 | return v; 46 | }); 47 | }, 48 | }, 49 | }); 50 | } 51 | return defaults_.defaults; 52 | }; 53 | 54 | export const defaultsMixin = { 55 | beforeCreate() { 56 | setupDefaults(); 57 | }, 58 | computed: { 59 | $defaults() { 60 | return defaults_.defaults; 61 | }, 62 | $locales() { 63 | return defaults_.locales; 64 | }, 65 | }, 66 | methods: { 67 | propOrDefault(prop, defaultPath, strategy) { 68 | return this.passedProp(prop, get(this.$defaults, defaultPath), strategy); 69 | }, 70 | passedProp(prop, fallback, strategy) { 71 | if (has(this.$options.propsData, prop)) { 72 | const propValue = this[prop]; 73 | if (isObject(propValue) && strategy === 'merge') { 74 | return defaultsDeep(propValue, fallback); 75 | } 76 | return propValue; 77 | } 78 | return fallback; 79 | }, 80 | }, 81 | }; 82 | -------------------------------------------------------------------------------- /src/components/SvgIcon.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 62 | 63 | 73 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/435.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 96 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/components/SidebarLinks.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 82 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/280/280.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 80 | 81 | 87 | -------------------------------------------------------------------------------- /docs/.vuepress/components/examples/multiple-dates.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 71 | -------------------------------------------------------------------------------- /docs/api/v1.0/page-object.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Page Object' 3 | sidebarDepth: 2 4 | pageClass: docs-page 5 | --- 6 | 7 | ## `position` 8 | 9 | **Type:** Number 10 | 11 | **Description:** Position of the the pane that contains this page (`0`: single-paned, `1`: double-paned, left side, `2`: double-paned, right side). 12 | 13 | ## `month` 14 | 15 | **Type:** Number 16 | 17 | **Description:** Page month number. 18 | 19 | ## `year` 20 | 21 | **Type:** Number 22 | 23 | **Description:** Page year number. 24 | 25 | ## `monthLabel` 26 | 27 | **Type:** String 28 | 29 | **Description:** Page month label as specified by the `monthLabels` prop or locale settings. 30 | 31 | ## `shortMonthLabel` 32 | 33 | **Type:** String 34 | 35 | **Description:** Shortened month label as specified by the `shortMonthLabels` prop or locale settings. 36 | 37 | ## `yearLabel` 38 | 39 | **Type:** String 40 | 41 | **Description:** Page year label in YYYY format. 42 | 43 | ## `shortYearLabel` 44 | 45 | **Type:** String 46 | 47 | **Description:** Page year label in YY format. 48 | 49 | ## `monthComps` 50 | 51 | **Type:** Object 52 | 53 | **Description:** Components of the current page month. 54 | 55 | ## `prevMonthComps` 56 | 57 | **Type:** Object 58 | 59 | **Description:** Components of the previous page month. 60 | 61 | ## `nextMonthComps` 62 | 63 | **Type:** Object 64 | 65 | **Description:** Components of the next page page. 66 | 67 | ## `canMove(Object) => Boolean` 68 | 69 | **Type:** Function 70 | 71 | **Description:** Function that determines if calendar can move to a desired page (due to `min-page` or `max-page` setting). 72 | 73 | ## `move(Object)` 74 | 75 | **Type:** Function 76 | 77 | **Description:** Function that moves to the specified page. 78 | 79 | ## `moveThisMonth()` 80 | 81 | **Type:** Function 82 | 83 | **Description:** Function that moves to the page for today's month. 84 | 85 | ## `movePrevMonth()` 86 | 87 | **Type:** Function 88 | 89 | **Description:** Function that moves to the page for the previous month. 90 | 91 | ## `moveNextMonth()` 92 | 93 | **Type:** Function 94 | 95 | **Description:** Function that moves to the page for the next month. 96 | 97 | 104 | -------------------------------------------------------------------------------- /docs/api/v2.0/page-object.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Page Object' 3 | sidebarDepth: 2 4 | pageClass: docs-page 5 | --- 6 | 7 | ## `position` 8 | 9 | **Type:** Number 10 | 11 | **Description:** Position of the the pane that contains this page (`0`: single-paned, `1`: double-paned, left side, `2`: double-paned, right side). 12 | 13 | ## `month` 14 | 15 | **Type:** Number 16 | 17 | **Description:** Page month number. 18 | 19 | ## `year` 20 | 21 | **Type:** Number 22 | 23 | **Description:** Page year number. 24 | 25 | ## `monthLabel` 26 | 27 | **Type:** String 28 | 29 | **Description:** Page month label as specified by the `monthLabels` prop or locale settings. 30 | 31 | ## `shortMonthLabel` 32 | 33 | **Type:** String 34 | 35 | **Description:** Shortened month label as specified by the `shortMonthLabels` prop or locale settings. 36 | 37 | ## `yearLabel` 38 | 39 | **Type:** String 40 | 41 | **Description:** Page year label in YYYY format. 42 | 43 | ## `shortYearLabel` 44 | 45 | **Type:** String 46 | 47 | **Description:** Page year label in YY format. 48 | 49 | ## `monthComps` 50 | 51 | **Type:** Object 52 | 53 | **Description:** Components of the current page month. 54 | 55 | ## `prevMonthComps` 56 | 57 | **Type:** Object 58 | 59 | **Description:** Components of the previous page month. 60 | 61 | ## `nextMonthComps` 62 | 63 | **Type:** Object 64 | 65 | **Description:** Components of the next page page. 66 | 67 | ## `canMove(Object) => Boolean` 68 | 69 | **Type:** Function 70 | 71 | **Description:** Function that determines if calendar can move to a desired page (due to `min-page` or `max-page` setting). 72 | 73 | ## `move(Object)` 74 | 75 | **Type:** Function 76 | 77 | **Description:** Function that moves to the specified page. 78 | 79 | ## `moveThisMonth()` 80 | 81 | **Type:** Function 82 | 83 | **Description:** Function that moves to the page for today's month. 84 | 85 | ## `movePrevMonth()` 86 | 87 | **Type:** Function 88 | 89 | **Description:** Function that moves to the page for the previous month. 90 | 91 | ## `moveNextMonth()` 92 | 93 | **Type:** Function 94 | 95 | **Description:** Function that moves to the page for the next month. 96 | 97 | 104 | -------------------------------------------------------------------------------- /docs/.vuepress/components/sponsors/page.vue: -------------------------------------------------------------------------------- 1 | 60 | 61 | 71 | -------------------------------------------------------------------------------- /docs/api/v1.0/day-object.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Day Object' 3 | sidebarDepth: 2 4 | pageClass: docs-page 5 | --- 6 | 7 | ## Properties 8 | 9 | ### `day` 10 | 11 | **Type:** Number 12 | 13 | **Description:** Day number (1 - 31). 14 | 15 | ### `dayFromEnd` 16 | 17 | **Type:** Number 18 | 19 | **Description:** Day number from the end of the month (1 - 31). 20 | 21 | ### `weekday` 22 | 23 | **Type:** Number 24 | 25 | **Description:** Day weekday number (1:Sun - 7:Sat). 26 | 27 | ### `weekdayOrdinal` 28 | 29 | **Type:** Number 30 | 31 | **Description:** Weekday ordinal position from the start of the month (1 - 6). 32 | 33 | ### `weekdayOrdinalFromEnd` 34 | 35 | **Type:** Number 36 | 37 | **Description:** Weekday ordinal position from the end of the month (1 - 6). 38 | 39 | ### `week` 40 | 41 | **Type:** Number 42 | 43 | **Description:** Week number form the start of the month (1 - 6). 44 | 45 | ### `weekFromEnd` 46 | 47 | **Type:** Number 48 | 49 | **Description:** Week number from the end of the month (1 - 6). 50 | 51 | ### `month` 52 | 53 | **Type:** Number 54 | 55 | **Description:** Month number (1 - 12). 56 | 57 | ### `year` 58 | 59 | **Type:** Number 60 | 61 | **Description:** Year number. 62 | 63 | ### `date` 64 | 65 | **Type:** Date 66 | 67 | **Description:** Date for this day. 68 | 69 | ### `dateTime` 70 | 71 | **Type:** Number 72 | 73 | **Description:** Result of calling `date.getTime()` for this day. 74 | 75 | ### `inMonth` 76 | 77 | **Type:** Boolean 78 | 79 | **Description:** Day lies in the currently active month. 80 | 81 | ### `inPrevMonth` 82 | 83 | **Type:** Boolean 84 | 85 | **Description:** Day lies in the month before the currently active month. 86 | 87 | ### `inNextMonth` 88 | 89 | **Type:** Boolean 90 | 91 | **Description:** Day lies in the month after the currently active month. 92 | 93 | ### `attributes` 94 | 95 | **Type:** Array 96 | 97 | **Description:** List of attributes for the day involved with the event. 98 | 99 | ### `attributesMap` 100 | 101 | **Type:** Object 102 | 103 | **Description:** Object map of the attributes using their designated key. 104 | 105 | ### `event` 106 | 107 | **Type:** Object 108 | 109 | **Description:** Original event that triggered the event. 110 | 111 | 118 | -------------------------------------------------------------------------------- /src/utils/screens.js: -------------------------------------------------------------------------------- 1 | // Vue won't get included in bundle as it is externalized 2 | // https://cli.vuejs.org/guide/build-targets.html#library 3 | import Vue from 'vue'; 4 | import buildMediaQuery from './buildMediaQuery'; 5 | import defaultScreens from './defaults/screens.json'; 6 | import { isUndefined, mapValues, toPairs, isFunction, has } from './_'; 7 | 8 | let isSettingUp = false; 9 | let shouldRefreshQueries = false; 10 | let screensComp = null; 11 | 12 | export function setupScreens(screens = defaultScreens, forceSetup) { 13 | if ((screensComp && !forceSetup) || isSettingUp) { 14 | return; 15 | } 16 | isSettingUp = true; 17 | shouldRefreshQueries = true; 18 | // Use a private Vue component to store reactive screen matches 19 | screensComp = new Vue({ 20 | data() { 21 | return { 22 | matches: [], 23 | queries: [], 24 | }; 25 | }, 26 | methods: { 27 | refreshQueries() { 28 | if (!window || !window.matchMedia) return; 29 | this.queries = mapValues(screens, v => { 30 | const query = window.matchMedia(buildMediaQuery(v)); 31 | if (isFunction(query.addEventListener)) { 32 | query.addEventListener('change', this.refreshMatches); 33 | } else { 34 | // Deprecated 'MediaQueryList' API, p[1].matches) 44 | .map(p => p[0]); 45 | }, 46 | }, 47 | }); 48 | isSettingUp = false; 49 | } 50 | 51 | // Global mixin that provides responsive '$screens' utility method 52 | // that refreshes any time the screen matches update 53 | Vue.mixin({ 54 | beforeCreate() { 55 | if (!isSettingUp) { 56 | setupScreens(); 57 | } 58 | }, 59 | mounted() { 60 | if (shouldRefreshQueries && screensComp) { 61 | screensComp.refreshQueries(); 62 | shouldRefreshQueries = false; 63 | } 64 | }, 65 | computed: { 66 | $screens() { 67 | return (config, def) => 68 | screensComp.matches.reduce( 69 | (prev, curr) => (has(config, curr) ? config[curr] : prev), 70 | isUndefined(def) ? config.default : def, 71 | ); 72 | }, 73 | }, 74 | }); 75 | -------------------------------------------------------------------------------- /src/utils/popovers.js: -------------------------------------------------------------------------------- 1 | import { elementContains } from './helpers'; 2 | 3 | export function showPopover(opts) { 4 | if (document) { 5 | document.dispatchEvent( 6 | new CustomEvent('show-popover', { 7 | detail: opts, 8 | }), 9 | ); 10 | } 11 | } 12 | 13 | export function hidePopover(opts) { 14 | if (document) { 15 | document.dispatchEvent( 16 | new CustomEvent('hide-popover', { 17 | detail: opts, 18 | }), 19 | ); 20 | } 21 | } 22 | 23 | export function togglePopover(opts) { 24 | if (document) { 25 | document.dispatchEvent( 26 | new CustomEvent('toggle-popover', { 27 | detail: opts, 28 | }), 29 | ); 30 | } 31 | } 32 | 33 | export function updatePopover(opts) { 34 | if (document) { 35 | document.dispatchEvent( 36 | new CustomEvent('update-popover', { 37 | detail: opts, 38 | }), 39 | ); 40 | } 41 | } 42 | 43 | export function getPopoverTriggerEvents(opts) { 44 | const { visibility } = opts; 45 | const click = visibility === 'click'; 46 | const hover = visibility === 'hover'; 47 | const hoverFocus = visibility === 'hover-focus'; 48 | const focus = visibility === 'focus'; 49 | opts.autoHide = !click; 50 | let hovered = false; 51 | let focused = false; 52 | return { 53 | click(e) { 54 | if (click) { 55 | opts.ref = e.target; 56 | togglePopover(opts); 57 | e.stopPropagation(); 58 | } 59 | }, 60 | mousemove(e) { 61 | opts.ref = e.currentTarget; 62 | if (!hovered) { 63 | hovered = true; 64 | if (hover || hoverFocus) { 65 | showPopover(opts); 66 | } 67 | } 68 | }, 69 | mouseleave(e) { 70 | opts.ref = e.target; 71 | if (hovered) { 72 | hovered = false; 73 | if (hover || (hoverFocus && !focused)) { 74 | hidePopover(opts); 75 | } 76 | } 77 | }, 78 | focusin(e) { 79 | opts.ref = e.currentTarget; 80 | if (!focused) { 81 | focused = true; 82 | if (focus || hoverFocus) { 83 | showPopover(opts); 84 | } 85 | } 86 | }, 87 | focusout(e) { 88 | opts.ref = e.currentTarget; 89 | if (focused && !elementContains(opts.ref, e.relatedTarget)) { 90 | focused = false; 91 | if (focus || (hoverFocus && !hovered)) { 92 | hidePopover(opts); 93 | } 94 | } 95 | }, 96 | }; 97 | } 98 | -------------------------------------------------------------------------------- /docs/.vuepress/components/github/772.vue: -------------------------------------------------------------------------------- 1 | 59 | 60 | 83 | -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Calendar Test 9 | 10 | 11 | 28 | 29 | 30 | 36 |
37 |
38 |

This uses the built version of the plugin

39 |
40 |
41 |
42 | 46 |
47 | 48 |
49 |
50 |
51 | 55 | 59 | 63 |
64 | 65 |
66 |
67 | 68 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /docs/.vuepress/components/guide/attributes/popover-slot.vue: -------------------------------------------------------------------------------- 1 | 40 | 41 | 89 | --------------------------------------------------------------------------------