Getting Started - Core

The fastest way to get started, is to use one of the prebuilt components.

• cron-core - renderless cron editor
• cron-light - lightweight cron editor without external dependencies
• cron-ant - cron editor for Ant Design Vue
• cron-element-plus - cron editor for Element Plus
• cron-naive - cron editor for Naive UI
• cron-prime - cron editor for PrimeVue
• cron-quasar - cron editor for Quasar
• cron-vuetify - cron editor for Vuetify.js

Installation

Open up a terminal and run the following command:

yarn add @vue-js-cron/core

or

npm install @vue-js-cron/core

Then you need to register the component

// registers the component globally
// registered name: CronCore
import CronCorePlugin from '@vue-js-cron/core'
app.use(CronCorePlugin)

// alternatively you can also register the component yourself
// https://vuejs.org/guide/components/registration.html
import { CronCore } from '@vue-js-cron/core'
app.component('CronCore', CronCore)

Done! 🚀

API

CronCore API

CronCoreProps API

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>