Set Open/Close Hours In Admin Panel – Vue Business Hours

Install & Download:

# NPM
$ npm install vue-business-hours --save

Description:

A small Vue.js component for admin panel that allows the admin to set open/close business hours in an easy way.

How to use it:

1. Install and import the Vue Business Hours.

import BusinessHours from 'vue-business-hours';

2. Register the Vue Business Hours.

// globally
Vue.use(BusinessHours);
// as a component
Vue.component('BusinessHours', BusinessHours);

3. Insert the component into your template.

<template>
  <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>

4. Define your open and close time values in the JSON.

const myData = {
      sunday: [
        {
          open: '',
          close: '',
          id: '1',
          isOpen: false
        }
      ],
      monday: [
        {
          open: '0800',
          close: '1700',
          id: '2',
          isOpen: true
        }
      ],
      tuesday: [
        {
          open: '0800',
          close: '1700',
          id: '3',
          isOpen: true
        }
      ],
      wednesday: [
        {
          open: '0800',
          close: '1700',
          id: '4',
          isOpen: true
        }
      ],
      thursday: [
        {
          open: '0800',
          close: '1700',
          id: '5',
          isOpen: true
        }
      ],
      friday: [
        {
          open: '0800',
          close: '1700',
          id: '6',
          isOpen: true
        },
        {
          open: '1900',
          close: '2200',
          id: '7',
          isOpen: true
        }
      ],
      saturday: [
        {
          open: '24hrs',
          close: '24hrs',
          id: '8',
          isOpen: true
        }
      ]
}

5. In your app.vue:

new Vue({
    el: '#app',
    data() {
      return {
        days: yourDaysObject
      };
    }
});

6. Props available.

days: {
type: Object,
required: true
},
name: {
type: String,
default: 'businessHours'
},
type: {
type: String,
default: 'datalist',
validator: function(value) {
  return ['datalist', 'select'].indexOf(value) !== -1;
}
},
timeIncrement: {
type: Number,
default: 30,
validator: function(value) {
  return [15, 30, 60].indexOf(value) !== -1;
}
},
color: {
type: String,
default: '#2779bd',
validator: function(value) {
  return value.charAt(0) === '#' ? true : false;
}
},
localization: {
type: Object,
default: () => ({
  switchOpen: 'Open',
  switchClosed: 'Closed',
  placeholderOpens: 'Opens',
  placeholderCloses: 'Closes',
  addHours: 'Add hours',
  open: {
    invalidInput:
      'Please enter an opening time in the 12 hour format (ie. 08:00 AM). You may also enter "24 hours".',
    greaterThanNext:
      'Please enter an opening time that is before the closing time.',
    lessThanPrevious:
      'Please enter an opening time that is after the previous closing time.',
    midnightNotLast:
      "Midnight can only be selected for the day's last closing time."
  },
  close: {
    invalidInput:
      'Please enter a closing time in the 12 hour format (ie. 05:00 PM). You may also enter "24 hours" or "Midnight".',
    greaterThanNext:
      'Please enter a closing time that is after the opening time.',
    lessThanPrevious:
      'Please enter a closing time that is before the next opening time.',
    midnightNotLast:
      "Midnight can only be selected for the day's last closing time."
  },
  t24hours: '24 hours',
  midnight: 'Midnight',
  days: {
    monday: 'Monday',
    tuesday: 'Tuesday',
    wednesday: 'Wednesday',
    thursday: 'Thursday',
    friday: 'Friday',
    saturday: 'Saturday',
    sunday: 'Sunday',
    newYearsEve: 'New Year\'s Eve', // prettier-ignore
    newYearsDay: 'New Year\'s Day', // prettier-ignore
    martinLutherKingJrDay: 'Martin Luther King, Jr. Day',
    presidentsDay: 'Presidents\' Day', // prettier-ignore
    easter: 'Easter',
    memorialDay: 'Memorial Day',
    independenceDay: 'Independence Day',
    fourthOfJuly: '4th of July',
    laborDay: 'Labor Day',
    columbusDay: 'Columbus Day',
    veteransDay: 'Veterans Day',
    thanksgiving: 'Thanksgiving',
    christmasEve: 'Christmas Eve',
    christmas: 'Christmas'
  }
})

Preview: