0.1.21 • Published 3 years ago

@onereach/v-event-calendar v0.1.21

Weekly downloads
99
License
UNLICENSED
Repository
-
Last release
3 years ago

@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
0.1.21

3 years ago

0.1.20

3 years ago

0.1.19

3 years ago

0.1.17

3 years ago

0.1.18

3 years ago

0.1.16

3 years ago

0.1.15

3 years ago

0.1.12

3 years ago

0.1.13

3 years ago

0.1.14

3 years ago

0.1.11

3 years ago

0.1.10

3 years ago

0.1.8

3 years ago

0.1.9

3 years ago

0.1.7

3 years ago

0.1.6

3 years ago

0.1.4

3 years ago

0.1.5

3 years ago

0.1.3

3 years ago

0.1.2

3 years ago

0.1.1

3 years ago

0.0.8

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago