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:

• CronLight - a lightweight cron editor without external dependencies
• CronVuetify - a cron editor for Vuetify.js.

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

CronLight

Installation

Open up a terminal and run the following command:

yarn add @vue-js-cron/light@^1.0.5

or

npm install @vue-js-cron/light@^1.0.5

Usage

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

import cronLight from '@vue-js-cron/light'
import '@vue-js-cron/light/dist/light.css'
Vue.use(cronLight)

Now you can use the component CronLight.

CronLight example

<template>
  <div class="getting-started-light">
    <CronLight v-model="value" @error="error=$event"></CronLight>
    <div class="mt-2 grey--text text--darken-1">cron expression: {{value}}</div>
  </div>
</template>

<script>
export default {

  props: {
    init: {
      type: String,
      default: '30 12,19 24 12 *'
    }
  },

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

Every

Year Minute Hour Day Week Month Year

in

Dec January February March April May June July August September October November December

on

24 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

and

every day of the week Sunday Monday Tuesday Wednesday Thursday Friday Saturday

at

12,19 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23

:

30 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

cron expression: 30 12,19 24 12 *

API

• CronLight

CronVuetify

Installation

Open up a terminal and run the following command:

yarn add @vue-js-cron/vuetify@^2.1.0

or

npm install @vue-js-cron/vuetify@^2.1.0

Usage

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

import cronVuetify from '@vue-js-cron/vuetify'
import '@vue-js-cron/vuetify/dist/vuetify.css'
Vue.use(cronVuetify)

Now you can use the component CronVuetify.

CronVuetify example

<template>
  <v-app>

    <CronVuetify v-model="value" @error="error=$event"></CronVuetify>

    <!-- editable cron expression -->
    <v-row class="mt-0">
      <v-col class="pt-0">
        <v-text-field :value="value" @change="value = $event" label="cron expression" :error-messages="error" />
      </v-col>
    </v-row>

  </v-app>
</template>

<script>
export default {

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

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

Every

Year

in

every month

on

every day

and

every day of the week

at

every hour

:

every minute

cron expression

API

• CronVuetify

Renderless

This guide will explain how to use the renderless component of vue-js-cron. In this example Vuetify (opens new window) 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@^2.1.2

or

npm install @vue-js-cron/core@^2.1.2

Usage

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

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

Now you can use the component CronCore. The default scoped slot (opens new window) of CronCore 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

CronCore example

<template>
  <v-app>
    <CronCore v-model="value">
      <template #default="{fields, period, error}">
        <div> 
          
          <v-row align="baseline" dense>
            
            <!-- period selection -->
            <v-col v-if="period.prefix" class="flex-grow-0">{{period.prefix}}</v-col>
            <v-col cols="auto">
              <v-select class="fit" v-bind="period.attrs" :items="period.items" @input="period.events.input" item-value="id" dense :menu-props="{'offset-y': true}"></v-select>
            </v-col>
            <v-col v-if="period.suffix" class="flex-grow-0">{{period.suffix}}</v-col>

            <!-- cron expression fields -->
            <template v-for="f in fields">
              <v-col v-if="f.prefix" class="flex-grow-0" :key="f.id+'-prefix'">{{f.prefix}}</v-col>
              
              <!-- custom select -->
              <v-menu offset-y :key="f.id" :close-on-content-click="false" max-height="300">
                
                <!-- menu activator -->
                <template v-slot:activator="{ on, attrs }">
                  <v-col  v-on="on" v-bind="attrs">
                    <v-text-field :value="f.selectedStr" dense readonly></v-text-field>
                  </v-col>
                </template>

                <!-- list of field items -->
                <v-list dense>
                  <v-list-item-group v-bind="f.attrs" @change="f.events.input" multiple>
                    <v-list-item v-for="item in f.items" :value="item.value" :key="item.value">
                      <v-list-item-content>
                        <v-list-item-title v-text="item.text"></v-list-item-title>
                      </v-list-item-content>
                    </v-list-item>
                  </v-list-item-group>
                </v-list>

              </v-menu>

              <v-col v-if="f.suffix" class="flex-grow-0" :key="f.id+'-suffix'">{{f.suffix}}</v-col>
            </template>
          
          </v-row>

          <!-- editable cron expression -->
          <v-row class="mt-0">
            <v-col class="pt-0">
              <v-text-field :value="value" @change="value = $event" label="cron expression" :error-messages="error" />
            </v-col>
          </v-row>

        </div>
      </template>
    </CronCore>
  </v-app>
</template>

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

Every

Year

in

on

and

at

:

cron expression

API

• CronCore