@onereach/v-event-calendar

Vue event calendar plugin for schedule step.

🎯 Install:

$ yarn add @onereach/v-event-calendar
# npm install @onereach/v-event-calendar --save

🚀 Usage

<template>
  <v-event-calendar :events="eventsExample" is-step-mode />
</template>

<script>
import VEventCalendar from '@onereach/v-event-calendar'

export default {
  components: {
    VEventCalendar
  },

  data () {
    return {
      eventsExample: [
        {
          eventName: 'test 1',
          color: '#371CDD',
          startExpression: {
            time: '00:00',
            date: '2020-11-05'
          },
          expressions: ['0 0 5  11 * 2020', '0 1 5  11 * 2020', '0 2 5  11 * 2020', '0 3 5  11 * 2020', '0 4 5  11 * 2020', '0 5 5  11 * 2020', '0 6 5  11 * 2020', '0 7 5  11 * 2020', '0 8 5  11 * 2020', '0 9 5  11 * 2020', '0 10 5  11 * 2020', '0 11 5  11 * 2020', '0 12 5  11 * 2020', '0 13 5  11 * 2020', '0 14 5  11 * 2020', '0 15 5  11 * 2020', '0 16 5  11 * 2020', '0 17 5  11 * 2020', '0 18 5  11 * 2020', '0 19 5  11 * 2020', '0 20 5  11 * 2020', '0 21 5  11 * 2020', '0 22 5  11 * 2020', '0 23 5  11 * 2020'],
          endExpression: {
            time: '23:59:59',
            date: ''
          },
          timeZone: {
            value: 'Europe/London',
            label: 'Europe/London'
          }
        },
        {
          eventName: 'test event',
          startExpression: {
            time: '00:00',
            date: '2020-12-03'
          },
          expressions: ['0 23 1/1 * ? *', '0,10,20,30,40,50 0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22 1/1 * ? *'],
          endExpression: {
            time: '23:59:59',
            date: ''
          },
          timeZone: {
            value: 'Europe/Dublin',
            label: 'Europe/Dublin'
          },
          color: '#80874D' 
        }
      ]
    }
  },
}
</script>

✨ Props

• events

  @Prop({ type: Array, default: () => [] })
  events!: EventData[] | []
  
  interface EventData {
      startExpression: {
        date: string;
        time: string;
      };
      endExpression: {
        date: string;
        time: string;
      };
      expressions: string[];
      eventName: string;
      timeZone: {
        label: string;
        value: string;
      };
      color: string;
      times: {
        start: {
          HH: string;
          mm: string;
        };
        end: {
          HH: string;
          mm: string;
        };
        endTime: boolean;
      }[];
    }

• isEditable

  • Should be true when you create or change event parameters in the event editor

  @Prop({ type: Boolean, default: false })
  isEditable!: boolean
  

• isHideTimezone

  • Show timezones "select-component" and then you can change the timezone of the calendar

  @Prop({ type: Boolean, default: false })
  isHideTimezone!: boolean
  

• isStepMode

  • Calendar used inside "Step"

  @Prop({ type: Boolean, default: false })
  isStepMode!: boolean