vue-business-hours-wilcity-exnteded
v1.2.7
Published
Vue component for selecting business hours created by sbarry50. This package is extended version that helps to fit Wilcity theme
Downloads
3
Readme
Vue Business Hours
Vue component for setting business hours in an administration panel. Option to use a text <input>
and <datalist>
component with 'autocomplete' functionality for greater flexbility to define business hours. Or a <select>
component to limit options to predetermined times in 15, 30 and 60 minute increments.
Install
NPM
Install with NPM
npm install vue-business-hours
Then in your main.js
or other entry point register as a plugin.
import BusinessHours from 'vue-business-hours'
Vue.use(BusinessHours)
Or register as a component.
import BusinessHours from 'vue-business-hours'
Vue.component('BusinessHours', BusinessHours)
CDN
You can also add this component straight to an HTML page with a <script>
tag along with Vue and Moment.js.
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js'></script>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js'></script>
<script src='https://unpkg.com/vue-business-hours'></script>
Usage
This component can be used for regular business hours, holiday hours and/or other special hours with simple configuration changes.
<div id="app">
<!-- default -->
<h2>Business Hours</h2>
<business-hours :days='days'></business-hours>
<!-- with options -->
<h2>Holiday Hours</h2>
<business-hours
:days='holidays'
name='holidayHours'
type='select'
:time-increment='60'
color='#00af0b'
></business-hours>
</div>
In your main.js
, App.vue
or in <script>
tags on your HTML page.
new Vue({
el: "#app",
data() {
return {
days: yourDaysObject,
holidays: yourHolidaysObject
}
}
});
Here's an example in an App.vue
file fetching the days
object with an Axios API call.
<template>
<h1>Business Hours</h1>
<section v-if="errored">
<p>Oops, something went wrong. Please check the console for more details.</p>
</section>
<section v-else>
<div v-if="loading">Loading...</div>
<business-hours v-else :days="businessHours"></business-hours>
</section>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
businessHours: {},
loading: true,
errored: false
};
},
created() {
this.getData('https://example.com/api/business-hours-endpoint')
.then(data => (this.businessHours = data));
},
methods: {
getData: function(endpoint) {
return axios
.get(endpoint)
.then(response => {
return response.data;
})
.catch(error => {
// eslint-disable-next-line
console.log(error);
this.errored = true;
})
.finally(() => (this.loading = false));
}
}
};
</script>
Properties
| Name | Type | Required | Default | Description |
| -------------- | ------ | -------- | --------------- | -------------------------------------------------------------------------------------------------------- |
| days | Object | yes | | An object with days and business hours to be set by the component. See below for format. |
| name | String | no | businessHours
| The name of the key which will correspond to the saved business hours. |
| time-increment | Number | no | 30
| The number of minutes to increment the dropdown time options. Allowed values: 15
, 30
or 60
minutes |
| type | String | no | datalist
| The type of input component used. Allowed values: datalist' or 'select' |
| color | String | no |
#2779bd | The color of the toggle switch and Add hours button. Must be in hex color format leading with a
#` |
Data
The days
property should be supplied with a JSON object in the following format. The open
and close
time values must be in the 24 hour format with no colon. Midnight can be designated by 2400
. 24hrs
is also valid. The id
property must be unique for each entry. The isOpen
property should only be false if both open
and close
are empty.
{
sunday: [
{
open: '',
close: '',
id: '5ca5578b0c5c7',
isOpen: false
}
],
monday: [
{
open: '0800',
close: '1700',
id: '5ca5578b0c5d1',
isOpen: true
}
],
tuesday: [
{
open: '0800',
close: '1700',
id: '5ca5578b0c5d8',
isOpen: true
}
],
wednesday: [
{
open: '0800',
close: '1700',
id: '5ca5578b0c5df',
isOpen: true
}
],
thursday: [
{
open: '0800',
close: '1700',
id: '5ca5578b0c5e6',
isOpen: true
}
],
friday: [
{
open: '0800',
close: '1700',
id: '5ca5578b0c5ec',
isOpen: true
},
{
open: '1900',
close: '2200',
id: '5ca5578b0c5f2',
isOpen: true
}
],
saturday: [
{
open: '24hrs',
close: '24hrs',
id: '5ca5578b0c5f8',
isOpen: true
}
]
}