Professional Event Calendar For Vue

Install & Download:

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

Description:

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:

Professional Event Calendar For Vue

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

Add Comment