5
5
[ ![ Software License] ( https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square )] ( LICENSE.md )
6
6
[ ![ Downloads] ( https://img.shields.io/npm/dm/vue-functional-calendar.svg )] ( https://www.npmjs.com/package/vue-functional-calendar )
7
7
![ gzip size] ( https://img.shields.io/badge/gzip%20size-5.73%20kB-44cc11.svg )
8
+ ___
8
9
9
10
## Demo
10
11
@@ -15,7 +16,8 @@ Demo: https://y3jnxov469.codesandbox.io/
15
16
16
17
<img src =" https://manukminasyan.github.io/vue-functional-calendar/public/demo.png " />
17
18
18
- #
19
+ ___
20
+
19
21
* Lightweight, high-performance calendar component based on Vue.js
20
22
* Small memory usage, good performance, good style, and high scalability
21
23
* Native js development, no third-party library introduced
36
38
```
37
39
npm i vue-functional-calendar --save
38
40
```
41
+ ___
39
42
40
43
## Usage
41
44
@@ -74,6 +77,7 @@ export default {
74
77
: ... :
75
78
>< / FunctionalCalendar>
76
79
````
80
+ ___
77
81
78
82
## Usage With Configs
79
83
### Component Settings
@@ -103,12 +107,14 @@ export default {
103
107
// :configs="calendarConfigs"
104
108
>< / FunctionalCalendar>
105
109
````
110
+ ___
106
111
107
112
### A note on markDates
108
113
The ` markedDates` property ** must** be in JavaScript Date format, e .g , no leading zeroes on month and days.
109
114
110
115
✅ Correct: 1 / 12 / 2019
111
116
❎ Incorrect: 01 / 12 / 2019
117
+ ___
112
118
113
119
## Available props
114
120
| Prop | Type | Default | Example | Description |
@@ -135,6 +141,7 @@ The `markedDates` property **must** be in JavaScript Date format, e.g, no leadin
135
141
| dayNames | Array | ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'] | ['Monday', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Sunday'] | Week Day Names |
136
142
| 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 |
137
143
| transition | Boolean | true | false | Calendar animations |
144
+ ___
138
145
139
146
### Events
140
147
@@ -155,6 +162,7 @@ For example: <FunctionalCalendar ref="Calendar"></FunctionalCalendar>
155
162
✅ this.$refs.Calendar.NextYear(); // Call method implementation to go to next year
156
163
✅ this.$refs.Calendar.ChooseDate('2018-12-12'); // Call method implementation to go to a date
157
164
````
165
+ ___
158
166
159
167
## Other
160
168
* The following Demo.vue has a demo for reference.
0 commit comments