├── .github
    └── FUNDING.yml
├── .gitignore
├── LICENSE
├── README.md
├── babel.config.js
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    └── prev.png
├── src
    ├── App.vue
    ├── assets
    │   ├── logo.png
    │   ├── preview.png
    │   └── style.css
    ├── components
    │   └── Schedule.vue
    ├── main.js
    └── plugin.js
├── tests
    └── unit
    │   └── example.spec.js
└── yarn.lock


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
 1 | # These are supported funding model platforms
 2 | 
 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
 4 | patreon: # Replace with a single Patreon username
 5 | open_collective: # Replace with a single Open Collective username
 6 | ko_fi: burhanahmeed
 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
 9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | otechie: # Replace with a single Otechie username
12 | custom: ['https://karyakarsa.com/burhanahmeed', 'https://www.buymeacoffee.com/zOkT07A']
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # netbeans
 6 | /nbproject
 7 | 
 8 | # local env files
 9 | .env.local
10 | .env.*.local
11 | 
12 | # Log files
13 | npm-debug.log*
14 | yarn-debug.log*
15 | yarn-error.log*
16 | pnpm-debug.log*
17 | 
18 | # Editor directories and files
19 | .idea
20 | .vscode
21 | *.suo
22 | *.ntvs*
23 | *.njsproj
24 | *.sln
25 | *.sw?
26 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Burhanuddin Ahmed
 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.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue daily scheduler
  2 | 
  3 | <div align='center'>
  4 | 
  5 | [![VEDR](./src/assets/preview.png)](.)
  6 | 
  7 | Vue daily scheduler is a custom Vue2 component to manage repeated schedule. It's a straightforward scheduler component you can use.
  8 | 
  9 | </div>
 10 | 
 11 | [![GitHub forks](https://img.shields.io/github/forks/initbase/vue-daily-schedule)](https://github.com/initbase/vue-daily-schedule/network)
 12 | [![GitHub stars](https://img.shields.io/github/stars/initbase/vue-daily-schedule)](https://github.com/initbase/vue-daily-schedule/stargazers)
 13 | [![GitHub license](https://img.shields.io/github/license/initbase/vue-daily-schedule)](https://github.com/initbase/vue-daily-schedule/blob/master/LICENSE)
 14 | [![GitHub issues](https://img.shields.io/github/issues/initbase/vue-daily-schedule)](https://github.com/initbase/vue-daily-schedule/issues)
 15 | 
 16 | ### Demo
 17 | 
 18 | [Demo here](https://vue-daily-schedule.vercel.app/)
 19 | 
 20 | [NPMJS](https://www.npmjs.com/package/vue-daily-scheduler)
 21 | 
 22 | ### Install
 23 | Node
 24 | ```
 25 | npm install vue-daily-scheduler
 26 | 
 27 | # or yarn
 28 | 
 29 | yarn add vue-daily-scheduler
 30 | ```
 31 | Browser
 32 | ```html
 33 | <link href="https://unpkg.com/vue-daily-scheduler@latest/dist/vue-schedule.min.css" ref="stylesheet" />
 34 | <script src="https://unpkg.com/vue-daily-scheduler@latest/dist/vue-schedule.min.js"></script>
 35 | ```
 36 | 
 37 | then, use inside a component
 38 | ```javascript
 39 | import 'vue-daily-scheduler/dist/vue-schedule.min.css'
 40 | import VueSchedule from 'vue-daily-scheduler'
 41 | export default {
 42 |     components: {
 43 |         VueSchedule
 44 |     },
 45 |     data () {
 46 |         return {
 47 |             schedule: {
 48 |                 0: [],
 49 |                 1: [],
 50 |                 2: [],
 51 |                 3: [],
 52 |                 4: [],
 53 |                 5: [],
 54 |                 6: []
 55 |             }
 56 |         }
 57 |     }
 58 | }
 59 | ```
 60 | use it inside vue template
 61 | ```html
 62 | <template>
 63 |     <div>
 64 |         <VueSchedule v-model="schedule" />
 65 |     </div>
 66 | </template>
 67 | ```
 68 | 
 69 | ### Props
 70 | |Props|Desc|Type|Default|
 71 | |---|---|---|---|
 72 | |`steps`|The interval in minutes|`Number`|`60`|
 73 | |`dayTable`|Array of day names for changing order or i18n|`Array`|`['So','Mo','Tu','We','Th','Fr','Sa']`|
 74 | |`timeArray`|This props is optional. Array of time. `steps` props will be ignored if this props is filled.|`Array`|`[]`|
 75 | |`strWeek`|String for i18n support|`String`|`Week`|
 76 | |`strTime`|String for i18n support|`String`|`Time`|
 77 | |`strDay`|String for i18n support|`String`|`Day`|
 78 | |`disableWeekSelect`|Disable the whole week selection|`Boolean`|`false`|
 79 | |`disableDaySelect`|Disable the whole day selection|`Boolean`|`false`|
 80 | |`bg`|Block scheduler background color|`String`|`#223642`|
 81 | |`bgHover`|Block scheduler background color when on hover|`String`|`#84dafc7a`|
 82 | |`bgActive`|Block scheduler background color when active|`String`|`#84c9fc`|
 83 | |`textColor`|Text color inside block scheduler|`String`|`#000`|
 84 | #### Example
 85 | ```html
 86 | <template>
 87 |     <div>
 88 |         <VueSchedule 
 89 |             v-model="schedule" 
 90 |             bg="red"
 91 |             bgHover="gray"
 92 |             bgActive="black"
 93 |             textColor="#fff"
 94 |         />
 95 |     </div>
 96 | </template>
 97 | ```
 98 | 
 99 | ### with `timeArray`
100 | ```html
101 | <template>
102 |     <div>
103 |         <VueSchedule 
104 |             v-model="schedule" 
105 |             :timeArray="['1AM', '3AM', '6AM', '9AM', '11AM', '3PM', '6PM', '9PM', '11PM']"
106 |         />
107 |     </div>
108 | </template>
109 | ```
110 | ### Future plans
111 | - &#9744; add disabled time props
112 | 
113 | 
114 | ### Contribution
115 | Feel free if you want to submit pull request or an issue.
116 | 
117 | ##### Creators
118 | |Name|
119 | |---|
120 | |[Burhanuddin Ahmed](https://github.com/burhanahmeed/)|
121 | |[Oleg Zernov](https://github.com/sawyer3273)|
122 | 
123 | ### License
124 |  MIT
125 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-daily-scheduler",
 3 |   "version": "1.0.12",
 4 |   "private": false,
 5 |   "author": "Burhanuddin Ahmed",
 6 |   "license": "MIT",
 7 |   "description": "A Vue.js component for continuous daily scheduling",
 8 |   "main": "dist/vue-schedule.umd.js",
 9 |   "module": "dist/vue-schedule.esm.js",
10 |   "unpkg": "dist/vue-schedule.min.js",
11 |   "repository": "burhanahmeed/vue-daily-schedule",
12 |   "keywords": [
13 |     "vue",
14 |     "component",
15 |     "schedule",
16 |     "scheduler"
17 |   ],
18 |   "browser": {
19 |     "./sfc": "src/components/Schedule.vue"
20 |   },
21 |   "files": [
22 |     "dist/*",
23 |     "src/*",
24 |     "attributes.json",
25 |     "tags.json"
26 |   ],
27 |   "vetur": {
28 |     "tags": "tags.json",
29 |     "attributes": "attributes.json"
30 |   },
31 |   "scripts": {
32 |     "serve": "vue-cli-service serve",
33 |     "build": "vue-cli-service build",
34 |     "test:unit": "vue-cli-service test:unit",
35 |     "build-bundle": "npm run build:unpkg & npm run build:es & npm run build:umd",
36 |     "build:umd": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format umd --file dist/vue-schedule.umd.js",
37 |     "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es --file dist/vue-schedule.esm.js",
38 |     "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife --file dist/vue-schedule.min.js"
39 |   },
40 |   "devDependencies": {
41 |     "@vue/cli-plugin-babel": "^4.4.0",
42 |     "@vue/cli-plugin-unit-jest": "^4.4.0",
43 |     "@vue/cli-service": "^4.4.0",
44 |     "@vue/test-utils": "^1.0.3",
45 |     "cross-env": "^5.2.0",
46 |     "minimist": "^1.2.0",
47 |     "rollup": "^1.14.4",
48 |     "rollup-plugin-buble": "^0.19.6",
49 |     "rollup-plugin-commonjs": "^9.3.4",
50 |     "rollup-plugin-replace": "^2.2.0",
51 |     "rollup-plugin-scss": "^2.5.0",
52 |     "rollup-plugin-uglify-es": "0.0.1",
53 |     "rollup-plugin-vue": "^4.7.2",
54 |     "vue": "^2.6.11",
55 |     "vue-template-compiler": "^2.6.11",
56 |     "rollup-plugin-css-only": "^3.1.0"
57 |   },
58 |   "browserslist": [
59 |     "> 1%",
60 |     "last 2 versions",
61 |     "not dead"
62 |   ],
63 |   "jest": {
64 |     "preset": "@vue/cli-plugin-unit-jest"
65 |   }
66 | }
67 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/initbase/vue-daily-schedule/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/public/prev.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/initbase/vue-daily-schedule/HEAD/public/prev.png


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <div>
 4 |       <img alt="Vue logo" src="./assets/logo.png" style="width: 50px; vertical-align: middle">
 5 |       <span style="padding: 10px">Vue Daily Scheduler</span>
 6 |     </div>
 7 |     <h2>Example 1</h2>
 8 |     <div style="width: 500px; margin: 0 auto; padding: 20px">
 9 |       <schedule 
10 |         v-model="schedule" 
11 |         :dayTable="dayTable"
12 |         bg="#223642"
13 |         bgHover="#84dafc7a"
14 |         bgActive="#84c9fc"
15 |         textColor="#000" 
16 |       />
17 |     </div>
18 |     <div style="margin: 20px; padding: 20px; background-color: gray; color: white">
19 |       <code>{{ JSON.stringify(schedule) }}</code>
20 |     </div>
21 |     <h2>Example 2</h2>
22 |     <span>With customized <code>timeArray</code></span>
23 |     <div style="width: 500px; margin: 0 auto; padding: 20px">
24 |       <schedule 
25 |         v-model="schedule2" 
26 |         :timeArray="timeArray"
27 |       />
28 |     </div>
29 |     <div style="margin: 20px; padding: 20px; background-color: gray; color: white">
30 |       <code>{{ JSON.stringify(schedule2) }}</code>
31 |     </div>
32 |   </div>
33 | </template>
34 | 
35 | <script>
36 | import Schedule from './components/Schedule'
37 | export default {
38 |   name: 'App',
39 |   components: {
40 |     Schedule
41 |   },
42 |   data () {
43 |     return {
44 |       dayTable:['So','Mo','Tu','We','Th','Fr','Sa'],
45 |       schedule: {
46 |         0: [],
47 |         1: [],
48 |         2: [],
49 |         3: [],
50 |         4: [],
51 |         5: [],
52 |         6: []
53 |       },
54 |       schedule2: {
55 |         0: [],
56 |         1: [],
57 |         2: [],
58 |         3: [],
59 |         4: [],
60 |         5: [],
61 |         6: []
62 |       },
63 |       timeArray: ['1AM', '3AM', '6AM', "9AM", '11AM', '3PM', '6PM', '9PM', '11PM']
64 |     }
65 |   }
66 | }
67 | </script>
68 | 
69 | <style>
70 | #app {
71 |   font-family: Avenir, Helvetica, Arial, sans-serif;
72 |   -webkit-font-smoothing: antialiased;
73 |   -moz-osx-font-smoothing: grayscale;
74 |   text-align: center;
75 |   color: #2c3e50;
76 |   margin-top: 60px;
77 | }
78 | </style>
79 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/initbase/vue-daily-schedule/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/initbase/vue-daily-schedule/HEAD/src/assets/preview.png


--------------------------------------------------------------------------------
/src/assets/style.css:
--------------------------------------------------------------------------------
 1 | .vws-table-rule {
 2 |     border-collapse: separate;
 3 |   }
 4 |   .vws-table-rule-heading, .vws-rule-time {
 5 |     display: flex;
 6 |     flex-wrap: wrap;
 7 |   }
 8 |   .vws-table-rule-heading div, .vws-rule-time .vws-time-list {
 9 |     -ms-flex-preferred-size: 0;
10 |     flex-basis: 0;
11 |     -ms-flex-positive: 1;
12 |     flex-grow: 1;
13 |     max-width: 100%;
14 |     margin: 1px;
15 |     padding: 10px;
16 |     font-size: 9px;
17 |   }
18 |   
19 |   .vws-time-rule {
20 |     width: 100px;
21 |     display: block ruby;
22 |   }
23 |   .vws-rule-time-week, .vws-rule-time-item{
24 |     cursor: pointer;
25 |   }
26 |   .vws-rule-time-week, .vws-rule-time-item{
27 |     /* background: #223642; */
28 |     background: var(--vws-bg);
29 |   }
30 |   
31 |   .vws-rule-time-week.active, .vws-rule-time-item.active{
32 |     /* background: #84c9fc; */
33 |     background: var(--vws-bgActive);
34 |   }
35 |   .vws-rule-time-week:hover, 
36 |   .vws-rule-time-item:hover, 
37 |   .vws-rule-time-week.active:hover, 
38 |   .vws-rule-time-item.active:hover{
39 |     /* background: #84dafc7a; */
40 |     background: var(--vws-bgHover);
41 |   }
42 |   
43 |   .vws-rule-time-item span{
44 |     display: none;
45 |   }
46 |   
47 |   .vws-rule-time-item .parent {
48 |     display: flex !important;
49 |     justify-content: center;
50 |     align-items: center;
51 |     text-align: center;
52 |     color: #fff;
53 |     font-size: 13px;
54 |     font-weight: 800;
55 |     height: 4px;
56 |   }
57 |   
58 |   .vws-rule-time-item.active span {
59 |     display: block;
60 |     text-align: center;
61 |     /* color: #000; */
62 |     color: var(--vws-text);
63 |   }


--------------------------------------------------------------------------------
/src/components/Schedule.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 | 
  3 | Copyright Sultan Ads 2020.
  4 | 1. 2020 Burhanuddin Ahmad (Layoutting)
  5 | 2. 2020 Oleg Zernov (Awesome draggable function)
  6 | 
  7 | -->
  8 | 
  9 | <template>
 10 | <div style="position: relative" :style="rootCssVar">
 11 |   <div class="vws-rule-custom" style='user-select: none;'>
 12 |     <div class="vws-rule-row">
 13 |       <div class="vws-table-rule">
 14 |         <div class="vws-table-rule-heading">
 15 |             <div class="vws-time-list vws-rule-time-time vws-time-rule opacity-0">{{strTime}}</div>
 16 |             <div class="text-center week-rule" v-if="!disableWeekSelect">{{strWeek}}</div>
 17 |             <div class="text-center" v-for="(day, daynum) in dayTable" :key="daynum">{{day}}</div>
 18 |         </div>
 19 |         <div class="vws-table-rule-body" id='schelude' ref="draggableArea" @mousedown="startDrag" @mousemove="doDrag">
 20 | 
 21 |           <div ref="ruleTime" class="vws-rule-time" v-if="!disableDaySelect" key="day">
 22 |             <div ref="ruleTimeTime" class="vws-time-list vws-rule-time-time vws-time-rule" >{{strDay }}</div>
 23 |             <div ref="ruleTimeWeek" class="vws-time-list" v-if="!disableWeekSelect"  />
 24 |             <div 
 25 |               v-for="(day, daynum) in dayTable" 
 26 |               :key="daynum"
 27 |               ref="ruleTimeItem" 
 28 |               :class="{'vws-time-list vws-rule-time-item': true, 'active': checkFullDay(daynum)}" 
 29 |               @click="toggleFullDay(daynum, checkFullDay(daynum))"
 30 |              />
 31 |           </div>
 32 |               
 33 |           <div ref="ruleTime" class="vws-rule-time" v-for="(t, idx) in timeArray" :key="idx">
 34 |             <div 
 35 |               ref="ruleTimeTime" 
 36 |               class="vws-time-list vws-rule-time-time vws-time-rule" 
 37 |               :data-val="t"
 38 |             >
 39 |               {{ t }}
 40 |             </div>
 41 |             <div 
 42 |               v-if="!disableWeekSelect"
 43 |               ref="ruleTimeWeek" 
 44 |               :class="{
 45 |                 'vws-time-list vws-rule-time-week': true, 
 46 |                 'active': checkFullWeek(idx)
 47 |               }" 
 48 |               @click="toggleWeek(idx, checkFullWeek(idx))"
 49 |             ></div>
 50 |             <div 
 51 |               v-for="(day, daynum) in dayTable" 
 52 |               :key="daynum"
 53 |               ref="ruleTimeItem" 
 54 |               :class="{
 55 |                 'vws-time-list vws-rule-time-item': true, 
 56 |                 'active': timetable[daynum].find(el => el == idx ) != undefined ? true:false
 57 |               }" 
 58 |               @click="toggleDay(daynum, idx)"
 59 |             >
 60 |               <span>{{day}}</span>
 61 |             </div>
 62 |               
 63 |           </div>
 64 |         </div>
 65 |       </div>
 66 |     </div>
 67 |   </div>
 68 | </div>
 69 | </template>
 70 | 
 71 | <script>
 72 | // import '../assets/style.css'
 73 | export default {
 74 |   props: {
 75 |     value: {
 76 |       type: Object
 77 |     },
 78 |     steps: {
 79 |       type: Number,
 80 |       default: 60
 81 |     },
 82 |     bg: {
 83 |       type: String,
 84 |       default: '#223642'
 85 |     },
 86 |     bgHover: {
 87 |       type: String,
 88 |       default: '#84dafc7a'
 89 |     },
 90 |     bgActive: {
 91 |       type: String,
 92 |       default: '#84c9fc'
 93 |     },
 94 |     textColor: {
 95 |       type: String,
 96 |       default: '#000'
 97 |     },
 98 |     dayTable:{
 99 |       type: Array,
100 |       default: ['So','Mo','Tu','We','Th','Fr','Sa'],
101 |       validator: val => val.length == 7
102 |     },
103 |     timeArray: {
104 |       type: Array,
105 |       default: [],
106 |       validator: val => val.length > 0
107 |     },
108 |     strWeek:{
109 |       type: String,
110 |       default: 'Week'
111 |     },
112 |     strTime:{
113 |       type: String,
114 |       default: 'Time'
115 |     },
116 |     strDay:{
117 |       type: String,
118 |       default: 'Day'
119 |     },
120 |     disableDaySelect:{
121 |       type: Boolean,
122 |       default: false
123 |     },
124 |     disableWeekSelect:{
125 |       type: Boolean,
126 |       default: false
127 |     }
128 |   },
129 |   data () {
130 |     return {
131 |       timeArrayLength: 24,
132 |       timetable: {
133 |         0: [],
134 |         1: [],
135 |         2: [],
136 |         3: [],
137 |         4: [],
138 |         5: [],
139 |         6: []
140 |       },
141 |       dragValue: false,
142 |       dragging: false,
143 |       x: 0,
144 |       y: 0,
145 |       startX: 0,
146 |       startY: 0,
147 |       maxX: 0,
148 |       maxY: 0,
149 |       minX: 1000000,
150 |       minY: 1000000,
151 |       dragWeek: false,
152 |       dragDay: false,
153 |     }
154 |   },
155 |   methods: {
156 |     startDrag(event) {
157 |       this.dragging = true;
158 |       this.x = this.y = 0;
159 |       this.startX = this.startY = this.maxY = this.maxX  = 0;
160 |       this.minY = this.minX = 1000000
161 |       let container = {
162 |         height: this.$refs.draggableArea.clientHeight,
163 |         width: this.$refs.draggableArea.clientWidth,
164 |       }
165 |       let item = {
166 |         height: this.$refs.ruleTimeItem[0].clientHeight,
167 |         width: this.$refs.ruleTimeItem[0].clientWidth,
168 |       }
169 |       let time = {
170 |         height: this.$refs.ruleTimeTime[0].clientHeight,
171 |         width: this.$refs.ruleTimeTime[0].clientWidth,
172 |       }
173 |       let week = {
174 |         height: this.disableWeekSelect? 0 : this.$refs.ruleTimeWeek[0].clientHeight,
175 |         width: this.disableWeekSelect? 0 : this.$refs.ruleTimeWeek[0].clientWidth,
176 |       }
177 |       this.data = {container, time, item, week}
178 | 
179 |       let firstItemX = this.data.time.width + this.data.week.width + 4 + 15
180 |       let day = 6
181 |       for (let i = 0; i < 8; i++) {
182 |         let width = firstItemX + i * (this.data.item.width + 2)
183 |         if (width > event.layerX && width  < event.layerX  + this.data.item.width) {
184 |           day = i -1
185 |         }
186 |       }
187 | 
188 |       let timeData = -1
189 |       let j = 1;
190 |       this.$refs.ruleTime.map((one, timeIndex) => {
191 |         if (!one.className.includes('hides')) {
192 |           let height = 35 + (j + (this.disableDaySelect? 0 : 1) )* (this.data.item.height + 2)
193 |           if (height > event.layerY && height  < event.layerY + this.data.item.height) {
194 |             timeData = timeIndex
195 |           }
196 |           j++
197 |         }
198 |       })
199 |       
200 |       if(timeData == -1 && day == -1){
201 |         // Drag both ?
202 |       }else if(timeData == -1){
203 |         this.dragValue = !this.checkFullDay(day)
204 |         this.dragWeek = false;
205 |         this.dragDay = true;
206 |       }else if (day == -1) {
207 |         this.dragValue = !this.checkFullWeek (timeData)
208 |         this.dragWeek = true;
209 |         this.dragDay = false;
210 |       } else {
211 |         this.dragValue = this.timetable[day].indexOf(timeData) == -1
212 |         this.dragWeek = false;
213 |         this.dragDay = false;
214 |       }
215 |     },
216 |     stopDrag() {
217 |       this.dragging = false;
218 |     },
219 |     doDrag(event) {
220 |       if (this.dragging ) {
221 |         this.x = event.layerX;
222 |         this.y = event.layerY;
223 |         if (event.layerY > this.maxY) {
224 |           this.maxY = event.layerY
225 |         }
226 |         if (event.layerX > this.maxX) {
227 |           this.maxX = event.layerX
228 |         }
229 |         if (event.layerY < this.minY) {
230 |           this.minY = event.layerY
231 |         }
232 |         if (event.layerX < this.minX) {
233 |           this.minX = event.layerX
234 |         }
235 |         if (!this.startX) {
236 |           this.startX = event.layerX;
237 |           this.startY = event.layerY;
238 |         }
239 |         let firstItemX = this.data.time.width + this.data.week.width + 4 + 15
240 |         for (let i = 0; i < 8; i++) {
241 |           let width = firstItemX + i * (this.data.item.width + 2)
242 |           let isSetItem = false;
243 |           if (this.startX < this.x) {
244 |             if (width > this.startX && width  < event.layerX  + this.data.item.width ) {
245 |               isSetItem = true;
246 |             }
247 |           } else {
248 |             if (width < this.startX + this.data.item.width && width  > event.layerX   ) {
249 |               isSetItem = true;
250 |             }
251 |           }
252 |           
253 |           if(this.dragDay){
254 |             isSetItem && this.setFullDay(i-1, this.dragValue);
255 |           }else{
256 |             let j = 1;
257 |             this.$refs.ruleTime.map((one, timeIndex) => {
258 |               if (!one.className.includes('hides')) {
259 |                 let height = 35 + (j + (this.disableDaySelect? 0 : 1) )* (this.data.item.height + 2)
260 |                 if (this.startY < this.y) {
261 |                   if (height > this.startY && height  < this.y + this.data.item.height) {
262 |                     isSetItem && (this.dragWeek ? this.setWeek (timeIndex, this.dragValue) : this.setDay(i - 1, timeIndex, this.dragValue))
263 |                   }
264 |                   if ( height > this.startY && height  < this.maxY + this.data.item.height ) {
265 |                     if (this.startX < this.x) {
266 |                   if (this.x < this.maxX && width + this.data.item.width < this.maxX && width > this.x - this.data.item.width && i < 6) {
267 |                         this.setDay(i + 1, timeIndex, !this.dragValue, '1')
268 |                       }
269 |                     } else {
270 |                       if (this.x > this.minX && width  > this.minX - this.data.item.width && width < this.x - this.data.item.width && i < 6) {
271 |                         this.setDay(i , timeIndex, !this.dragValue, '5')
272 |                       }
273 |                     }
274 |                   }
275 |                   if (this.y < this.maxY) {
276 |                     if (height > this.y + this.data.item.height && height  < this.maxY + this.data.item.height) {
277 |                       isSetItem && this.setDay(i - 1, timeIndex, !this.dragValue, '2')
278 |                     }
279 |                   }
280 |                 } else {
281 |                   if (height - this.data.item.height  < this.startY    && height > this.y ) {
282 |                     isSetItem && (this.dragWeek ? this.setWeek (timeIndex, this.dragValue) : this.setDay(i - 1, timeIndex, this.dragValue))
283 |                 
284 |                   }
285 |               
286 |                   if ( height - this.data.item.height  < this.startY && height  > this.minY ) {
287 |                     if (this.startX < this.x) {
288 |                       if (this.x < this.maxX && width + this.data.item.width < this.maxX && width > this.x  - this.data.item.width ) {
289 |                         this.setDay(i + 1, timeIndex, !this.dragValue, '3')
290 |                       }
291 |                     } else {
292 |                       if (this.x > this.minX && width > this.minX - this.data.item.width  && width < this.x  - this.data.item.width ) {
293 |                         this.setDay(i , timeIndex, !this.dragValue, '3')
294 |                       }
295 |                     }
296 |                   }
297 |                   if (this.y > this.minY) {
298 |                     if (height   > this.minY    && height < this.y) {
299 |                       isSetItem && this.setDay(i - 1, timeIndex, !this.dragValue, '4')
300 |                     }
301 |                   }
302 |                 }
303 |                 if (this.startX < this.x) {
304 |                   if (this.x < this.maxX) {
305 | 
306 |                   }
307 |                 }
308 |                 j++
309 |               }
310 |             })
311 |           }
312 |         }
313 | 
314 |       }
315 |     },
316 |     toggleFullDay (day, status) {
317 |       for(let t=0;t<(this.timeArrayLength/(this.steps/60));t++){
318 |         let indexDay = this.timetable[day].findIndex(el => el == t);
319 |         if (indexDay != -1) {
320 |           if (status) {
321 |             this.timetable[day].splice(indexDay, 1);
322 |           }
323 |         } else {
324 |           this.timetable[day].push(t);
325 |         }
326 |       }
327 |       this.$emit('input', this.timetable);
328 |     },
329 |     toggleWeek (time, status) {
330 |       for (const key in [0,1,2,3,4,5,6]) {
331 |         let indexDay = this.timetable[key].findIndex(el => el == time);
332 |         if (indexDay != -1) {
333 |           if (status) {
334 |             this.timetable[key].splice(indexDay, 1);
335 |           }
336 |         } else {
337 |           this.timetable[key].push(time);
338 |         }
339 |       }
340 |       this.$emit('input', this.timetable);
341 |     },
342 |     setDay (day, time, value, num) {
343 |       if (day < 0) {
344 |         return
345 |       }
346 |       
347 |       let indexDay = this.timetable[day].findIndex(el => el == time);
348 |       // alert(indexDay)
349 |       if (value) {
350 |         if (indexDay != -1) {
351 |           //this.timetable[day].splice(indexDay, 1);
352 |         } else {
353 |           this.timetable[day].push(time);
354 |         }
355 |       } else {
356 |         if (indexDay != -1) {
357 |           this.timetable[day].splice(indexDay, 1);
358 |         } else {
359 |           //this.timetable[day].push(time);
360 |         }
361 |       }
362 |       this.$emit('input', this.timetable);
363 |     },
364 |     setFullDay(day, value){
365 |       if (typeof this.timetable[day] !== 'undefined') {
366 |         for(let t=0;t<(this.timeArrayLength/(this.steps/60));t++){  
367 |           let indexDay = this.timetable[day].findIndex(el => el == t);
368 |           if (value) {
369 |             if (indexDay != -1) {
370 |             } else {
371 |               this.timetable[day].push(t);
372 |             }
373 |           } else {
374 |             if (indexDay != -1) {
375 |               this.timetable[day].splice(indexDay, 1);
376 |             } else {
377 |             }
378 |           }
379 |         }
380 |       }
381 |     },
382 |     setWeek (time, value) {
383 |       for (const key in [0,1,2,3,4,5,6]) {
384 |         let indexDay = this.timetable[key].findIndex(el => el == time);
385 |         if (value) {
386 |           if (indexDay != -1) {
387 |           } else {
388 |             this.timetable[key].push(time);
389 |           }
390 |         } else {
391 |           if (indexDay != -1) {
392 |             this.timetable[key].splice(indexDay, 1);
393 |           } else {
394 |           }
395 |         }
396 | 
397 |       }
398 |       this.$emit('input', this.timetable);
399 |     },
400 |     toggleDay (day, time) {
401 |       let indexDay = this.timetable[day].findIndex(el => el == time);
402 |       // alert(indexDay)
403 |       if (indexDay != -1) {
404 |         this.timetable[day].splice(indexDay, 1);
405 |       } else {
406 |         this.timetable[day].push(time);
407 |       }
408 |       this.$emit('input', this.timetable);
409 |     },
410 |     checkFullWeek (time) {
411 |       for (const key in this.timetable) {
412 |         if (this.timetable[key].find(el => el == time) == undefined) {
413 |           return false;
414 |         }
415 |       }
416 |       return true;
417 |     },
418 |     checkFullDay (day) {
419 |       for(let t=0;t<(this.timeArrayLength/(this.steps/60));t++){
420 |         if (this.timetable[day].find(el => el == t) == undefined) {
421 |           return false;
422 |         }
423 |       }
424 |       return true;
425 |     },
426 |     setupCustom() {
427 |       const vm = this;
428 |       if (vm.timeArray.length > 0) {
429 |         vm.steps = 60
430 |         vm.timeArrayLength = vm.timeArray.length
431 |       }
432 |       if (vm.timeArray.length == 0) {
433 |         var times = []; // time array
434 |         var tt = 0; // start time
435 |         //loop to increment the time and push results in array
436 |         for (var i=0;tt<24*60; i++) {
437 |           var hh = Math.floor(tt/60); // getting hours of day in 0-24 format
438 |           var mm = (tt%60); // getting minutes of the hour in 0-55 format
439 |           times[i] = ("0" + (hh)).slice(-2) + "." + ("0" + (mm)).slice(-2); // pushing data in array
440 |           tt = tt + vm.steps;
441 |         }
442 |         vm.timeArray = times;
443 |       }
444 |     },
445 |   },
446 |   mounted () {
447 |     this.setupCustom();
448 |     if (this.value) {
449 |       this.timetable = this.value;
450 |     }
451 |     window.addEventListener('mouseup', this.stopDrag);
452 |   },
453 |   watch: {
454 |     value (val) {
455 |       if (val) {
456 |         this.timetable = val;
457 |       }      
458 |     }
459 |   },
460 |   computed: {
461 |     rootCssVar () {
462 |       return {
463 |         '--vws-bg': this.bg,
464 |         '--vws-bgActive': this.bgActive,
465 |         '--vws-bgHover': this.bgHover,
466 |         '--vws-text': this.textColor
467 |       }
468 |     }
469 |   }
470 | }
471 | </script>
472 | 
473 | <style scoped src="../assets/style.css">
474 | </style>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App),
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------
/src/plugin.js:
--------------------------------------------------------------------------------
 1 | import Schedule from "./components/Schedule.vue";
 2 | 
 3 | function install(Vue) {
 4 |   if (install.installed) return;
 5 |   install.installed = true;
 6 |   Vue.component("vue-schedule", Schedule);
 7 | }
 8 | 
 9 | const plugin = {
10 |   install
11 | };
12 | 
13 | let GlobalVue = null;
14 | if (typeof window !== "undefined") {
15 |   GlobalVue = window.Vue;
16 | } else if (typeof global !== "undefined") {
17 |   GlobalVue = global.vue;
18 | }
19 | if (GlobalVue) {
20 |   GlobalVue.use(plugin);
21 | }
22 | 
23 | Schedule.install = install;
24 | 
25 | export default Schedule;
26 | 


--------------------------------------------------------------------------------
/tests/unit/example.spec.js:
--------------------------------------------------------------------------------
 1 | import { shallowMount } from '@vue/test-utils'
 2 | import HelloWorld from '@/components/HelloWorld.vue'
 3 | 
 4 | describe('HelloWorld.vue', () => {
 5 |   it('renders props.msg when passed', () => {
 6 |     const msg = 'new message'
 7 |     const wrapper = shallowMount(HelloWorld, {
 8 |       propsData: { msg }
 9 |     })
10 |     expect(wrapper.text()).toMatch(msg)
11 |   })
12 | })
13 | 


--------------------------------------------------------------------------------