Vue 3 Calendar

( Date Picker / Meeting or Event Scheduler )

Compatible only with Vue 3

Install

npm i v3-calendar

Use

import VueCalendar from "v3-calendar";

<v3-calendar
  width="800px"
  type="events"
  @onClick="selectionOutput"
  :data="eventData"
/>

import { reactive } from "vue";
import V3Calendar from "v3-calendar";

export default {
  name: "Calendar",
  components: {
    V3Calendar,
  },
  setup() {
    const eventData = reactive([
      { id: 1, title: "test", date: "2022-03-12" },
      { id: 2, title: "test # 2", date: "2022-03-12" },
    ]);
    const selectionOutput = (v) => {
      console.log(v); // onclick date or event you will get value in "v"
    };
    return {
      eventData,
      selectionOutput,
    };
  },
};

Features

• Easy to use
• Responsive
• DatePicker (Single / Mutli Selection / Date Range)
• Meeting Scheduler ( Event / Meeting Handling )

Properties

• type

  • Type: String
  • Values: events (default) | date-picker

• selection

  • Type: String
  • Values: single (default) | multi | range

• data

  • Type: Array
  • Values:

  [
    {
      "id": 1, // Required
      "start": "09:00",
      "end": "13:00",
      "date": "2022-03-10", // Required
      "title": "Testing Event" // Required
    }
  ]

• width

  • Type: String
  • Values: values with px, em and % prefixes allowed 100% is by (default)

Custom Color Properties

you can write color names / codes / rgb / rgba

• backgroundColor
• Type: String
• Values: #e0e0e0% is by (default)
• dateColor
  • Type: String
  • Values: #1a73e8% is by (default)
• todayColor
  • Type: String
  • Values: #f37021% is by (default)
• headerColor
  • Type: String
  • Values: #464646% is by (default)

Event

onClick