v3-events-calendar

v3-events-calendar is a Vue 3 component for displaying calendar dates and events listings. It provides a customizable, easy-to-use interface for adding and managing events on a calendar.

Installation

You can install the package using npm:

npm install v3-events-calendar

Screenshots

Currently it is responsive on mobile and desktop screens.

Desktop View

Mobile View

Usage

To use the component, import it and its styles into your Vue application:

import V3EventsCalendar from "v3-events-calendar";
import "v3-events-calendar/dist/style.css";

Basic Example

Here is a basic example of how to use the V3EventsCalendar component in your Vue application:

<template>
  <div>
    <V3EventsCalendar :events="events" primaryColor="teal" />
  </div>
</template>

<script setup>
import V3EventsCalendar from "v3-events-calendar";
import "v3-events-calendar/dist/style.css";
import { ref } from "vue";

const events = ref([
  {
    id: 1,
    url: "https://github.com/dev-charles15531",
    title: "Dummy Event Name 1",
    time: { start: "2023-01-01T12:00", end: "2023-01-01T14:00" },
    description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
    image: "test-img.png",
    tags: "#fun #nightout #dance #veterantime",
    location: "At the base",
    background: "teal",
  },
  {
    id: 2,
    url: "https://github.com/dev-charles15531",
    title: "Dummy Event Name 2",
    time: { start: "2024-06-11T02:00", end: "2024-06-11T14:00" },
    description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
    image: "test-img.png",
    tags: "#fun #nightout #dance #veterantime",
    location: "At the base",
  },
]);
</script>

Props

| Prop | Type | Required | Default | Description | | -------------- | ------- | -------- | ------- | ------------------------------------------------------------------ | | events | Array | Yes | - | An array of event objects. | | primaryColor | String | No | indigo | The primary color of the calendar. Must be one of the safe colors. | | showAddBtn | Boolean | No | true | Show the 'Add event' button |

Event Object Format

Each event object should have the following properties:

| Property | Type | Required | Description | | ------------- | ------ | -------- | ----------------------------------------------------------------------------------------------------- | | id | Number | Yes | Unique identifier for the event. | | title | String | Yes | The title of the event. | | time | Object | Yes | An object with start and end properties, representing the start and end times in ISO 8601 format. | | url | String | No | A URL associated with the event. | | description | String | No | A description of the event. | | image | String | No | An image associated with the event. | | tags | String | No | Tags associated with the event. | | location | String | No | The location of the event. | | background | String | No | The background color for the event. Must be one of the safe colors. |

Safe Colors

The safe colors available for use are:

• rose
• pink
• fuchsia
• purple
• violet
• blue
• indigo
• cyan
• teal
• emerald
• lime
• yellow
• orange
• red
• gray

Contributing

We welcome contributions to the v3-events-calendar package! If you'd like to contribute, please follow these steps:

1. Fork the repository.
2. Create a new branch with your feature or bugfix.
3. Commit your changes.
4. Push the branch to your fork.
5. Open a Pull Request.

Please ensure your code follows our coding standards and includes appropriate tests.

Reporting Issues

If you encounter any issues, please open an issue on our GitHub Issues page. Provide as much detail as possible, including steps to reproduce the issue and any relevant logs or screenshots.

Built With

• Vue 3
• Tailwind CSS
• Popper.js
• Vue Datepicker

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgements

Special thanks to all open-source projects that made this package possible.

Thank you for using v3-events-calendar! If you have any questions or feedback, please don't hesitate to reach out.