vue3-mycalendar
TypeScript icon, indicating that this package has built-in type declarations

0.5.0 • Public • Published

vue3-mycalendar

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.

Installation

Install with npm

  npm install vue3-mycalendar

Use:

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

Props

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.

Emitted Events

Event Name Payload Description
submitEvent EventInfo Triggered when a new event is added via the form.
handleDelete `Number String`

Required Fields in schedules

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.

Screenshots

App Screenshot

Upcoming Features

This project is actively maintained, and I plan to add exciting new features in the future. Stay tuned for regular updates and feature releases!

🚀 About Me

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.

License

MIT

Package Sidebar

Install

npm i vue3-mycalendar

Weekly Downloads

9

Version

0.5.0

License

none

Unpacked Size

69.2 kB

Total Files

7

Last publish

Collaborators

  • michael.brilz89