New Calendar core, changed all structure and functions, optimze funct…

…ions. and added new functions

.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+yarn.lock
+package-lock.json
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*

.travis.yml

@@ -0,0 +1,6 @@
+language: node_js
+node_js:
+- "stable"
+cache:
+  directories:
+  - "node_modules"

README.md

@@ -0,0 +1,146 @@
+# VueJS Functional Calendar (Date Picker, Date Range)
+
+[![Build Status](https://travis-ci.org/ManukMinasyan/vue-functional-calendar.svg?branch=master)](https://travis-ci.org/ManukMinasyan/vue-functional-calendar)
+[![Version](https://img.shields.io/npm/v/vue-functional-calendar.svg)](https://www.npmjs.com/package/vue-functional-calendar)
+[![Downloads](https://img.shields.io/npm/dm/vue-functional-calendar.svg)](https://www.npmjs.com/package/vue-functional-calendar)
+
+## Demo
+
+Demo: https://y3jnxov469.codesandbox.io/
+
+[![Edit VueJS Functional Calendar Component](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/y3jnxov469?hidenavigation=1)
+
+<img src="https://manukminasyan.github.io/vue-functional-calendar/public/demo.png"/>
+
+#
+* Lightweight, high performance calendar component based on Vue.js
+* Small memory usage, good performance, good style, and high scalability
+* Native js development, no third-party library introduced
+* Date Picker, Date Range, Multiple Calendars, Modal Calendar
+
+## Install
+
+```
+npm i vue-functional-calendar --save
+```
+
+## Usage
+
+### Import Component
+```javascript
+// Introduced in vue file
+import FunctionalCalendar from 'vue-functional-calendar';
+````
+
+### Component Settings
+````javascript
+export default {
+    components: {
+        FunctionalCalendar
+    },
+    data() {
+        return {
+            calendarData: {}
+        }
+    }
+}
+````
+
+### Template Usage
+````html
+<FunctionalCalendar
+      // v-model="calendarData"
+
+      // v-on:changedMonth="changedMonth"
+      // v-on:changedYear="changedYear"
+
+      // :sundayStart="true"
+      // :date-format="'dd/mm/yyyy'"
+      // :is-date-range="true"
+      // :is-date-picker="true"      
+       :...:
+></FunctionalCalendar>
+````
+
+## Usage With Configs
+### Component Settings
+````javascript
+export default {
+    components: {
+        FunctionalCalendar
+    },
+    data() {
+        return {
+            calendarData: {},
+            calendarConfigs: {
+                sundayStart: false,
+                dateFormat: 'dd/mm/yyyy',
+                isDatePicker: false,
+                isDateRange: false
+            }
+        }
+    },
+}
+````
+
+### Template Usage   
+````html
+<FunctionalCalendar
+      // v-model="calendarData"
+      // :configs="calendarConfigs"
+></FunctionalCalendar>
+````
+
+### A note on markDates
+The `markedDates` property **must** be in JavaScript Date format, e.g, no leading zeroes on month and days. 
+
+✅ Correct: 1/12/2019
+❎ Incorrect: 01/12/2019
+
+## Available props
+| Prop                          | Type            | Default     | Example     | Description                              |
+|-------------------------------|-----------------|-------------|-------------|------------------------------------------|             
+| sundayStart                   | Boolean         | false       | true        | Week start sunday                       |
+| newCurrentDate                   | Date         | new Date()       | new Date(2019,10,11)        | Calendar Current Date                       |
+| limits                   | [Object, Boolean]         | false       | {min: '31/10/2019', max: '31/12/2019'}        | Set calendar show, and marked dates limits.                       |
+| placeholder                   | [String, Boolean]         | false       | 'yyyy/mm/dd'        | Date input placeholder                       |
+| dateFormat                   | String         | 'dd/mm/yyyy'       | 'yyyy/mm/dd'        | Date formatting string                       |
+| leftAndRightDays                   | Boolean         | true       | false        | Show or hide left and right days, prev or next months                       |
+| isDatePicker                   | Boolean         | false       | true        | Enable or disable date picker                     |
+| isDateRange                   | Boolean         | false       | true        | Enable or disable date range                     |
+| isMultiple                   | Boolean         | false       | true        | Enable multiple calendar function                     |
+| calendarsCount                   | Number         | 1       | 3        | Count of calendars, working only is prop isMultiple                    |
+| isModal                   | Boolean         | false       | true        | Enable modal calendar function                    |
+| isTypeable                   | Boolean         | false       | true        | Enable manually date typing function, working only with prop isModal                     |
+| changeMonthFunction                   | Boolean         | false       | true        | Enable changed month with list, function                   |
+| changeYearFunction                   | Boolean         | false       | true        | Enable changed year with list, function                   |
+| applyStylesheet                   | Boolean         | true       | false        | Disable default styles                   |
+| 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                   |
+| markedDateRange                   | Object         | {start: false, end: false}       | {start: '12/12/2018', end: '20/12/2018'}        | Marked date with range                   |
+| disabledDayNames                   | Array         | []     | ['Su','We']        | Disabled Days Of Week                   |
+| disabledDates                   | Array         | []     | ['24/12/2018','27/12/2018']        | Disabled Dates                   |
+| dayNames                   | Array         | ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']       | ['Monday', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Sunday']        | Week Day Names                   |
+| 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                   |
+
+### Events
+
+| Event          | Output       | Description                                                        |
+| :------------- | :------------- | :-----------------------------------------------------------: 
+| changedMonth |Date | Month page has been changed
+| changedYear |Date | Year page has been changed
+| selectedDaysCount |Number | Get number of days between date range dates
+| opened | | The picker is opened
+| closed | | The picker is closed
+##### Add the ref attribute to the Calendar tab, exposing three methods to switch the month directly
+````javascript
+For example: <FunctionalCalendar ref="Calendar"></FunctionalCalendar>
+
+    ✅ this.$refs.Calendar.PreMonth();  //Call method implementation to go to previous month
+    ✅ this.$refs.Calendar.NextMonth(); //Call method implementation to go to next month
+    ✅ this.$refs.Calendar.PreYear(); //Call method implementation to go to previous year
+    ✅ this.$refs.Calendar.NextYear(); //Call method implementation to go to next year
+    ✅ this.$refs.Calendar.ChooseDate('2018-12-12'); //Call method implementation to go to a date
+````
+
+## Other
+* The following Demo.vue has a demo for reference.

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+};

index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html style="height: 100%">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
+    <title>app</title>
+</head>
+
+<body>
+<div id="app"></div>
+<!-- built files will be auto injected -->
+</body>
+
+</html>

index.js

@@ -0,0 +1,28 @@
+// Import vue component
+import component from './src/components/FunctionalCalendar';
+
+// Declaring an installation function performed by Vue.use ()
+export function install(Vue) {
+    if (install.installed) return;
+    install.installed = true;
+    Vue.component('FunctionalCalendar', component);
+}
+
+// Creating a module value for Vue.use ()
+const plugin = {
+    install
+};
+
+// Automatic installation when vue is found (for example, in the browser using the <script> tag)
+let GlobalVue = null;
+if (typeof window !== 'undefined') {
+    GlobalVue = window.Vue;
+} else if (typeof global !== 'undefined') {
+    GlobalVue = global.Vue;
+}
+if (GlobalVue) {
+    GlobalVue.use(plugin);
+}
+
+// Export component for use as a module (npm / webpack / etc.)
+export default component;

package.json

@@ -0,0 +1,105 @@
+{
+  "author": {
+    "name": "Manuk Minasyan",
+    "email": "manuk.minasyan1@gmail.com",
+    "url": "https://github.com/ManukMinasyan"
+  },
+  "name": "vue-functional-calendar",
+  "description": "A style-uninstallable datepicker component for Vue.js",
+  "version": "2.0.0",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ManukMinasyan/vue-functional-calendar.git"
+  },
+  "keywords": [
+    "vue",
+    "calendar",
+    "component",
+    "vue-component",
+    "functional",
+    "date picker",
+    "date range",
+    "range",
+    "multiple calendars",
+    "multiple",
+    "modal calendar",
+    "modal",
+    "inline",
+    "date",
+    "change month",
+    "change year",
+    "picker",
+    "day",
+    "month",
+    "year",
+    "time",
+    "add",
+    "cli",
+    "command",
+    "keys",
+    "keyword",
+    "keywords",
+    "line",
+    "package",
+    "pkg"
+  ],
+  "private": false,
+  "main": "./index.js",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "test": "npm run build",
+    "build-bundle": "vue-cli-service build --target lib --name vueFunctionalCalendar ./src/main.js",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "babel-loader": "^8.0.4",
+    "css-loader": "^1.0.1",
+    "vue": "^2.5.18",
+    "vue-style-loader": "^4.1.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.*",
+    "@vue/cli-plugin-babel": "^3.0.5",
+    "@vue/cli-plugin-eslint": "^3.0.5",
+    "@vue/cli-service": "^3.0.5",
+    "grunt": ">=0.4.0",
+    "grunt-coveralls": "^2.0.0",
+    "jest": "^16.0.1",
+    "less": "^3.8.1",
+    "less-loader": "^4.1.0",
+    "mini-css-extract-plugin": "^0.4.5",
+    "node-sass": "^4.9.4",
+    "sass-loader": "^7.1.0",
+    "sass-resources-loader": "^1.3.4",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.2",
+    "thread-loader": "^1.2.0",
+    "vue-template-compiler": "^2.5.17"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "rules": {},
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}