Getting Started

The fastest way to get started, is to install one of the prebuilt components. For now vue-js-cron provides the following prebuilt components:

• cron-light - a lightweight cron editor without external dependencies
• cron-vuetify - a cron editor for Vuetify.js.
• cron-element-plus - cron editor for Element Plus

If you would like to use a different UI framework, follow the quick start guide on how to use the renderless component.

Light

Installation

Open up a terminal and run the following command:

yarn add @vue-js-cron/light@next

or

npm install @vue-js-cron/light@next

Then you need to register vue-js-cron/light with app.use()

import cronLight from '@vue-js-cron/light'
import '@vue-js-cron/light/dist/light.css'

app.use(cronLight)

Now you can use the cron-light component.

Example

<template>
  <div class="pt-2">

    <cron-light v-model="value" @error="error=$event"></cron-light>
    <div class="text-lightest pt-2">cron expression: {{value}}</div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      value: '* * * * *',
      error: ''
    }
  }
}
</script>

Result:

Every

Year

in

every month

on

every day

and

every day of the week

at

every hour

:

every minute

cron expression: * * * * *

API

• cron-light

Vuetify

Requirements

• Vuetify

Installation

Open up a terminal and run the following command:

yarn add @vue-js-cron/vuetify@next

or

npm install @vue-js-cron/vuetify@next

Then you need to register vue-js-cron/vuetify with app.use()

import cronVuetify from '@vue-js-cron/vuetify'
import '@vue-js-cron/vuetify/dist/vuetify.css'

app.use(cronVuetify)

Now you can use the cron-vuetify component.

Example

<template>
  <div>

    <cron-vuetify
      v-model="value"
      :chip-props="{ color: 'success', textColor: 'white' }"
      @error="error=$event" />

    <!-- editable cron expression -->
    <v-text-field
      class="pt-3"
      :modelValue="value"
      @update:model-value="nextValue = $event"
      @blur="value = nextValue"
      label="cron expression"
      :error-messages="error" />

  </div>
</template>

<script>
export default {

  props: {
    init: {
      type: String,
      default: '* * * * *'
    }
  },

  data () {
    return {
      value: this.init,
      nextValue: this.init,
      error: ''
    }
  }
}
</script>

Result:

Every

Year

in

every month

on

every day

and

every day of the week

at

every hour

:

every minute

cron expressioncron expression

API

• cron-vuetify

Element Plus

Requirements

• Element Plus

Installation

Open up a terminal and run the following command:

yarn add @vue-js-cron/element-plus@next

or

npm install @vue-js-cron/element-plus@next

Then you need to register @vue-js-cron/element-plus with app.use()

import cronElementPlus from '@vue-js-cron/element-plus'
import '@vue-js-cron/element-plus/dist/element-plus.css'

app.use(cronElementPlus)

Now you can use the cron-element-plus component.

Example

<template>
  <div>
    <cron-element-plus
      v-model="value"
      :button-props="{ type: 'primary' }"
      @error="error=$event" />

    <p class="text-lightest pt-2">cron expression: {{value}}</p>

  </div>
</template>

<script>
export default {
  data () {
    return {
      value: '* * * * *',
      error: ''
    }
  }
}
</script>

Result:

Every

in

on

and

at

:

cron expression: * * * * *

API

• cron-element-plus

Ant

Requirements

• Ant Design Vue

Installation

Open up a terminal and run the following command:

yarn add @vue-js-cron/ant@next

or

npm install @vue-js-cron/ant@next

Then you need to register @vue-js-cron/ant with app.use()

import cronAnt from '@vue-js-cron/ant'
import '@vue-js-cron/ant/dist/ant.css'

app.use(cronAnt)

Now you can use the cron-ant component.

Example

<template>
  <div>
    <cron-ant
      v-model="value"
      :button-props="{ type: 'primary', shape: 'round', style: {backgroundColor: '#0277BD'} }"
      @error="error=$event" />

    <p class="text-lightest pt-2">cron expression: {{value}}</p>

  </div>
</template>

<script>
export default {
  data () {
    return {
      value: '* * * * *',
      error: ''
    }
  }
}
</script>

Result:

Every

in

on

and

at

:

cron expression: * * * * *

API

• cron-ant

Renderless

This guide will explain how to use the renderless component of vue-js-cron. In this example Vuetify will be used to render the component, but you should be able to follow along using any UI framework.

Installation

First open up a terminal and run the following command:

yarn add @vue-js-cron/core@next

or

npm install @vue-js-cron/core@next

Then you need to register vue-js-cron/core with Vue.app()

import cronCore from '@vue-js-cron/core'
Vue.use(cronCore)

Now you can use the cron-core component. The default slot of cron-core provides the following props:

• fields - each field corresponds to one position in the cron expression. Default fields: month, day, day of week, hour and minute.
• period - defines which fields are visible
• error - error message

Example

<template>
  <div>
    <cron-core v-model="value" v-slot="{fields, period, error}">
      <div>

        <!-- period selection -->
        {{period.prefix}}
        <v-chip>
          {{period.attrs.modelValue}}
          <v-menu activator="parent">
            <v-list>
              <v-list-item v-for="item in period.items" :key="item.id" @click="period.events['update:model-value'](item.id)">
                {{item.text}}
              </v-list-item>
            </v-list>
          </v-menu>
        </v-chip>
        {{period.suffix}}

        <!-- cron expression fields -->
        <template v-for="f in fields" :key="f.id">
          {{f.prefix}}

            <v-chip>
              {{f.selectedStr}}
              <v-menu activator="parent" :close-on-content-click="false">

                <!-- list of field items -->
                <v-list :selected="f.attrs.modelValue" @update:selected="f.events['update:model-value']" select-strategy="multiple">
                  <v-list-item v-for="item in f.items" :value="item.value" :key="item.value">
                    {{item.text}}
                  </v-list-item>
                </v-list>

              </v-menu>
            </v-chip>
          {{f.suffix}}
        </template>

        <!-- editable cron expression -->
        <v-text-field
          class="mt-4"
          :modelValue="value"
          @update:model-value="nextValue = $event"
          @blur="value = nextValue"
          label="cron expression"
          :error-messages="error" />

      </div>
    </cron-core>
  </div>
</template>

<script>
export default {
  data () {
    const value = '* * * * *'

    return {
      value,
      nextValue: value
    }
  },
  methods: {

  }
}
</script>

Result:

Every year in every month on every day and every day of the week at every hour : every minute

cron expressioncron expression

API

• cron-core