0.1.21 • Published 3 years ago
@onereach/v-event-calendar v0.1.21
@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
- Show timezones "select-component" and then you can change the timezone of the calendar
isStepMode
- Calendar used inside "Step"
@Prop({ type: Boolean, default: false }) isStepMode!: boolean
- Calendar used inside "Step"
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