{"_id":"@codekraft-studio/vue-calendar","_rev":"2-9609cd8f1b69ec8e0dc18c4430dcc79d","name":"@codekraft-studio/vue-calendar","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@codekraft-studio/vue-calendar","version":"0.0.1","keywords":["calendar","momentjs","vue","vue-calendar","vue-plugin","vue-components"],"author":{"name":"Filippo Conti"},"license":"MIT","_id":"@codekraft-studio/vue-calendar@0.0.1","maintainers":[{"name":"b4dnewz","email":"filippo@codekraft.it"}],"homepage":"https://github.com/codekraft-studio/vue-calendar","dist":{"shasum":"c39e1e923d15d2cb5f6c2348ea38759e4ed77e7c","tarball":"https://registry.npmjs.org/@codekraft-studio/vue-calendar/-/vue-calendar-0.0.1.tgz","fileCount":11,"integrity":"sha512-ZRHJkvDq6NXlvrLSWG64OE7GyYFsmf6CI8yoHb32z+W9Z73/9S3jtnLsTYHHgFyLI2eQEeLkiW2q0Y94T+2pZg==","signatures":[{"sig":"MEUCIHCelC6KyoUNlXpezEwI/Rk+4RgGKfEbc/lr6YGoGRKlAiEAx3YoE6zSQWYzXM43ysRpkd1DgULbxFlIoQGRLqXXh9M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4665390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXDWPCRA9TVsSAnZWagAArGsP/Rh1mZUej6kgNzIBuLZ9\nLIJrtZztgD/ixtrdbDmfxee4bm5AshhOCwuKYvEsfuvnv4aCYqX52HojWMZj\n0TtuP4S4DRRtDGIZ3w3vmZcxMS8MAU35HvfWALvAtRZoyhwCSZsz68L1wmJ5\nCV6vfxMCJTVTeVXCyWAYDaM6DlXYQiWOYCi4+pidTrb7R++tmdAtz0scyESA\neXd4dNQ4TRYVh7dUKR9ymWbHPJytNIaY00YUxAm+WKeSduCMUmXWy60/ufRj\nVzLzjZskyGqcT2IytJo72kwlDBpywW+/Bs/JgXMhGEx4ODrKSy+JfgEQOQHe\nqCUjg6LhtFrf6pOX6i4zBcOzXcPaSlzdlp412qdunN5SrDP7lQpFsmFCBQPD\nC68u9H5z8Sgg8jqQ5wsneU2MmM3OxXQyxL3/mP29cI4jau+HxI88sl2Y5Udq\n44s2GoSrFmuDKUupU7BHdsnPcGesUpyQjR3KPz1190i3FEJ5mW54SK8ewT9j\nL5WpTJV5jWSRW0zc+yJAtR2SCsAx7xVu0jZybEukvl0AB3+GKRD9awGut6is\nNOMR00SfMNmdckd+gf7i8FDIoJN/VadQgw7spt9XApkapwFnek+3YlmuMX2u\nX5MwRjL9yO/dusk16hx6xzq4Sp92+MLRvOTtPWhM2JAXBhXTR3POWjBE8k6+\nIYpB\r\n=MzRZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/VueCalendar.umd.js","gitHead":"2e1ee61e01baa652a55b77c9ffe7486d8e8943b3","scripts":{"lint":"vue-cli-service lint","build":"vue-cli-service build --target lib --name VueCalendar lib/index.js","serve":"vue-cli-service serve","test:e2e":"vue-cli-service test:e2e","test:unit":"vue-cli-service test:unit","build:demo":"vue-cli-service build --dest demo"},"_npmUser":{"name":"b4dnewz","email":"filippo@codekraft.it"},"_npmVersion":"6.5.0","description":"> A fully customizable versatile calendar with events support","directories":{},"_nodeVersion":"8.11.2","dependencies":{"vue":"^2.5.17","moment":"^2.22.2","lodash.mergewith":"^4.6.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^5.8.0","node-sass":"^4.9.0","babel-core":"7.0.0-bridge.0","babel-jest":"^23.6.0","sass-loader":"^7.0.1","babel-eslint":"^10.0.1","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.2.0","eslint-plugin-vue":"^5.0.0-0","@vue/cli-plugin-babel":"^3.2.0","vue-template-compiler":"^2.5.17","@vue/cli-plugin-eslint":"^3.2.1","@vue/cli-plugin-unit-jest":"^3.2.0","@vue/cli-plugin-e2e-cypress":"^3.2.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-calendar_0.0.1_1549546895304_0.3118552837731554","host":"s3://npm-registry-packages"}}},"time":{"created":"2019-02-07T13:41:35.126Z","modified":"2024-08-10T13:19:49.843Z","0.0.1":"2019-02-07T13:41:35.441Z"},"author":{"name":"Filippo Conti"},"license":"MIT","homepage":"https://github.com/codekraft-studio/vue-calendar","keywords":["calendar","momentjs","vue","vue-calendar","vue-plugin","vue-components"],"description":"> A fully customizable versatile calendar with events support","maintainers":[{"email":"erikyo83@gmail.com","name":"erikyo"},{"email":"filippo@codekraft.it","name":"b4dnewz"}],"readme":"# vue-calendar\n\n> A fully customizable versatile calendar with events support\n\n[![NPM version][npm-image]][npm-url] [![Dependency Status][daviddm-image]][daviddm-url]\n\nThis project is __still in development__ so api and features might change.\n\n\n## Installation\n\nDownload the project using your favourite package manager:\n\n```\nnpm i @codekraft-studio/vue-calendar\nyarn add @codekraft-studio/vue-calendar\n```\n\nImport it in your project and install it in your application:\n\n```js\nimport Vue from 'vue'\n\n// component and styles\nimport '@codekraft-studio/vue-calendar/dist/VueCalendar.css'\nimport VueCalendar from '@codekraft-studio/vue-calendar'\n\nVue.use(VueCalendar, options)\n```\n\nIt's all ready, you can use the `<VueCalendar />` component.\n\n```html\n<body id=\"app\">\n  <VueCalendar />\n</body>\n```\n\n---\n\n## Customization\n\nThe calendar is very flexible and allow for sections customization using named slots or full section replacements.\n\nFor example if you want to place a image above the calendar header you can do it like this:\n\n```html\n<VueCalendar>\n  <div slot=\"header-top\">\n    <img src=\"path/to/img\" />\n  </div>\n</VueCalendar>\n```\n\nIf you use the section name as the slot name, it will fully replace the section letting you fully customize the output:\n\n```html\n<VueCalendar>\n  <div slot=\"header\" slot-scope=\"slotProps\">\n    <div class=\"my-header-top\"></div>\n    <div class=\"my-header-content\">\n      <!-- your custom toolbar -->\n    </div>\n    <div class=\"my-header-bottom\"></div>\n  </div>\n</VueCalendar>\n```\n\nRight now you can only customize the calendar header and footer, below the list of the slot names:\n\n#### header\n\nThe header is where the calendar toolbar is usually located, it exposes two child slots for upper and lower content placement.\n\n* header-top\n* header-bottom\n\n#### footer\n\nThe footer is usually used to put arbitrary text, it exposes two child slots for upper and lower content placement.\n\n* footer-top\n* footer-bottom\n\n---\n\n## Methods\n\nThe calendar is built on top of momentjs so it's very easy to control the dates and the calendar itself exposes few methods to change the date view and move around the calendar:\n\n#### __prev(unit, len=1)__\n\nChange the date to the next __unit__ updating the calendar. By default it will add or remove only one unit, the second parameter is to choose how far to move previous.\n\n```js\nthis.$refs.Calendar.prev('m')\nthis.$refs.Calendar.prev('month', 2)\n```\n\n#### __next(unit, len=1)__\n\nChange the date to the next __unit__ updating the calendar. By default it will add or remove only one unit, the second parameter is to choose how far to move next.\n\n```js\nthis.$refs.Calendar.next('y')\nthis.$refs.Calendar.next('year', 2)\n```\n\n#### __setDate(date)__\n\nThis method update the calendar current date, it will trigger a calendar view change if the date is not inside the current sliced view, it accepts what momentjs accepts as a valid date, so a string, object and more.. checkout [momentjs]() documentation to know more about it.\n\n```js\nthis.$refs.Calendar.setDate() // default to now\nthis.$refs.Calendar.setDate(new Date())\nthis.$refs.Calendar.setDate('tomorrow')\nthis.$refs.Calendar.setDate('09-08-2018')\nthis.$refs.Calendar.setDate('09-08-2018', 'MM-DD-YYYY')\nthis.$refs.Calendar.setDate('09/08/2018', 'MM/DD/YYYY')\n```\n\nThe arguments are forwarded to momentjs [parse](https://momentjs.com/docs/#/parsing/string-format/) function, checkout all the valid formats.\n\n---\n\n## Development\n\nClone the project repository and install all the dependencies than start the vuecli development server:\n\n```\nnpm install\nnpm run serve\n```\n\n---\n\n## License\n\nThis package is under the [MIT License](LICENSE).\n\n[npm-image]: https://badge.fury.io/js/%40codekraft-studio%2Fvue-calendar.svg\n[npm-url]: https://npmjs.org/package/@codekraft-studio/vue-calendar\n[daviddm-image]: https://david-dm.org/codekraft-studio/vue-calendar.svg?theme=shields.io\n[daviddm-url]: https://david-dm.org/codekraft-studio/vue-calendar\n","readmeFilename":"README.md"}