vue-functional-calendar 2.9.7 → 2.9.92
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/.github/README.md +215 -0
- package/README.md +2 -7
- package/dist/FunctionalCalendar.common.js +12 -7
- package/dist/FunctionalCalendar.common.js.map +1 -1
- package/dist/FunctionalCalendar.umd.js +12 -7
- package/dist/FunctionalCalendar.umd.js.map +1 -1
- package/dist/FunctionalCalendar.umd.min.js +1 -1
- package/dist/FunctionalCalendar.umd.min.js.map +1 -1
- package/index.js +1 -1
- package/package.json +1 -1
- package/src/components/FunctionalCalendar.vue +10 -8
|
@@ -0,0 +1,215 @@
|
|
|
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
|
+
[](https://offset.earth/treeware?gift-trees)
|
|
7
|
+
|
|
8
|
+
[](https://travis-ci.org/ManukMinasyan/vue-functional-calendar)
|
|
9
|
+
[](https://www.npmjs.com/package/vue-functional-calendar)
|
|
10
|
+
[](LICENSE)
|
|
11
|
+
[](https://www.npmjs.com/package/vue-functional-calendar)
|
|
12
|
+
___
|
|
13
|
+
## Demo
|
|
14
|
+
|
|
15
|
+
Demo: <a href="https://y3jnxov469.codesandbox.io/" target="_blank">https://y3jnxov469.codesandbox.io/</a>
|
|
16
|
+
|
|
17
|
+
[](https://codesandbox.io/s/980jov4m4p?fontsize=14&hidenavigation=1)
|
|
18
|
+
|
|
19
|
+
<img src="https://raw.githubusercontent.com/ManukMinasyan/vue-functional-calendar/master/public/demo.png"/>
|
|
20
|
+
|
|
21
|
+
___
|
|
22
|
+
|
|
23
|
+
* Lightweight, high-performance calendar component based on Vue.js
|
|
24
|
+
* Small memory usage, good performance, good style, and high scalability
|
|
25
|
+
* Native js development, no third-party library introduced
|
|
26
|
+
* Date Picker, Date Range, Multiple Calendars, Modal Calendar
|
|
27
|
+
|
|
28
|
+
___
|
|
29
|
+
|
|
30
|
+
## Browser Support
|
|
31
|
+
 |  |  |  |  |  |
|
|
32
|
+
--- | --- | --- | --- | --- | --- |
|
|
33
|
+
39+ ✔ | 28+ ✔ | 10.1+ ✔ | 27+ ✔ | 15+ ✔ | Latest ✔ |
|
|
34
|
+
|
|
35
|
+
___
|
|
36
|
+
|
|
37
|
+
## Install
|
|
38
|
+
|
|
39
|
+
```
|
|
40
|
+
npm i vue-functional-calendar --save
|
|
41
|
+
```
|
|
42
|
+
___
|
|
43
|
+
|
|
44
|
+
## Usage
|
|
45
|
+
|
|
46
|
+
### Vue.use()
|
|
47
|
+
|
|
48
|
+
```javascript
|
|
49
|
+
// Introduced in vue file
|
|
50
|
+
import FunctionalCalendar from 'vue-functional-calendar';
|
|
51
|
+
Vue.use(FunctionalCalendar, {
|
|
52
|
+
dayNames: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
|
|
53
|
+
});
|
|
54
|
+
````
|
|
55
|
+
|
|
56
|
+
### Import Component
|
|
57
|
+
```javascript
|
|
58
|
+
// Introduced in vue file
|
|
59
|
+
import { FunctionalCalendar } from 'vue-functional-calendar';
|
|
60
|
+
````
|
|
61
|
+
|
|
62
|
+
### Component Settings
|
|
63
|
+
````javascript
|
|
64
|
+
export default {
|
|
65
|
+
components: {
|
|
66
|
+
FunctionalCalendar
|
|
67
|
+
},
|
|
68
|
+
data() {
|
|
69
|
+
return {
|
|
70
|
+
calendarData: {}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
````
|
|
75
|
+
|
|
76
|
+
### Template Usage
|
|
77
|
+
````html
|
|
78
|
+
<FunctionalCalendar
|
|
79
|
+
// v-model="calendarData"
|
|
80
|
+
|
|
81
|
+
// v-on:changedMonth="changedMonth"
|
|
82
|
+
// v-on:changedYear="changedYear"
|
|
83
|
+
|
|
84
|
+
// :sundayStart="true"
|
|
85
|
+
// :date-format="'dd/mm/yyyy'"
|
|
86
|
+
// :is-date-range="true"
|
|
87
|
+
// :is-date-picker="true"
|
|
88
|
+
:...:
|
|
89
|
+
></FunctionalCalendar>
|
|
90
|
+
````
|
|
91
|
+
___
|
|
92
|
+
|
|
93
|
+
## Usage With Configs
|
|
94
|
+
### Component Settings
|
|
95
|
+
````javascript
|
|
96
|
+
export default {
|
|
97
|
+
components: {
|
|
98
|
+
FunctionalCalendar
|
|
99
|
+
},
|
|
100
|
+
data() {
|
|
101
|
+
return {
|
|
102
|
+
calendarData: {},
|
|
103
|
+
calendarConfigs: {
|
|
104
|
+
sundayStart: false,
|
|
105
|
+
dateFormat: 'dd/mm/yyyy',
|
|
106
|
+
isDatePicker: false,
|
|
107
|
+
isDateRange: false
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
},
|
|
111
|
+
}
|
|
112
|
+
````
|
|
113
|
+
|
|
114
|
+
### Template Usage
|
|
115
|
+
````html
|
|
116
|
+
<FunctionalCalendar
|
|
117
|
+
// v-model="calendarData"
|
|
118
|
+
// :configs="calendarConfigs"
|
|
119
|
+
></FunctionalCalendar>
|
|
120
|
+
````
|
|
121
|
+
___
|
|
122
|
+
|
|
123
|
+
### A note on markDates
|
|
124
|
+
The `markedDates` property **must** be in JavaScript Date format, e.g, no leading zeroes on month and days.
|
|
125
|
+
|
|
126
|
+
✅ Correct: 1/12/2019
|
|
127
|
+
❎ Incorrect: 01/12/2019
|
|
128
|
+
___
|
|
129
|
+
|
|
130
|
+
## Available props
|
|
131
|
+
| Prop | Type | Default | Example | Description |
|
|
132
|
+
|-------------------------------|-----------------|-------------|-------------|------------------------------------------|
|
|
133
|
+
| sundayStart | Boolean | false | true | Week start sunday |
|
|
134
|
+
| newCurrentDate | Date | new Date() | new Date(2019,10,11) | Calendar Current Date |
|
|
135
|
+
| limits | [Object, Boolean] | false | {min: '31/10/2019', max: '31/12/2019'} | Set calendar show, and marked dates limits. |
|
|
136
|
+
| minSelDays | [Number, Boolean] | false | 3 | Set minimum selected days count. |
|
|
137
|
+
| maxSelDays | [Number, Boolean] | false | 10 | Set maximum selected days count. |
|
|
138
|
+
| placeholder | [String, Boolean] | false | 'yyyy/mm/dd' | Date input placeholder |
|
|
139
|
+
| dateFormat | String | 'dd/mm/yyyy' | 'yyyy/mm/dd' | Date formatting string |
|
|
140
|
+
| isDatePicker | Boolean | false | true | Enable or disable date picker |
|
|
141
|
+
| isMultipleDatePicker | Boolean | false | true | Enable or disable multiple date picker |
|
|
142
|
+
| isMultipleDateRange | Boolean | false | true | Enable or disable multiple date range |
|
|
143
|
+
| isDateRange | Boolean | false | true | Enable or disable date range |
|
|
144
|
+
| withTimePicker | Boolean | false | true | Enable or disable time picker |
|
|
145
|
+
| isMultiple | Boolean | false | true | Enable multiple calendar function |
|
|
146
|
+
| calendarsCount | Number | 1 | 3 | Count of calendars, working only is prop isMultiple |
|
|
147
|
+
| isSeparately | Boolean | false | true | Enable separately calendars |
|
|
148
|
+
| isModal | Boolean | false | true | Enable modal calendar function |
|
|
149
|
+
| isAutoCloseable | Boolean | false | true | Hide picker(calendar) if date has been selected |
|
|
150
|
+
| isTypeable | Boolean | false | true | Enable manually date typing function, working only with prop isModal |
|
|
151
|
+
| changeMonthFunction | Boolean | false | true | Enable changed month with list, function |
|
|
152
|
+
| changeYearFunction | Boolean | false | true | Enable changed year with list, function |
|
|
153
|
+
| changeYearStep | Number | 12 | 6 | Change year list step count |
|
|
154
|
+
| changeMonthStep | Number | 1 | 3 | How many months to jump forward with NextMonth() |
|
|
155
|
+
| 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 |
|
|
156
|
+
| 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 |
|
|
157
|
+
| disabledDayNames | Array | [] | ['Su','We'] | Disabled Days Of Week |
|
|
158
|
+
| disabledDates | Array | [] | ['24/12/2020','27/12/2020'] **OR** ['beforeToday', 'afterToday', '24/12/2020','27/12/2020'] | Disabled Dates |
|
|
159
|
+
| enabledDates | Array | [] | ['24/12/2020','27/12/2020'] | Reversal of Disabled Dates |
|
|
160
|
+
| dayNames | Array | ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'] | ['Monday', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Sunday'] | Week Day Names |
|
|
161
|
+
| 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 |
|
|
162
|
+
| 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 |
|
|
163
|
+
| showWeekNumbers | Boolean | false | true | Display week numbers. |
|
|
164
|
+
| transition | Boolean | true | false | Calendar animations |
|
|
165
|
+
| hiddenElements | Array | [] | ['dayNames', 'navigationArrows', 'leftAndRightDays', 'month'] | Hide calendar elements |
|
|
166
|
+
| titlePosition | String | center | left, right, center | Set title position |
|
|
167
|
+
| arrowsPosition | String | space-between | left, right, space-between | Set arrows position |
|
|
168
|
+
| isDark | Boolean | false | true | Dark theme |
|
|
169
|
+
| isLayoutExpandable | Boolean | false | true | Enable expanding the calendar layout |
|
|
170
|
+
| alwaysUseDefaultClasses | Boolean | false | true | Always add default classes to Day element, even when overriding with a slot |
|
|
171
|
+
___
|
|
172
|
+
|
|
173
|
+
### Slots
|
|
174
|
+
| Name | Description | Props |
|
|
175
|
+
| :------------- | :------------- | :-----------------------------------------------------------:
|
|
176
|
+
| Default |Default slot responsible for the day component | {week: Object, day: Object}
|
|
177
|
+
| datePickerInput |This slot responsible for the modal date picker input | {selectedDate: String, isTypeable: Boolean}
|
|
178
|
+
| dateRangeInputs |This slot responsible for the modal date range inputs | {startDate: String, endDate: String, isTypeable: Boolean}
|
|
179
|
+
| footer |This slot responsible for the calendar footer | {}
|
|
180
|
+
|
|
181
|
+
### Events
|
|
182
|
+
|
|
183
|
+
| Event | Output | Description |
|
|
184
|
+
| :------------- | :------------- | :-----------------------------------------------------------:
|
|
185
|
+
| dayClicked |Object | Get clicked day object
|
|
186
|
+
| choseDay |Object | Get the object of the selected day
|
|
187
|
+
| changedMonth |Date | Month page has been changed
|
|
188
|
+
| changedYear |Date | Year page has been changed
|
|
189
|
+
| selectedDaysCount |Number | Get number of days between date range dates
|
|
190
|
+
| dayMouseOver |Date | Mouse over day
|
|
191
|
+
| opened | | The picker is opened
|
|
192
|
+
| closed | | The picker is closed
|
|
193
|
+
|
|
194
|
+
##### Add the ref attribute to the calendar component and use these methods to do more.
|
|
195
|
+
````javascript
|
|
196
|
+
For example: <FunctionalCalendar ref="Calendar"></FunctionalCalendar>
|
|
197
|
+
|
|
198
|
+
✅ this.$refs.Calendar.PreMonth(); //Call method implementation to go to previous month
|
|
199
|
+
✅ this.$refs.Calendar.NextMonth(); //Call method implementation to go to next month
|
|
200
|
+
✅ this.$refs.Calendar.PreYear(); //Call method implementation to go to previous year
|
|
201
|
+
✅ this.$refs.Calendar.NextYear(); //Call method implementation to go to next year
|
|
202
|
+
✅ this.$refs.Calendar.ChooseDate('today'); //Call method implementation to go to today
|
|
203
|
+
✅ this.$refs.Calendar.ChooseDate('25/09/2020'); //Call method implementation to go to a date
|
|
204
|
+
````
|
|
205
|
+
___
|
|
206
|
+
|
|
207
|
+
## Treeware
|
|
208
|
+
|
|
209
|
+
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.
|
|
210
|
+
|
|
211
|
+
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.
|
|
212
|
+
|
|
213
|
+
You can buy trees here [offset.earth/treeware](https://offset.earth/treeware?gift-trees)
|
|
214
|
+
|
|
215
|
+
Read more about Treeware at [treeware.earth](http://treeware.earth)
|
package/README.md
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
___
|
|
14
14
|
<a href="https://y3jnxov469.codesandbox.io/" target="_blank">Demo</a>
|
|
15
15
|
<br>
|
|
16
|
-
<a href="https://github.com/ManukMinasyan/vue-functional-calendar"
|
|
16
|
+
<a href="https://github.com/ManukMinasyan/vue-functional-calendar" target="_blank">Read the documentation</a>
|
|
17
17
|
|
|
18
18
|
<img src="https://raw.githubusercontent.com/ManukMinasyan/vue-functional-calendar/master/public/demo.png"/>
|
|
19
19
|
|
|
@@ -49,9 +49,4 @@ It’s now common knowledge that one of the best tools to tackle the climate cri
|
|
|
49
49
|
|
|
50
50
|
You can buy trees here [offset.earth/treeware](https://offset.earth/treeware?gift-trees)
|
|
51
51
|
|
|
52
|
-
Read more about Treeware at [treeware.earth](http://treeware.earth)
|
|
53
|
-
|
|
54
|
-
## Sponsor
|
|
55
|
-
|
|
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/).
|
|
52
|
+
Read more about Treeware at [treeware.earth](http://treeware.earth)
|
|
@@ -4516,7 +4516,7 @@ if (typeof window !== 'undefined') {
|
|
|
4516
4516
|
// Indicate to webpack that this file can be concatenated
|
|
4517
4517
|
/* harmony default export */ var setPublicPath = (null);
|
|
4518
4518
|
|
|
4519
|
-
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"b737400a-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/FunctionalCalendar.vue?vue&type=template&id=
|
|
4519
|
+
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"b737400a-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/FunctionalCalendar.vue?vue&type=template&id=4c93d1a3&
|
|
4520
4520
|
var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"popoverElement",staticClass:"vfc-popover-container",attrs:{"tabindex":"0"}},[_c('PickerInputs',{attrs:{"fConfigs":_vm.fConfigs,"singleSelectedDate":_vm.singleSelectedDate,"calendar":_vm.calendar},scopedSlots:_vm._u([{key:"dateRangeInputs",fn:function(props){return [_vm._t("dateRangeInputs",null,{"startDate":props.startDate,"endDate":props.endDate,"isTypeable":_vm.fConfigs.isTypeable})]}},{key:"datePickerInput",fn:function(props){return [_vm._t("datePickerInput",null,{"selectedDate":props.selectedDate,"isTypeable":_vm.fConfigs.isTypeable})]}}],null,true)}),_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.showCalendar),expression:"showCalendar"}],ref:"mainContainer",staticClass:"vfc-main-container",class:{
|
|
4521
4521
|
'vfc-modal':
|
|
4522
4522
|
_vm.fConfigs.isModal &&
|
|
@@ -4543,7 +4543,7 @@ var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._sel
|
|
|
4543
4543
|
var staticRenderFns = []
|
|
4544
4544
|
|
|
4545
4545
|
|
|
4546
|
-
// CONCATENATED MODULE: ./src/components/FunctionalCalendar.vue?vue&type=template&id=
|
|
4546
|
+
// CONCATENATED MODULE: ./src/components/FunctionalCalendar.vue?vue&type=template&id=4c93d1a3&
|
|
4547
4547
|
|
|
4548
4548
|
// EXTERNAL MODULE: ./node_modules/core-js/modules/es6.object.assign.js
|
|
4549
4549
|
var es6_object_assign = __webpack_require__("f751");
|
|
@@ -7792,6 +7792,8 @@ var hUniqueID = function hUniqueID() {
|
|
|
7792
7792
|
this.updateCalendar();
|
|
7793
7793
|
},
|
|
7794
7794
|
pickYear: function pickYear(year, calendarKey) {
|
|
7795
|
+
var _this5 = this;
|
|
7796
|
+
|
|
7795
7797
|
this.showYearPicker = false;
|
|
7796
7798
|
|
|
7797
7799
|
if (!this.isSeparately) {
|
|
@@ -7799,12 +7801,15 @@ var hUniqueID = function hUniqueID() {
|
|
|
7799
7801
|
var date = currentCalendar.date;
|
|
7800
7802
|
currentCalendar.date = new Date(year, date.getMonth() + 1, 0);
|
|
7801
7803
|
currentCalendar.key += hUniqueID();
|
|
7804
|
+
|
|
7805
|
+
_this5.$emit('changedYear', currentCalendar.date);
|
|
7802
7806
|
});
|
|
7803
7807
|
} else {
|
|
7804
7808
|
var currentCalendar = this.listCalendars[calendarKey];
|
|
7805
7809
|
var date = currentCalendar.date;
|
|
7806
7810
|
currentCalendar.date = new Date(year, date.getMonth() + 1, 0);
|
|
7807
7811
|
currentCalendar.key += hUniqueID();
|
|
7812
|
+
this.$emit('changedYear', currentCalendar.date);
|
|
7808
7813
|
}
|
|
7809
7814
|
|
|
7810
7815
|
this.updateCalendar();
|
|
@@ -7921,19 +7926,19 @@ var hUniqueID = function hUniqueID() {
|
|
|
7921
7926
|
}
|
|
7922
7927
|
},
|
|
7923
7928
|
hideMonthYearPicker: function hideMonthYearPicker(e) {
|
|
7924
|
-
var
|
|
7929
|
+
var _this6 = this;
|
|
7925
7930
|
|
|
7926
7931
|
this.$nextTick(function () {
|
|
7927
|
-
if (
|
|
7928
|
-
var key =
|
|
7932
|
+
if (_this6.showMonthPicker || _this6.showYearPicker) {
|
|
7933
|
+
var key = _this6.showMonthPicker ? _this6.showMonthPicker - 1 : _this6.showYearPicker - 1;
|
|
7929
7934
|
|
|
7930
|
-
var MYactive =
|
|
7935
|
+
var MYactive = _this6.$refs.calendars.querySelectorAll(".vfc-content-MY-picker")[key];
|
|
7931
7936
|
|
|
7932
7937
|
if (MYactive.contains(e.target)) {
|
|
7933
7938
|
return;
|
|
7934
7939
|
}
|
|
7935
7940
|
|
|
7936
|
-
return
|
|
7941
|
+
return _this6.showMonthPicker = _this6.showYearPicker = false;
|
|
7937
7942
|
}
|
|
7938
7943
|
});
|
|
7939
7944
|
},
|