Merge pull request #3 from burhanahmeed/add-custom-style

Add custom style

Author: burhanahmeed

README.md

@@ -21,7 +21,8 @@ yarn add vue-daily-scheduler
 ```
 Browser
 ```html
-<script src="https://unpkg.com/vue-daily-scheduler@latest/dist/vue-schedule.min.js" />
+<link href="https://unpkg.com/vue-daily-scheduler@latest/dist/vue-schedule.min.css" ref="stylesheet" />
+<script src="https://unpkg.com/vue-daily-scheduler@latest/dist/vue-schedule.min.js"></script>
 ```
 
 then, use inside a component
@@ -55,6 +56,28 @@ use it inside vue template
 </template>
 ```
 
+### Props
+|Props|Desc|Type|Default|
+|---|---|---|---|
+|`bg`|Block scheduler bacground color|`String`|`#223642`|
+|`bgHover`|Block scheduler bacground color when on hover|`String`|`#84dafc7a`|
+|`bgActive`|Block scheduler bacground color when active|`String`|`#84c9fc`|
+|`textColor`|Text color inside block scheduler|`String`|`#000`|
+#### Example
+```html
+<template>
+    <div>
+        <VueSchedule 
+            v-model="schedule" 
+            bg="red"
+            bgHover="gray"
+            bgActive="black"
+            textColor="#fff"
+        />
+    </div>
+</template>
+```
+
 ### Contributor
 Feel free if you want to submit pull request or an issue.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-daily-scheduler",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "private": false,
   "author": "Burhanuddin Ahmed",
   "license": "MIT",

src/App.vue

@@ -5,7 +5,7 @@
       <span style="padding: 10px">Vue week schedule</span>
     </div>
     <div style="width: 500px; margin: 0 auto; padding: 20px">
-      <schedule v-model="schedule" />
+      <schedule v-model="schedule" bgHover="black" />
     </div>
     <div style="margin: 20px; padding: 20px; background-color: gray; color: white">
       <code>{{ JSON.stringify(schedule) }}</code>

src/assets/style.css

@@ -24,17 +24,20 @@
     cursor: pointer;
   }
   .vws-rule-time-week, .vws-rule-time-item{
-    background: #223642;
+    /* background: #223642; */
+    background: var(--vws-bg);
   }
 
   .vws-rule-time-week.active, .vws-rule-time-item.active{
-    background: #84c9fc;
+    /* background: #84c9fc; */
+    background: var(--vws-bgActive);
   }
   .vws-rule-time-week:hover, 
   .vws-rule-time-item:hover, 
   .vws-rule-time-week.active:hover, 
   .vws-rule-time-item.active:hover{
-    background: #84dafc7a;
+    /* background: #84dafc7a; */
+    background: var(--vws-bgHover);
   }
 
   .vws-rule-time-item span{
@@ -55,5 +58,6 @@
   .vws-rule-time-item.active span {
     display: block;
     text-align: center;
-    color: #000;
+    /* color: #000; */
+    color: var(--vws-text);
   }

src/components/Schedule.vue

@@ -7,7 +7,7 @@ Copyright Sultan Ads 2020.
 -->
 
 <template>
-<div style="position: relative">
+<div style="position: relative" :style="rootCssVar">
   <div class="vws-rule-custom" style='user-select: none;'>
     <div class="vws-rule-row">
       <div class="vws-table-rule">
@@ -114,7 +114,27 @@ Copyright Sultan Ads 2020.
 <script>
 import '../assets/style.css'
 export default {
-  props: ['value'],
+  props: {
+    value: {
+      type: Object
+    },
+    bg: {
+      type: String,
+      default: '#223642'
+    },
+    bgHover: {
+      type: String,
+      default: '#84dafc7a'
+    },
+    bgActive: {
+      type: String,
+      default: '#84c9fc'
+    },
+    textColor: {
+      type: String,
+      default: '#000'
+    }
+  },
   data () {
     return {
       timeArray: [],
@@ -391,6 +411,16 @@ export default {
         this.timetable = val;
       }      
     }
+  },
+  computed: {
+    rootCssVar () {
+      return {
+        '--vws-bg': this.bg,
+        '--vws-bgActive': this.bgActive,
+        '--vws-bgHover': this.bgHover,
+        '--vws-text': this.textColor
+      }
+    }
   }
 }
-</script>
+</script>