Professional Event Calendar For Vue

A professional Vue.js calendar component to manage events and appointments in an easy way.

How to use it:

1. Install and import the calendar component.

import { ProCalendar } from "@lbgm/pro-calendar-vue";
app.use(ProCalendar);

2. Add the pro-calendar component to the template and define your events.

<script setup lang="ts">
  import "@lbgm/pro-calendar-vue/style";
</script>

<template>
  <pro-calendar
    :events="evts"
  />
</template>

interface Appointment {
  date: string, //DateIsoString
  comment?: string,
  createdAt?: string, //DateIsoString
  id: string,
  updatedAt?: string, //DateIsoString
  keywords: string,
  name: string,
}
events: Appointment[];

3. Available component props.

date?: string | null;
view?: string;
events?: Appointment[];
loading?: boolean;
config?: {
  actions?: {
    view?: {
      enabled?: boolean;
      icon?: boolean;
      text?: string;
    };
    report?: {
      enabled?: boolean;
      icon?: boolean;
      text?: string;
    };
  };
  searchPlaceHolder?: string;
  eventName?: string;
  closeText?: string;
};

Preview:

Changelog:

v1.1.7 (08/21/2023)

• resolve: error on app.use(ProCalendar)

v1.1.6 (07/28/2023)

• Fix an issue on lib background
• hide sideEvent next block when month limit reached

Download Details:

Author: lbgm

Live Demo: https://github.com/lbgm/pro-calendar-vue

Download Link: https://github.com/lbgm/pro-calendar-vue/archive/refs/heads/main.zip

Official Website: https://github.com/lbgm/pro-calendar-vue

Install & Download:

# NPM
$ npm i @lbgm/pro-calendar-vue