The library Vue Event Creator helps to schedule events in easy way. It’s very convenient for companies that have a lot of similar events, first of all repeated events like training courses, sport events, seminars. For example, we have the event that occurs twice a week for a month. The title and description are the same, just the dates are different. In general it takes enough time to fill up that info (and it’s boring), Vue Event Creator fasts the process. And yes, the interface looks nice.
By the way, you can customize the dates of event and add to them additional properties that suit your aim: title, content, select, tags and so on.
- Localization: English, Espanol, Русский, custom.
- Two columns view.
- To focus the event card by click.
- Default time control.
- In-place editing of the event additional data.
- Foolproof: user has to save a new event and has to confirm removing an event that already saved through API.
- Small size: less than 11 kb (gzip with styles)
👉 Check out demo 👈
To create one-day event you need to make double click on the date. To create the event for several days you make one click on start date and second click on the last date of the event. That's it. The card of new event will appear in the right column.
- Vue 3
- Dayjs (you don't have to preinstall it)
npm
npm install vue-event-creator
yarn
yarn add vue-event-creator
You can look at demo app code. Component with initialization and server's actions:
<template>
<div class="vec-wrapper">
<vue-event-creator
language="es"
:saveEventFn="saveEventFn"
:getEventsFn="getEventsFn"
:removeEventFn="removeEventFn"
:eventComponent="EventData"
>
</vue-event-creator>
</div>
</template>
<script>
import VueEventCreator from 'vue-event-creator';
import 'vue-event-creator/dist/styles.css'; // CSS
import EventDataComponent from './EventDataComponent.vue'; // The component with additional data (*optional)
import axios from 'axios'; // For example I use axios for sending data to a server
export default {
component: {
VueEventCreator
},
setup(props) {
// First off all — get all existed events
const getEventsFn = async () => {
/*
Fetch from API or take events from props.
You have to return an array of objects with these keys:
id: id of your content in a database
startsAt: start date and time (javascript Date format)
finishesAt: finish date and time (javascript Date format)
data: *not required, any additional properties
*/
const events = props.data.map((event) => {
// Some logic to prepare the data if the response from the backend is not compliant
return {
id: event.id,
startsAt: new Date(event.starts_at),
finishesAt: new Date(event.finishes_at),
data: {
title: event.tile,
text: event.text
}
};
});
return events;
};
const saveEventFn = async (data) => {
/*
Send new or changed event to a server and get a response with a new/updated data from it.
As example I use FormData and two api points.
You can make it whatever you want, just remember that you have two type of operations: creating and updating event in this one function.
*/
const formData = new FormData();
formData.set('event[started_at]', data.startsAt);
formData.set('event[finishes_at]', data.finishesAt);
formData.set('event[title]', data.data?.title);
formData.set('event[text]', data.data?.text);
const isUpdating = !!data.id; // if an event is not saved in a server, than it doesn't have the id (id === null).
return axios({
url: isUpdating ? `/api/events/${data.id}.json` : '/api/events/create',
method: isUpdating ? 'patch' : 'post',
data: formData
})
.then(({ data }) => data)
.catch(console.error);
};
const removeEventFn = async () => {
/*
Remove event from server. 200 OK in return
*/
axios
.delete(`/api/events/remove/${data.id}.json`)
.then()
.catch(console.error);
};
return {
getEventsFn,
saveEventFn,
removeEventFn,
eventDataComponent
};
}
};
</script>Additional component
<template>
<div v-if="isEventEditing">
<input type="text" v-model="title" @input="sendData" />
<textarea v-model="text" @input="sendData"></textarea>
</div>
<template v-else>
<h2>{{ title }}</h2>
<div>{{ text }}</div>
</template>
</template>
<script>
import { ref } from 'vue';
export default {
props: {
/*
You need to set two props:
'eventData' contains data properties of the event (additional data),
'isEventEditing' which will changes when a user clicks the 'Edit' button of the event card.
*/
eventData: {
type: Object,
default: () => {}
},
isEventEditing: {
type: Boolean,
default: false
}
},
setup(props, { emit }) {
const title = ref(props.eventData?.title);
const text = ref(props.eventData?.text);
const sendData = () => {
/*
You have to fire the event 'update:eventData' with data properties to update it on the parent component from where this data will sends to a server.
And it's the good place to make a validation.
*/
emit('update:eventData', {
title: title.value,
text: text.value
});
};
/*
If you need to add any default data for an event, just create request to a server and load it. Don't forget to emit data, like this:
sendData();
*/
return {
sendData
};
}
};
</script>If the server makes an error (include validation) just send a response object with an error property.
{ error: 'Something bad happens' }This error appearing to the user above the card's footer.
If you want making some prepare before edit an event's card, use function editEventFn() inside the main component.
const editEventFn = async () => {
// Here some code
return;
};Override css custom properties on .vec-body class
<style>
.vec-body {
--vec-color-text-primary: red;
--vec-color-primary: blue;
--vec-calendar-max-height: calc(100vh - 3rem);
/* and more... */
}
</style>Full list of variables look here.