vue2-cron-builder

Simple vue component to generate cron expression

Copy from https://www.npmjs.com/package/vue-cron-builder and modified to use vue v2.6.11

original author is Sojin antony

how to use

install npm install vue2-cron-builder

Notice: the version > 1.1.0 has limited the minutes value to no less than 5 on the minutes tab. There will show an error message if you input a value of 1-4 or >60.

<template>
  <Cron showResultCron="true" :cron="cron" showResultText="true" @cron-change="valChanged"/>
</template>

<script>
import Cron from 'vue-cron-builder'
import 'vue-cron-builder/dist/cron.css';

export default {
  name: 'App',
  components: {
    Cron
  },
  data() {
    return {
      cron : '0 0 4 ? * MON *',
    }
  },
  methods: {
    valChanged(val) {
      this.cron = val
    }
  },
}
</script>

Props

| Prop | Description | Default | Mandatory | | -------------- | -------------------------------------------------------------------------------- | ----------------------- | --------- | | cron | cron expression | | No | | cron-change | | | Yes | | showResultText | show in readable text format | false | No | | showResultCron | show cron expression | false | No | | translation | translation object | default translation(en) | No | | locale | locale for cronstrue | en | No | | options | Options for Cron component, *Must pass a valid cron value for available headers | All available headers | No |

translation

Expects a method. Use this prop for localization support. vue-cron-builder will use this values for every key. List of keys are available here

locale option should be set for correct ResultText translation. Please visit cronstrue for supported locales.

Options

options.headers

import HEADER  from 'vue-cron-builder/dist/header';

const options = {
  headers: [HEADER.MONTHLY, HEADER.WEEKLY, HEADER.MINUTES, HEADER.HOURLY, HEADER.DAILY, HEADER.CUSTOM]
};

for more info, please check original author's github here