{"id":13407018,"url":"https://github.com/ManukMinasyan/vue-functional-calendar","last_synced_at":"2025-03-14T11:30:53.450Z","repository":{"id":33156890,"uuid":"153334918","full_name":"ManukMinasyan/vue-functional-calendar","owner":"ManukMinasyan","description":"Vue.js Functional Calendar | Component/Package","archived":false,"fork":false,"pushed_at":"2024-07-30T16:54:34.000Z","size":1987,"stargazers_count":470,"open_issues_count":2,"forks_count":84,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-03-08T23:51:16.845Z","etag":null,"topics":["booking-calendar","calendar","calendar-component","date","datepicker","daterange","functional-js","modern-calendar","vue","vue-calendar","vue-datepicker"],"latest_commit_sha":null,"homepage":"https://vue-functional-calendar.now.sh/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ManukMinasyan.png","metadata":{"files":{"readme":".github/README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"open_collective":"manuk-minasyan"}},"created_at":"2018-10-16T18:32:01.000Z","updated_at":"2025-02-11T09:22:02.000Z","dependencies_parsed_at":"2023-12-02T20:04:06.367Z","dependency_job_id":"a025be97-1f37-4837-9d02-25826284fef9","html_url":"https://github.com/ManukMinasyan/vue-functional-calendar","commit_stats":{"total_commits":268,"total_committers":16,"mean_commits":16.75,"dds":"0.20149253731343286","last_synced_commit":"0cd3c5c1504c47a0ac5c3de6cf6087fc860a58f7"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ManukMinasyan%2Fvue-functional-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ManukMinasyan%2Fvue-functional-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ManukMinasyan%2Fvue-functional-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ManukMinasyan%2Fvue-functional-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ManukMinasyan","download_url":"https://codeload.github.com/ManukMinasyan/vue-functional-calendar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243532740,"owners_count":20306206,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["booking-calendar","calendar","calendar-component","date","datepicker","daterange","functional-js","modern-calendar","vue","vue-calendar","vue-datepicker"],"created_at":"2024-07-30T19:02:46.014Z","updated_at":"2025-03-14T11:30:53.441Z","avatar_url":"https://github.com/ManukMinasyan.png","language":"Vue","funding_links":["https://opencollective.com/manuk-minasyan","https://opencollective.com/vue-functional-calendar"],"categories":["Vue","Components \u0026 Libraries","UI Components [🔝](#readme)","UI Components"],"sub_categories":["UI Components","Calendar"],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/ManukMinasyan/vue-functional-calendar/master/public/logo.png\" width=\"200\" /\u003e\u003c/p\u003e\n\u003ch1 align=\"center\"\u003eVue Functional Calendar\u003c/h1\u003e\n\u003cp align=\"center\"\u003eModern calendar and datepicker module for Vue.js\u003c/p\u003e\n\n\u003cp dir=\"auto\" align=\"center\"\u003e\n\u003ca href=\"https://www.npmjs.com/package/vue-functional-calendar\" rel=\"nofollow\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vue-functional-calendar.svg\" alt=\"Version\" data-canonical-src=\"https://img.shields.io/npm/v/vue-functional-calendar.svg\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n\u003ca href=\"/ManukMinasyan/vue-functional-calendar/blob/master/.github/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat\" alt=\"Software License\" data-canonical-src=\"https://img.shields.io/badge/license-MIT-brightgreen.svg\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/vue-functional-calendar\" rel=\"nofollow\"\u003e\u003cimg src=\"https://img.shields.io/npm/dw/vue-functional-calendar.svg\" alt=\"Downloads\" data-canonical-src=\"https://img.shields.io/npm/dw/vue-functional-calendar.svg\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/vue-functional-calendar#category-CONTRIBUTE\" rel=\"nofollow\"\u003e\u003cimg src=\"https://img.shields.io/opencollective/all/vue-functional-calendar.svg?style=fiat\" alt=\"Open Collective\" data-canonical-src=\"https://img.shields.io/opencollective/all/vue-functional-calendar.svg?style=fiat\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\n\u003ch2 align=\"center\"\u003e Sponsors\u003c/h2\u003e\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://getcopy.ai\"\u003e\n\u003cimg src=\"https://www.getcopy.ai/logo-light.svg\" width=\"240\"/\u003e\n\u003c/a\u003e\n\u003c/p\u003e\n\n___\n## Demo\n\nDemo: \u003ca href=\"https://y3jnxov469.codesandbox.io/\" target=\"_blank\"\u003ehttps://y3jnxov469.codesandbox.io/\u003c/a\u003e\n\n[![Edit VueJS Functional Calendar Component](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/980jov4m4p?fontsize=14\u0026hidenavigation=1)\n\n\u003cimg src=\"https://raw.githubusercontent.com/ManukMinasyan/vue-functional-calendar/master/public/demo.png\"/\u003e\n\n___\n\n* Lightweight, high-performance calendar component based on Vue.js\n* Small memory usage, good performance, good style, and high scalability\n* Native js development, no third-party library introduced\n* Date Picker, Date Range, Multiple Calendars, Modal Calendar\n\n___\n\n## Browser Support\n![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) |\n--- | --- | --- | --- | --- | --- |\n39+ ✔ | 28+ ✔ | 10.1+ ✔ | 27+ ✔ | 15+ ✔ | Latest ✔ |\n\n___\n\n## Install\n\n```\nnpm i vue-functional-calendar --save\n```\n___\n\n## Usage\n\n### Vue.use()\n\n```javascript\n// Introduced in vue file\nimport FunctionalCalendar from 'vue-functional-calendar';\nVue.use(FunctionalCalendar, {\n    dayNames: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']\n});\n````\n\n### Import Component\n```javascript\n// Introduced in vue file\nimport { FunctionalCalendar } from 'vue-functional-calendar';\n````\n\n### Component Settings\n````javascript\nexport default {\n    components: {\n        FunctionalCalendar\n    },\n    data() {\n        return {\n            calendarData: {}\n        }\n    }\n}\n````\n\n### Template Usage\n````html\n\u003cFunctionalCalendar\n      // v-model=\"calendarData\"\n      \n      // v-on:changedMonth=\"changedMonth\"\n      // v-on:changedYear=\"changedYear\"\n      \n      // :sundayStart=\"true\"\n      // :date-format=\"'dd/mm/yyyy'\"\n      // :is-date-range=\"true\"\n      // :is-date-picker=\"true\"      \n       :...:\n\u003e\u003c/FunctionalCalendar\u003e\n````\n___\n\n## Usage With Configs\n### Component Settings\n````javascript\nexport default {\n    components: {\n        FunctionalCalendar\n    },\n    data() {\n        return {\n            calendarData: {},\n            calendarConfigs: {\n                sundayStart: false,\n                dateFormat: 'dd/mm/yyyy',\n                isDatePicker: false,\n                isDateRange: false\n            }\n        }\n    },\n}\n````\n\n### Template Usage\n````html\n\u003cFunctionalCalendar\n      // v-model=\"calendarData\"\n      // :configs=\"calendarConfigs\"\n\u003e\u003c/FunctionalCalendar\u003e\n````\n___\n\n### A note on markDates\nThe `markedDates` property **must** be in JavaScript Date format, e.g, no leading zeroes on month and days.\n\n✅ Correct: 1/12/2019\n❎ Incorrect: 01/12/2019\n___\n\n## Available props\n| Prop                          | Type            | Default     | Example     | Description                              |\n|-------------------------------|-----------------|-------------|-------------|------------------------------------------|\n| sundayStart                   | Boolean         | false       | true        | Week start sunday                       |\n| newCurrentDate                   | Date         | new Date()       | new Date(2019,10,11)        | Calendar Current Date                       |\n| limits                   | [Object, Boolean]         | false       | {min: '31/10/2019', max: '31/12/2019'}        | Set calendar show, and marked dates limits.                       |\n| minSelDays                   | [Number, Boolean]         | false       | 3  | Set minimum selected days count.                       |\n| maxSelDays                   | [Number, Boolean]         | false       | 10  | Set maximum selected days count.                       |\n| placeholder                   | [String, Boolean]         | false       | 'yyyy/mm/dd'        | Date input placeholder                       |\n| dateFormat                   | String         | 'dd/mm/yyyy'       | 'yyyy/mm/dd'        | Date formatting string                       |\n| isDatePicker                   | Boolean         | false       | true        | Enable or disable date picker                     |\n| isMultipleDatePicker                   | Boolean         | false       | true        | Enable or disable multiple date picker                     |\n| isMultipleDateRange                   | Boolean         | false       | true        | Enable or disable multiple date range                     |\n| isDateRange                   | Boolean         | false       | true        | Enable or disable date range                     |\n| withTimePicker                   | Boolean         | false       | true        | Enable or disable time picker                     |\n| isMultiple                   | Boolean         | false       | true        | Enable multiple calendar function                     |\n| calendarsCount                   | Number         | 1       | 3        | Count of calendars, working only is prop isMultiple                    |\n| isSeparately                   | Boolean         | false       | true        | Enable separately  calendars                 |\n| isModal                   | Boolean         | false       | true        | Enable modal calendar function                    |\n| isAutoCloseable                   | Boolean         | false       | true        | Hide picker(calendar) if date has been selected                  |\n| isTypeable                   | Boolean         | false       | true        | Enable manually date typing function, working only with prop isModal                     |\n| changeMonthFunction                   | Boolean         | false       | true        | Enable changed month with list, function                   |\n| changeYearFunction                   | Boolean         | false       | true        | Enable changed year with list, function                   |\n| changeYearStep                   | Number         | 12       | 6        | Change year list step count                   |\n| changeMonthStep                   | Number         | 1       | 3        | How many months to jump forward with NextMonth()              |\n| markedDates                   | Array         | []       | ['10/12/2020', '12/12/2020'] **OR** [{date: '10/1/2020', class: 'marked-class'},{date: '12/1/2020', class: 'marked-class-2'}] | Marked dates array                   |\n| markedDateRange                   | Object         | {start: false, end: false}       | {start: '12/12/2020', end: '20/12/2020'} **OR** [{start: '12/12/2020', end: '20/12/2020'}, {start: '24/12/2020', end: '28/12/2020'}] | Marked date ranges                  |\n| disabledDayNames                   | Array         | []     | ['Su','We']        | Disabled Days Of Week                   |\n| disabledDates                   | Array         | []     | ['24/12/2020','27/12/2020']   **OR** ['beforeToday', 'afterToday', '24/12/2020','27/12/2020'] | Disabled Dates                   |\n| enabledDates                   | Array         | []     | ['24/12/2020','27/12/2020'] | Reversal of Disabled Dates                   |\n| dayNames                   | Array         | ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']       | ['Monday', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Sunday']        | Week Day Names                   |\n| monthNames                   | Array         | [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"]       | [\"Jan.\", \"Feb.\", \"Mar\", \"Apr.\", \"May\", \"Jun.\", \"Jul.\", \"Aug.\", \"Sept.\", \"Oct.\", \"Nov.\", \"Dec.\"]        | Month names                   |\n| shortMonthNames                   | Array         | [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"] | [\"Jan.\", \"Feb.\", \"Mar\", \"Apr.\", \"May\", \"Jun.\", \"Jul.\", \"Aug.\", \"Sept.\", \"Oct.\", \"Nov.\", \"Dec.\"]        | Short month names                   |\n| showWeekNumbers                    | Boolean         | false      | true | Display week numbers.               |\n| transition                    | Boolean         | true      | false | Calendar animations               |\n| hiddenElements                   | Array         | []       | ['dayNames', 'navigationArrows', 'leftAndRightDays', 'month']        | Hide calendar elements                       |\n| titlePosition                   | String         | center | left, right, center |  Set title position               |\n| arrowsPosition                   | String         | space-between | left, right, space-between |  Set arrows position               |\n| isDark                   | Boolean         | false       | true        | Dark theme                    |\n| isLayoutExpandable | Boolean | false | true | Enable expanding the calendar layout | \n| alwaysUseDefaultClasses | Boolean | false | true | Always add default classes to Day element, even when overriding with a slot |\n| activeHours               | Array         | []     | [8, 9,10, 18, 19, 20] | The hours you want to be shown in the timepicker (by default all of them are shown) \n| activeMinutes               | Array         | []     | [0, 15, 30, 45] | The minutes you want to be shown in the timepicker (by default all of them are shown) \n___\n\n### Slots\n| Name          | Description       | Props                                                        |\n| :------------- | :------------- | :-----------------------------------------------------------: \n| Default |Default slot responsible for the day component | {week: Object, day: Object}\n| datePickerInput |This slot responsible for the modal date picker input | {selectedDate: String, isTypeable: Boolean}\n| dateRangeInputs |This slot responsible for the modal date range inputs | {startDate: String, endDate: String, isTypeable: Boolean}\n| footer |This slot responsible for the calendar footer | {}\n\n### Events\n\n| Event          | Output       | Description                                                        |\n| :------------- | :------------- | :-----------------------------------------------------------: \n| dayClicked |Object | Get clicked day object\n| choseDay |Object | Get the object of the selected day\n| changedMonth |Date | Month page has been changed\n| changedYear |Date | Year page has been changed\n| selectedDaysCount |Number | Get number of days between date range dates\n| dayMouseOver |Date | Mouse over day\n| opened | | The picker is opened\n| closed | | The picker is closed\n\n##### Add the ref attribute to the calendar component and use these methods to do more.\n````javascript\nFor example: \u003cFunctionalCalendar ref=\"Calendar\"\u003e\u003c/FunctionalCalendar\u003e\n\n    ✅ this.$refs.Calendar.PreMonth();  //Call method implementation to go to previous month\n    ✅ this.$refs.Calendar.NextMonth(); //Call method implementation to go to next month\n    ✅ this.$refs.Calendar.PreYear(); //Call method implementation to go to previous year\n    ✅ this.$refs.Calendar.NextYear(); //Call method implementation to go to next year\n    ✅ this.$refs.Calendar.ChooseDate('today'); //Call method implementation to go to today\n    ✅ this.$refs.Calendar.ChooseDate('25/09/2020'); //Call method implementation to go to a date\n````\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FManukMinasyan%2Fvue-functional-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FManukMinasyan%2Fvue-functional-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FManukMinasyan%2Fvue-functional-calendar/lists"}