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

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>