Skip to content

Commit 2c56e5f

Browse files
ManukMinasyanManukMinasyan
committed
New Calendar core, changed all structure and functions, optimze functions. and added new functions
0 parents  commit 2c56e5f

15 files changed

+1763
-0
lines changed

‎.gitignore

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.DS_Store
2+
node_modules
3+
/dist
4+
5+
# local env files
6+
.env.local
7+
.env.*.local
8+
9+
# Log files
10+
npm-debug.log*
11+
yarn-debug.log*
12+
yarn-error.log*
13+
yarn.lock
14+
package-lock.json
15+
16+
# Editor directories and files
17+
.idea
18+
.vscode
19+
*.suo
20+
*.ntvs*
21+
*.njsproj
22+
*.sln
23+
*.sw*

‎.travis.yml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
language: node_js
2+
node_js:
3+
- "stable"
4+
cache:
5+
directories:
6+
- "node_modules"

‎README.md

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
# VueJS Functional Calendar (Date Picker, Date Range)
2+
3+
[![Build Status](https://travis-ci.org/ManukMinasyan/vue-functional-calendar.svg?branch=master)](https://travis-ci.org/ManukMinasyan/vue-functional-calendar)
4+
[![Version](https://img.shields.io/npm/v/vue-functional-calendar.svg)](https://www.npmjs.com/package/vue-functional-calendar)
5+
[![Downloads](https://img.shields.io/npm/dm/vue-functional-calendar.svg)](https://www.npmjs.com/package/vue-functional-calendar)
6+
7+
## Demo
8+
9+
Demo: https://y3jnxov469.codesandbox.io/
10+
11+
[![Edit VueJS Functional Calendar Component](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/y3jnxov469?hidenavigation=1)
12+
13+
<img src="https://manukminasyan.github.io/vue-functional-calendar/public/demo.png"/>
14+
15+
#
16+
* Lightweight, high performance calendar component based on Vue.js
17+
* Small memory usage, good performance, good style, and high scalability
18+
* Native js development, no third-party library introduced
19+
* Date Picker, Date Range, Multiple Calendars, Modal Calendar
20+
21+
## Install
22+
23+
```
24+
npm i vue-functional-calendar --save
25+
```
26+
27+
## Usage
28+
29+
### Import Component
30+
```javascript
31+
// Introduced in vue file
32+
import FunctionalCalendar from 'vue-functional-calendar';
33+
````
34+
35+
### Component Settings
36+
````javascript
37+
export default {
38+
components: {
39+
FunctionalCalendar
40+
},
41+
data() {
42+
return {
43+
calendarData: {}
44+
}
45+
}
46+
}
47+
````
48+
49+
### Template Usage
50+
````html
51+
<FunctionalCalendar
52+
// v-model="calendarData"
53+
54+
// v-on:changedMonth="changedMonth"
55+
// v-on:changedYear="changedYear"
56+
57+
// :sundayStart="true"
58+
// :date-format="'dd/mm/yyyy'"
59+
// :is-date-range="true"
60+
// :is-date-picker="true"
61+
:...:
62+
></FunctionalCalendar>
63+
````
64+
65+
## Usage With Configs
66+
### Component Settings
67+
````javascript
68+
export default {
69+
components: {
70+
FunctionalCalendar
71+
},
72+
data() {
73+
return {
74+
calendarData: {},
75+
calendarConfigs: {
76+
sundayStart: false,
77+
dateFormat: 'dd/mm/yyyy',
78+
isDatePicker: false,
79+
isDateRange: false
80+
}
81+
}
82+
},
83+
}
84+
````
85+
86+
### Template Usage
87+
````html
88+
<FunctionalCalendar
89+
// v-model="calendarData"
90+
// :configs="calendarConfigs"
91+
></FunctionalCalendar>
92+
````
93+
94+
### A note on markDates
95+
The `markedDates` property **must** be in JavaScript Date format, e.g, no leading zeroes on month and days.
96+
97+
✅ Correct: 1/12/2019
98+
❎ Incorrect: 01/12/2019
99+
100+
## Available props
101+
| Prop | Type | Default | Example | Description |
102+
|-------------------------------|-----------------|-------------|-------------|------------------------------------------|
103+
| sundayStart | Boolean | false | true | Week start sunday |
104+
| newCurrentDate | Date | new Date() | new Date(2019,10,11) | Calendar Current Date |
105+
| limits | [Object, Boolean] | false | {min: '31/10/2019', max: '31/12/2019'} | Set calendar show, and marked dates limits. |
106+
| placeholder | [String, Boolean] | false | 'yyyy/mm/dd' | Date input placeholder |
107+
| dateFormat | String | 'dd/mm/yyyy' | 'yyyy/mm/dd' | Date formatting string |
108+
| leftAndRightDays | Boolean | true | false | Show or hide left and right days, prev or next months |
109+
| isDatePicker | Boolean | false | true | Enable or disable date picker |
110+
| isDateRange | Boolean | false | true | Enable or disable date range |
111+
| isMultiple | Boolean | false | true | Enable multiple calendar function |
112+
| calendarsCount | Number | 1 | 3 | Count of calendars, working only is prop isMultiple |
113+
| isModal | Boolean | false | true | Enable modal calendar function |
114+
| isTypeable | Boolean | false | true | Enable manually date typing function, working only with prop isModal |
115+
| changeMonthFunction | Boolean | false | true | Enable changed month with list, function |
116+
| changeYearFunction | Boolean | false | true | Enable changed year with list, function |
117+
| applyStylesheet | Boolean | true | false | Disable default styles |
118+
| markedDates | Array | [] | ['10/12/2018', '12/12/2018'] OR [{date: '10/1/2019', class: 'marked-class'},{date: '12/1/2019', class: 'marked-class-2'}] | Marked dates array |
119+
| markedDateRange | Object | {start: false, end: false} | {start: '12/12/2018', end: '20/12/2018'} | Marked date with range |
120+
| disabledDayNames | Array | [] | ['Su','We'] | Disabled Days Of Week |
121+
| disabledDates | Array | [] | ['24/12/2018','27/12/2018'] | Disabled Dates |
122+
| dayNames | Array | ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'] | ['Monday', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Sunday'] | Week Day Names |
123+
| 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 |
124+
125+
### Events
126+
127+
| Event | Output | Description |
128+
| :------------- | :------------- | :-----------------------------------------------------------:
129+
| changedMonth |Date | Month page has been changed
130+
| changedYear |Date | Year page has been changed
131+
| selectedDaysCount |Number | Get number of days between date range dates
132+
| opened | | The picker is opened
133+
| closed | | The picker is closed
134+
##### Add the ref attribute to the Calendar tab, exposing three methods to switch the month directly
135+
````javascript
136+
For example: <FunctionalCalendar ref="Calendar"></FunctionalCalendar>
137+
138+
✅ this.$refs.Calendar.PreMonth(); //Call method implementation to go to previous month
139+
✅ this.$refs.Calendar.NextMonth(); //Call method implementation to go to next month
140+
✅ this.$refs.Calendar.PreYear(); //Call method implementation to go to previous year
141+
✅ this.$refs.Calendar.NextYear(); //Call method implementation to go to next year
142+
✅ this.$refs.Calendar.ChooseDate('2018-12-12'); //Call method implementation to go to a date
143+
````
144+
145+
## Other
146+
* The following Demo.vue has a demo for reference.

‎babel.config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/app'
4+
]
5+
};

‎index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html style="height: 100%">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
7+
<title>app</title>
8+
</head>
9+
10+
<body>
11+
<div id="app"></div>
12+
<!-- built files will be auto injected -->
13+
</body>
14+
15+
</html>

‎index.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
// Import vue component
2+
import component from './src/components/FunctionalCalendar';
3+
4+
// Declaring an installation function performed by Vue.use ()
5+
export function install(Vue) {
6+
if (install.installed) return;
7+
install.installed = true;
8+
Vue.component('FunctionalCalendar', component);
9+
}
10+
11+
// Creating a module value for Vue.use ()
12+
const plugin = {
13+
install
14+
};
15+
16+
// Automatic installation when vue is found (for example, in the browser using the <script> tag)
17+
let GlobalVue = null;
18+
if (typeof window !== 'undefined') {
19+
GlobalVue = window.Vue;
20+
} else if (typeof global !== 'undefined') {
21+
GlobalVue = global.Vue;
22+
}
23+
if (GlobalVue) {
24+
GlobalVue.use(plugin);
25+
}
26+
27+
// Export component for use as a module (npm / webpack / etc.)
28+
export default component;

‎package.json

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
{
2+
"author": {
3+
"name": "Manuk Minasyan",
4+
"email": "manuk.minasyan1@gmail.com",
5+
"url": "https://github.com/ManukMinasyan"
6+
},
7+
"name": "vue-functional-calendar",
8+
"description": "A style-uninstallable datepicker component for Vue.js",
9+
"version": "2.0.0",
10+
"license": "ISC",
11+
"repository": {
12+
"type": "git",
13+
"url": "https://github.com/ManukMinasyan/vue-functional-calendar.git"
14+
},
15+
"keywords": [
16+
"vue",
17+
"calendar",
18+
"component",
19+
"vue-component",
20+
"functional",
21+
"date picker",
22+
"date range",
23+
"range",
24+
"multiple calendars",
25+
"multiple",
26+
"modal calendar",
27+
"modal",
28+
"inline",
29+
"date",
30+
"change month",
31+
"change year",
32+
"picker",
33+
"day",
34+
"month",
35+
"year",
36+
"time",
37+
"add",
38+
"cli",
39+
"command",
40+
"keys",
41+
"keyword",
42+
"keywords",
43+
"line",
44+
"package",
45+
"pkg"
46+
],
47+
"private": false,
48+
"main": "./index.js",
49+
"scripts": {
50+
"serve": "vue-cli-service serve",
51+
"build": "vue-cli-service build",
52+
"test": "npm run build",
53+
"build-bundle": "vue-cli-service build --target lib --name vueFunctionalCalendar ./src/main.js",
54+
"lint": "vue-cli-service lint"
55+
},
56+
"dependencies": {
57+
"babel-loader": "^8.0.4",
58+
"css-loader": "^1.0.1",
59+
"vue": "^2.5.18",
60+
"vue-style-loader": "^4.1.2"
61+
},
62+
"devDependencies": {
63+
"@babel/core": "^7.0.*",
64+
"@vue/cli-plugin-babel": "^3.0.5",
65+
"@vue/cli-plugin-eslint": "^3.0.5",
66+
"@vue/cli-service": "^3.0.5",
67+
"grunt": ">=0.4.0",
68+
"grunt-coveralls": "^2.0.0",
69+
"jest": "^16.0.1",
70+
"less": "^3.8.1",
71+
"less-loader": "^4.1.0",
72+
"mini-css-extract-plugin": "^0.4.5",
73+
"node-sass": "^4.9.4",
74+
"sass-loader": "^7.1.0",
75+
"sass-resources-loader": "^1.3.4",
76+
"stylus": "^0.54.5",
77+
"stylus-loader": "^3.0.2",
78+
"thread-loader": "^1.2.0",
79+
"vue-template-compiler": "^2.5.17"
80+
},
81+
"eslintConfig": {
82+
"root": true,
83+
"env": {
84+
"node": true
85+
},
86+
"extends": [
87+
"plugin:vue/essential",
88+
"eslint:recommended"
89+
],
90+
"rules": {},
91+
"parserOptions": {
92+
"parser": "babel-eslint"
93+
}
94+
},
95+
"postcss": {
96+
"plugins": {
97+
"autoprefixer": {}
98+
}
99+
},
100+
"browserslist": [
101+
"> 1%",
102+
"last 2 versions",
103+
"not ie <= 8"
104+
]
105+
}

‎public/demo.png

7.88 KB
Loading

0 commit comments

Comments
 (0)