vue-functional-calendar 2.9.4 → 2.9.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/.gitattributes CHANGED
@@ -1,3 +1,3 @@
1
- # Auto detect text files and perform LF normalization
2
- *.scss linguist-language=Vue
3
- *.css linguist-language=Vue
1
+ # Auto detect text files and perform LF normalization
2
+ *.scss linguist-language=Vue
3
+ *.css linguist-language=Vue
package/.prettierrc CHANGED
@@ -1,5 +1,5 @@
1
- {
2
- "semi": false,
3
- "singleQuote": true,
4
- "tabWidth": 2
5
- }
1
+ {
2
+ "semi": false,
3
+ "singleQuote": true,
4
+ "tabWidth": 2
5
+ }
package/.travis.yml CHANGED
@@ -1,6 +1,6 @@
1
- language: node_js
2
- node_js:
3
- - '10.15.3'
4
- cache:
5
- directories:
6
- - 'node_modules'
1
+ language: node_js
2
+ node_js:
3
+ - '10.15.3'
4
+ cache:
5
+ directories:
6
+ - 'node_modules'
package/LICENSE CHANGED
@@ -1,21 +1,21 @@
1
- MIT License
2
-
3
- Copyright (c) 2018 Manuk Minasyan
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
1
+ MIT License
2
+
3
+ Copyright (c) 2018 Manuk Minasyan
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,214 +1,57 @@
1
- <h1 align="center">Vue Functional Calendar</h1>
2
- <p align="center">Modern calendar and datepicker module for Vue.js</p>
3
-
4
- [![Buy us a tree](https://img.shields.io/badge/Treeware-%F0%9F%8C%B3-lightgreen?style=for-the-badge)](https://offset.earth/treeware?gift-trees)
5
- [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Lightweight,%20high%20performance%20calendar%20component%20based%20on%20Vue.js&url=https://github.com/ManukMinasyan/vue-functional-calendar&via=github&hashtags=vue,calendar,design,developers)
6
-
7
- [![Build Status](https://travis-ci.org/ManukMinasyan/vue-functional-calendar.svg?branch=master)](https://travis-ci.org/ManukMinasyan/vue-functional-calendar)
8
- [![Version](https://img.shields.io/npm/v/vue-functional-calendar.svg)](https://www.npmjs.com/package/vue-functional-calendar)
9
- [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE)
10
- [![Downloads](https://img.shields.io/npm/dt/vue-functional-calendar.svg)](https://www.npmjs.com/package/vue-functional-calendar)
11
- ___
12
- ## Demo
13
-
14
- Demo: <a href="https://y3jnxov469.codesandbox.io/" target="_blank">https://y3jnxov469.codesandbox.io/</a>
15
-
16
- [![Edit VueJS Functional Calendar Component](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/980jov4m4p?fontsize=14&hidenavigation=1)
17
-
18
- <img src="https://raw.githubusercontent.com/ManukMinasyan/vue-functional-calendar/master/public/demo.png"/>
19
-
20
- ___
21
-
22
- * Lightweight, high-performance calendar component based on Vue.js
23
- * Small memory usage, good performance, good style, and high scalability
24
- * Native js development, no third-party library introduced
25
- * Date Picker, Date Range, Multiple Calendars, Modal Calendar
26
-
27
- ___
28
-
29
- ## Browser Support
30
- ![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) |
31
- --- | --- | --- | --- | --- | --- |
32
- 39+ ✔ | 28+ ✔ | 10.1+ ✔ | 27+ ✔ | 15+ ✔ | Latest ✔ |
33
-
34
- ___
35
-
36
- ## Install
37
-
38
- ```
39
- npm i vue-functional-calendar --save
40
- ```
41
- ___
42
-
43
- ## Usage
44
-
45
- ### Vue.use()
46
-
47
- ```javascript
48
- // Introduced in vue file
49
- import FunctionalCalendar from 'vue-functional-calendar';
50
- Vue.use(FunctionalCalendar, {
51
- dayNames: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
52
- });
53
- ````
54
-
55
- ### Import Component
56
- ```javascript
57
- // Introduced in vue file
58
- import { FunctionalCalendar } from 'vue-functional-calendar';
59
- ````
60
-
61
- ### Component Settings
62
- ````javascript
63
- export default {
64
- components: {
65
- FunctionalCalendar
66
- },
67
- data() {
68
- return {
69
- calendarData: {}
70
- }
71
- }
72
- }
73
- ````
74
-
75
- ### Template Usage
76
- ````html
77
- <FunctionalCalendar
78
- // v-model="calendarData"
79
-
80
- // v-on:changedMonth="changedMonth"
81
- // v-on:changedYear="changedYear"
82
-
83
- // :sundayStart="true"
84
- // :date-format="'dd/mm/yyyy'"
85
- // :is-date-range="true"
86
- // :is-date-picker="true"
87
- :...:
88
- ></FunctionalCalendar>
89
- ````
90
- ___
91
-
92
- ## Usage With Configs
93
- ### Component Settings
94
- ````javascript
95
- export default {
96
- components: {
97
- FunctionalCalendar
98
- },
99
- data() {
100
- return {
101
- calendarData: {},
102
- calendarConfigs: {
103
- sundayStart: false,
104
- dateFormat: 'dd/mm/yyyy',
105
- isDatePicker: false,
106
- isDateRange: false
107
- }
108
- }
109
- },
110
- }
111
- ````
112
-
113
- ### Template Usage
114
- ````html
115
- <FunctionalCalendar
116
- // v-model="calendarData"
117
- // :configs="calendarConfigs"
118
- ></FunctionalCalendar>
119
- ````
120
- ___
121
-
122
- ### A note on markDates
123
- The `markedDates` property **must** be in JavaScript Date format, e.g, no leading zeroes on month and days.
124
-
125
- ✅ Correct: 1/12/2019
126
- ❎ Incorrect: 01/12/2019
127
- ___
128
-
129
- ## Available props
130
- | Prop | Type | Default | Example | Description |
131
- |-------------------------------|-----------------|-------------|-------------|------------------------------------------|
132
- | sundayStart | Boolean | false | true | Week start sunday |
133
- | newCurrentDate | Date | new Date() | new Date(2019,10,11) | Calendar Current Date |
134
- | limits | [Object, Boolean] | false | {min: '31/10/2019', max: '31/12/2019'} | Set calendar show, and marked dates limits. |
135
- | minSelDays | [Number, Boolean] | false | 3 | Set minimum selected days count. |
136
- | maxSelDays | [Number, Boolean] | false | 10 | Set maximum selected days count. |
137
- | placeholder | [String, Boolean] | false | 'yyyy/mm/dd' | Date input placeholder |
138
- | dateFormat | String | 'dd/mm/yyyy' | 'yyyy/mm/dd' | Date formatting string |
139
- | isDatePicker | Boolean | false | true | Enable or disable date picker |
140
- | isMultipleDatePicker | Boolean | false | true | Enable or disable multiple date picker |
141
- | isMultipleDateRange | Boolean | false | true | Enable or disable multiple date range |
142
- | isDateRange | Boolean | false | true | Enable or disable date range |
143
- | withTimePicker | Boolean | false | true | Enable or disable time picker |
144
- | isMultiple | Boolean | false | true | Enable multiple calendar function |
145
- | calendarsCount | Number | 1 | 3 | Count of calendars, working only is prop isMultiple |
146
- | isSeparately | Boolean | false | true | Enable separately calendars |
147
- | isModal | Boolean | false | true | Enable modal calendar function |
148
- | isAutoCloseable | Boolean | false | true | Hide picker(calendar) if date has been selected |
149
- | isTypeable | Boolean | false | true | Enable manually date typing function, working only with prop isModal |
150
- | changeMonthFunction | Boolean | false | true | Enable changed month with list, function |
151
- | changeYearFunction | Boolean | false | true | Enable changed year with list, function |
152
- | changeYearStep | Number | 12 | 6 | Change year list step count |
153
- | changeMonthStep | Number | 1 | 3 | How many months to jump forward with NextMonth() |
154
- | 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 |
155
- | 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 |
156
- | disabledDayNames | Array | [] | ['Su','We'] | Disabled Days Of Week |
157
- | disabledDates | Array | [] | ['24/12/2020','27/12/2020'] **OR** ['beforeToday', 'afterToday', '24/12/2020','27/12/2020'] | Disabled Dates |
158
- | enabledDates | Array | [] | ['24/12/2020','27/12/2020'] | Reversal of Disabled Dates |
159
- | dayNames | Array | ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'] | ['Monday', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Sunday'] | Week Day Names |
160
- | 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 |
161
- | 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 |
162
- | showWeekNumbers | Boolean | false | true | Display week numbers. |
163
- | transition | Boolean | true | false | Calendar animations |
164
- | hiddenElements | Array | [] | ['dayNames', 'navigationArrows', 'leftAndRightDays', 'month'] | Hide calendar elements |
165
- | titlePosition | String | center | left, right, center | Set title position |
166
- | arrowsPosition | String | space-between | left, right, space-between | Set arrows position |
167
- | isDark | Boolean | false | true | Dark theme |
168
- | isLayoutExpandable | Boolean | false | true | Enable expanding the calendar layout |
169
- | alwaysUseDefaultClasses | Boolean | false | true | Always add default classes to Day element, even when overriding with a slot |
170
- ___
171
-
172
- ### Slots
173
- | Name | Description | Props |
174
- | :------------- | :------------- | :-----------------------------------------------------------:
175
- | Default |Default slot responsible for the day component | {week: Object, day: Object}
176
- | datePickerInput |This slot responsible for the modal date picker input | {selectedDate: String, isTypeable: Boolean}
177
- | dateRangeInputs |This slot responsible for the modal date range inputs | {startDate: String, endDate: String, isTypeable: Boolean}
178
- | footer |This slot responsible for the calendar footer | {}
179
-
180
- ### Events
181
-
182
- | Event | Output | Description |
183
- | :------------- | :------------- | :-----------------------------------------------------------:
184
- | dayClicked |Object | Get clicked day object
185
- | choseDay |Object | Get the object of the selected day
186
- | changedMonth |Date | Month page has been changed
187
- | changedYear |Date | Year page has been changed
188
- | selectedDaysCount |Number | Get number of days between date range dates
189
- | dayMouseOver |Date | Mouse over day
190
- | opened | | The picker is opened
191
- | closed | | The picker is closed
192
-
193
- ##### Add the ref attribute to the calendar component and use these methods to do more.
194
- ````javascript
195
- For example: <FunctionalCalendar ref="Calendar"></FunctionalCalendar>
196
-
197
- ✅ this.$refs.Calendar.PreMonth(); //Call method implementation to go to previous month
198
- ✅ this.$refs.Calendar.NextMonth(); //Call method implementation to go to next month
199
- ✅ this.$refs.Calendar.PreYear(); //Call method implementation to go to previous year
200
- ✅ this.$refs.Calendar.NextYear(); //Call method implementation to go to next year
201
- ✅ this.$refs.Calendar.ChooseDate('today'); //Call method implementation to go to today
202
- ✅ this.$refs.Calendar.ChooseDate('25/09/2020'); //Call method implementation to go to a date
203
- ````
204
- ___
205
-
206
- ## Treeware
207
-
208
- You're free to use this package, but if it makes it to your production environment you are required to buy the world a tree.
209
-
210
- It’s now common knowledge that one of the best tools to tackle the climate crisis and keep our temperatures from rising above 1.5C is to <a href="https://www.bbc.co.uk/news/science-environment-48870920">plant trees</a>. If you support this package and contribute to the Treeware forest you’ll be creating employment for local families and restoring wildlife habitats.
211
-
212
- You can buy trees here [offset.earth/treeware](https://offset.earth/treeware?gift-trees)
213
-
214
- Read more about Treeware at [treeware.earth](http://treeware.earth)
1
+ <p align="center"><img src="https://raw.githubusercontent.com/ManukMinasyan/vue-functional-calendar/master/public/logo.png" width="200" /></p>
2
+
3
+ <h1 align="center">Vue Functional Calendar</h1>
4
+ <p align="center">Modern calendar and datepicker module for Vue.js</p>
5
+
6
+ [![Buy us a tree](https://img.shields.io/badge/Treeware-%F0%9F%8C%B3-lightgreen?style=for-the-badge)](https://offset.earth/treeware?gift-trees)
7
+ [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Lightweight,%20high%20performance%20calendar%20component%20based%20on%20Vue.js&url=https://github.com/ManukMinasyan/vue-functional-calendar&via=github&hashtags=vue,calendar,design,developers)
8
+
9
+ [![Build Status](https://travis-ci.org/ManukMinasyan/vue-functional-calendar.svg?branch=master)](https://travis-ci.org/ManukMinasyan/vue-functional-calendar)
10
+ [![Version](https://img.shields.io/npm/v/vue-functional-calendar.svg)](https://www.npmjs.com/package/vue-functional-calendar)
11
+ [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE)
12
+ [![Downloads](https://img.shields.io/npm/dt/vue-functional-calendar.svg)](https://www.npmjs.com/package/vue-functional-calendar)
13
+ ___
14
+ <a href="https://y3jnxov469.codesandbox.io/" target="_blank">Demo</a>
15
+ <br>
16
+ <a href="https://github.com/ManukMinasyan/vue-functional-calendar" target="_blank">Read the documentation</a>
17
+
18
+ <img src="https://raw.githubusercontent.com/ManukMinasyan/vue-functional-calendar/master/public/demo.png"/>
19
+
20
+ ___
21
+
22
+ * Lightweight, high-performance calendar component based on Vue.js
23
+ * Small memory usage, good performance, good style, and high scalability
24
+ * Native js development, no third-party library introduced
25
+ * Date Picker, Date Range, Multiple Calendars, Modal Calendar
26
+
27
+ ___
28
+
29
+ ## Install
30
+
31
+ ```
32
+ npm i vue-functional-calendar --save
33
+ ```
34
+ ___
35
+
36
+ ## Usage
37
+
38
+ ```javascript
39
+ // Introduced in vue file
40
+ import { FunctionalCalendar } from 'vue-functional-calendar';
41
+ ````
42
+
43
+
44
+ ## Treeware
45
+
46
+ You're free to use this package, but if it makes it to your production environment you are required to buy the world a tree.
47
+
48
+ It’s now common knowledge that one of the best tools to tackle the climate crisis and keep our temperatures from rising above 1.5C is to <a href="https://www.bbc.co.uk/news/science-environment-48870920">plant trees</a>. If you support this package and contribute to the Treeware forest you’ll be creating employment for local families and restoring wildlife habitats.
49
+
50
+ You can buy trees here [offset.earth/treeware](https://offset.earth/treeware?gift-trees)
51
+
52
+ Read more about Treeware at [treeware.earth](http://treeware.earth)
53
+
54
+ ## Sponsor
55
+ ![Scheduling API](https://user-images.githubusercontent.com/9488406/125080407-0dd25780-e0c5-11eb-9f70-ef958968674a.png)
56
+
57
+ This project is sponsored by **Spurwing**, where their API Makes Adding Scheduling Quick, Reliable and Scalable. Use Spurwing to build and integrate Scheduling, Booking & Calendar features in your project. Read more about Spurwing's [**Scheduling API**](https://www.spurwing.io/).
package/babel.config.js CHANGED
@@ -1,12 +1,12 @@
1
- // babel.config.js
2
- module.exports = {
3
- presets: [
4
- "@babel/preset-env",
5
- ['@vue/app', {
6
- polyfills: [
7
- 'es6.promise',
8
- 'es6.symbol'
9
- ]
10
- }]
11
- ]
12
- }
1
+ // babel.config.js
2
+ module.exports = {
3
+ presets: [
4
+ "@babel/preset-env",
5
+ ['@vue/app', {
6
+ polyfills: [
7
+ 'es6.promise',
8
+ 'es6.symbol'
9
+ ]
10
+ }]
11
+ ]
12
+ }