# vue-calendarless > Zero dependency Vue renderless calendar with scoped-slots API Latest version **2.3.1** (published 2021-09-27) · MIT license · 0 weekly downloads ## Install ```sh npm install vue-calendarless pnpm add vue-calendarless yarn add vue-calendarless bun add vue-calendarless ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.3.1 | | Published | 2021-09-27 | | First published | 2021-06-23 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 646.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | Seitmagambet Olzhas | | Maintainers | kapcash | | Keywords | vue, renderless, calendar, datepicker, scoped-slots, date-picker, date, component | ## Links - npm: https://www.npmjs.com/package/vue-calendarless - Repository: https://github.com/kapcash/vue-renderless-calendar - npm.io page: https://npm.io/package/vue-calendarless ## Alternatives - [@js-joda/timezone](https://npm.io/package/@js-joda/timezone.md) — 383.4K weekly downloads - [chartjs-adapter-moment](https://npm.io/package/chartjs-adapter-moment.md) — 210.8K weekly downloads - [strftime](https://npm.io/package/strftime.md) — 171.2K weekly downloads - [vue-flatpickr-component](https://npm.io/package/vue-flatpickr-component.md) — 115.8K weekly downloads - [timepicker](https://npm.io/package/timepicker.md) — 51.0K weekly downloads ## Recent versions - 2.3.1 (latest) — 2021-09-27 - 2.3.0 — 2021-06-23 ## README # vue-calendarless 📆 A Vue renderless calendar component. > This is a fork of the `vue-renderless-calendar` library, which is not maintained actively. > This library may be **subject of heavy changes at any time**, since it's not developped for public usage for the moment. ## Install ```bash npm i vue-calendarless yarn add vue-calendarless ``` ## Component usage > Main wrapper component which contains state of the calendar and other helpful data ### Props | Prop | Required | Type | Default | Description |----------------------|-------------|-----------------------|---------------------|---------------------------------- | viewMode | false | String | | 'single', 'double', 'infinite' | mode | false | String | | 'single', 'range' | locale | false | Object or String | navigator.language (client), 'en' (server) | Locale string (e.g. 'ru'), it will automatically generate locale object using `Date.prototype.toLocaleString`, otherwise you can provide this object manually | minDate | false | String | '' | Minimal valid date (`YYYY-MM-DDD`) | maxDate | false | String | '' | Maximal valid date (`YYYY-MM-DDD`) | preventOutOfRange | false | Boolean | true | Prevent user go out of valid dates range | dateSelectStrategy | false | Function | null | If you want custom behaviour for handling date select, you can implement this function | defaultSelectedDates | false | Array | [] | Array of date strings with `YYYY-MM-DDD` format | captureHover | false | Boolean | true | `captureHover` prop is used for computing dates which are between selected date and current hovered date | captureThirdDate | false | Boolean | false | `captureThirdDate` prop is used for capturing dates between in case when 2 dates already selected and you have third element hovered | disabledDates | false | Array | [] | Array of `YYYY-MM-DDD` strings containing dates that can't be selected | | markedDates | false | Array | [] | Array of `YYYY-MM-DDD` strings with special meaning, that later will be accessed via `isMarked` modifier | | firstDayOfWeek | false | number | 1 | Index of the weekday to start the week from. From 0 to 6. 0 is Sunday, 6 is Saturday | ### Scoped-slots properties | Property | Type | Description | |-------------------|-----------------------|---------------| | weekDayNames | Array | List of week days with short and full titles from `locale` object | | monthNames | Array | List of months with short and full titles from `locale` object | | monthsList | Array | List of months which can be used for rendering months with possibility for changing current month view of calendar using `setMonth` method | | calendar | Array | Array of months with `month`, `year` number and array of `dates` | | selectedDates | Array\ | Array of current selected dates| | currentMonth | Number | | | currentYear | Number | | | canGoToPrevMonth | Boolean | | | canGoToNextMonth | Boolean | | ### Scoped-slots Methods | Property | Arguments | Description | |-------------------|---------------|-------------| | prevPage | - | Go to previous view iteration | | nextPage | - | Go to next view iteration | | resetDates | - | Set `selectedDates` to [] | | setMonth | monthListItem | Update views current active month | | onDateMouseOut | - | Reset current hovered date | | onDateMouseOver | CalendarDate | Set current hovered date | | onDateSelect | CalendarDate | Append selected date to `selectedDates` array using "date select strategy" | | getModifiers | CalendarDate | Returns | ### Events | Event name | Payload | |--------------|-----------------------| | onDateChange | Array\ | ### Modifiers > Object containing boolean properties that can be useful for computing styles | Property | Type | Description |----------------------|----------|--------------- | isSelected | Boolean | | isBetween | Boolean | | isDisabled | Boolean | | isMarked | Boolean | | isFirst | Boolean | is first selected date | isLast | Boolean | is last selected date | isOneDayAfter | Boolean | is one day after selected date | isOneDayBefore | Boolean | is one date before selected date | isOneDayBeforeFirst | Boolean | | isOneDayAfterFirst | Boolean | | isOneDayBeforeLast | Boolean | | isOneDayAfterLast | Boolean | ## CalendarDate > Class representing information about date ### Properties | Property | Type | Description | |-------------------|---------|-------------| | year | Number | | | month | Number | 0-11 | | day | Number | 1-31 | | actualMonthNumber | Number | Number of month with index correction | | formatted | String | YYYY-MM-DD | | isWeekend | Boolean | | | isToday | Boolean | | | isOtherMonthDay | Boolean | This field can be used to find out that this is the date from previous or next month | ## Contributing How to debug in local ### Runs the local examples This opens a simple Vue application with calendar examples. ``` yarn dev:example ``` ### In another project If you use the library in another project, you can link it to your local clone and debug the calendar sources from this project directly. ``` yarn link yarn watch # Updates the /dist folder at every change ``` ``` # Use the local version of the library in the node_modules yarn link vue-calendarless ``` You can now open the source files in the browser debugger. --- _Source: https://npm.io/package/vue-calendarless · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._