vue3-mycalendar is a powerful and customisable calendar component for Vue 3 that provides an easy way to view and manage calendar events and supports custom fields and customisable labels and styles.
Install with npm
npm install vue3-mycalendar
<template>
<ScheduleForm
:schedules="schedules"
:additional-fields="additionalFields"
custom-class="customize-schedule-form"
:labels-and-settings="labelsAndSettings"
:popup-fields="popupFields"
@handleDelete="handleEventDelete"
/>
</template>
<script setup>
import { ref, computed } from 'vue';
import ScheduleForm from 'vue3-mycalendar';
const schedules = ref([
// Array containing the list of events to be displayed on the calendar
{ id: 1, title: 'Meeting', date: '2024-10-01', start: '09:00', end: '10:00', color: '#ff0000', teacher: 'Malika Heaney', room: 'Room 1' },
{ id: 2, title: 'Workshop', date: '2024-10-02', start: '13:00', end: '15:00', color: '#ff0000', teacher: 'John Doe', room: 'Room 2' },
]);
const popupFields = ref([
// Array defining which fields should be displayed in the event details popup
'title', 'date', 'start', 'end', 'teacher', 'room'
]);
const additionalFields = ref([
// Array of additional fields to be included in the event form for customization
{ id: 'teacher', label: 'Teacher', type: 'text', model: 'teacher' },
{ id: 'room', label: 'Room', type: 'select', model: 'room', options: [{ id: 1, name: 'Room 1' }, { id: 2, name: 'Room 2' }] },
]);
const labelsAndSettings = computed(() => ({
// Object containing custom labels and settings for the calendar component
startTimeLabel: 'Start Time',
endTimeLabel: 'End Time',
dateLabel: 'Date',
submitButtonText: 'Add Event',
calendarWeekLabel: 'Week',
}));
// Handle the delete event action
const handleEventDelete = (id) => {
schedules.value = schedules.value.filter(event => event.id !== id);
console.log(`Event with ID ${id} deleted successfully`);
};
</script>
<style scoped lang="scss">
.customize-schedule-form {
--form-bg-color: #F2F2F2;
--button-bg-color: #009688;
--label-color: #123456;
}
</style>
Prop | Typ | Description |
---|---|---|
schedules | Array | A list of events that are displayed in the calendar. |
additionalFields | Array | A list of additional fields for the event form. |
customClass | String | A custom CSS class to customise the component layout. |
labelsAndSettings | Object | An object for customising the labels and text settings of the calendar component. |
popupFields | Array | An array of fields to be displayed in the popup for event details. |
Event Name | Payload | Description |
---|---|---|
submitEvent | EventInfo | Triggered when a new event is added via the form. |
handleDelete | `Number | String` |
Each event object within the schedules array must include the following standard fields:
Field | Typ | Description |
---|---|---|
id | Number | A unique identifier for the event. |
title | String | The title or name of the event. |
date | String | The date of the event (format: YYYY-MM-DD). |
start | String | The start time of the event (format: HH:MM). |
end | String | The end time of the event (format: HH:MM). |
color | String | A required background color for the event (e.g., #a4d8ff). |
Additional fields, such as info or custom fields defined in additionalFields, are optional but can be added to extend the event data as needed.
This project is actively maintained, and I plan to add exciting new features in the future. Stay tuned for regular updates and feature releases!
I am a motivated junior developer looking to grow through hands-on experience in various projects. I work as a full-stack developer in the cloud department of a cybersecurity product vendor, where I am dedicated to developing secure and robust applications. My goal is to continuously expand my skills and make a significant contribution to the tech industry.