lbgm / vue-pro-calendar

Professional Calendar for Vue

Pro Calendar

Another one Best Professional Calendar ever. looking for Angular version ?

Based on vite for Vue 3

• Pro Calendar
  • Install
  • Screenshot with Native Datepicker
  • Screenshot with VCalendar Datepicker
  • Props & Types
  • Use
  • Events
  • Slots
  • Custom HTML Events fired

Install

npm i vue-pro-calendar

Screenshot with Native Datepicker

Screenshot with VCalendar Datepicker

Props & Types

type T_View = 'day' | 'week' | 'month';

type T_Action = {
  icon?: boolean;
  text?: string;
}

type Configs = {
  viewEvent?: T_Action;
  reportEvent?: T_Action;
  searchPlaceholder?: string;
  eventName?: string;
  closeText?: string;
  nativeDatepicker?: boolean;
  todayButton?: boolean;
  firstDayOfWeek?: 0 | 1;
}

type Appointment = {
  id: string;
  name: string;
  date: string; //DateIsoString
  keywords: string;
  comment?: string;
  createdAt?: string; //DateIsoString
  updatedAt?: string; //DateIsoString
}

// interface
interface Props {
  date?: string;
  view?: T_View;
  events?: Appointment[];
  loading?: boolean;
  config?: Configs;
}

// defaults
{
  date: undefined,
  view: "week",
  events: () => [],
  loading: false,
  config: () => ({ ...DEFAULT_CONFIGS }),
}

You can import DEFAULT_CONFIGS from vue-pro-calendar;

nativeDatepicker:

false or undefined : use VCalendar DatePicker instead

property?: T_Action:

undefined : the action is disabled

Use

main.ts

import { ProCalendar } from "vue-pro-calendar";

//...

app.use(ProCalendar);

App.vue

<script setup lang="ts">
import "vue-pro-calendar/style";
import { ref, type Ref } from "vue";
import type { Configs, Appointment } from "vue-pro-calendar";

const cfg = ref<Configs>({
  viewEvent: undefined,
  reportEvent: {
    icon: true,
    text: "",
  },
  searchPlaceholder: "",
  eventName: "",
  closeText: "",
  nativeDatepicker: true,
  todayButton: true,
  firstDayOfWeek: 1,
});

const evts: Ref<Appointment[]> = ref([
  {
    date: "2022-11-19T14:00:00.000Z",
    comment: "",
    id: "cl32rbkjk1700101o53e3e3uhn",
    keywords: "Projet BAMBA",
    name: "MONTCHO Kévin",
  },
  //...
]);

</script>

<template>
<!-- all props are optional -->
<pro-calendar
  :events="evts"
  :loading="false"
  :config="cfg"
  view="month"
  date="2022-11-10T00:00:00.000Z"
  @calendarClosed="void 0"
  @fetchEvents="void 0"
/>
</template>

Events

@calendarClosed:

This event is fired when user clicks close button.

@fetchEvents:

This event is fired when date selected changes. $event: { start: string; end: string }. start and end are iso string date.

Slots

Draw your own calendar using scoped slots

<pro-calendar
  :events="evts"
  :loading="false"
  :config="cfg"
  view="week"
  date="'isoStringDate'"
>
  <template #leftSwitchArrow>
    <!-- replace left switch arrow with this slot -->
  </template>

  <template #rightSwitchArrow>
    <!-- replace left switch arrow with this slot -->
  </template>

  <template #closeButton>
    <!-- replace close button with this slot -->
  </template>

  <template #loader="{ calendarGotLoading }">
    <!-- replace calendar loader with this slot -->
  </template>

  <template #searchIcon>
    <!-- replace search widget icon with this slot -->
  </template>

  <template #dateLeftArrow>
    <!-- replace date picker left arrow with this -->
  </template>

  <template #dateRightArrow>
    <!-- replace date picker right arrow with this -->
  </template>

  <template #sideEvent="{ dateSelected, calendarEvents }">
    <!-- use this slot to show side event in appearance you want -->
    <!--
      dateSelected: Date;
      calendarEvents: Appointment[]; // all events
    -->
  </template>

  <template #eventCard="{ date, time, cardEvent }">
    <!-- use this slot to show calendar event in appearance you want -->
    <!--
      date: Date;
      time: string;
      cardEvent: Appointment[]; // events according to date/time
    -->
  </template>
</pro-calendar>

Custom HTML Events fired

calendar.request.view & calendar.request.report

When the user clicks on view or report action, a custom html event is fired with the id of event in detail. You can listen these events like this:

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { E_CustomEvents } from "vue-pro-calendar"

onMounted(() => {
  [E_CustomEvents.VIEW, E_CustomEvents.REPORT].forEach((e: string) => {
    document.body.addEventListener(e, (event: Event | CustomEvent) => {
      console.log({ event });
    });
  });
});

</script>

On default #sideEvent template, when user clicks on event, calendar.request.view is fired.

vue-pro-calendar's Issues

Bug on the latest version 1.1.6-alpha.3

I am facing two issues with my Quasar Vue.js project:

Compatibility Issue:
I am unable to make it work with version 1.1.6-alpha.3 of a certain package. When attempting to use this latest version, I encounter the error message: vue__WEBPACK_IMPORTED_MODULE_0__.hasInjectionContext) is not a function. It appears that there might be some compatibility problems between Vue.js and its dependencies.

Incorrect Date Display:
Moreover, when reverting to the older version, I encounter issues with date display. If a date is supposed to be shown as the 26th of the month, it ends up displaying as the 27th of July instead.

To address these concerns, I would highly appreciate any assistance you can provide. I have attached a screenshot for your reference.

Thank you again for your help!

How could I add more languages?

Hello, I love how the calendar works, great job!
The trouble is that I would like to have it in Spanish, how could I do that in my Vue 3 project?
Once I have the translations done, is it something that could be added in the project, so everyone have it? (I'm kind of new to Open-Source git, and don't know how to contribute, hehe)

Thanks for everything!

Locales conflicts

GDay.

Here is the issue, if i am using i18n to, then vue-pro-calendar will replace my translations by him own.
Any solutions?

thanks

error on app.use(ProCalendar)

So I got an error on app.use(ProCalendar), it says :
Argument of type '{ install: (app: App) => void; }' is not assignable to parameter of type 'Plugin_2'.
Type '{ install: (app: App) => void; }' is not assignable to type '{ install: PluginInstallFunction; }'.
Types of property 'install' are incompatible.
Type '(app: App) => void' is not assignable to type 'PluginInstallFunction'.
Types of parameters 'app' and 'app' are incompatible.
Property 'runWithContext' is missing in type 'App' but required in type 'App'.

what should I do then??

Add button "Today"

After click on Today button we should return view to current day.
The best position of that button before navigation arrow.

License?

Hello!

Your plugins look promising. I do wonder if you could include a license in your project to give us ideas on how to use your work?

Thank you so much,

Yan

FirstDayOfWeek

Hello!,

I try to start the calendar, at Monday, but I think It's impossible.. :)

I believe it would be incredibly helpful for users like me if the library could include a property like firstDayOfWeek: 1 that allows us to customize the starting day of the week.

Thanks a lot 👍🏻 :D