Event Calendar & Date Picker For Vue 3 – Qalendar

Install & Download:

# NPM
$ npm i qalendar

Description:

Qalendar is a Vue 3 event calendar & date picker library written in Typescript.

How to use it:

1. Import and register the Qalendar.

import {Qalendar} from "qalendar";

export default {
  components: {
    Qalendar,
  },
  // ...
}

2. Add the Qalendar to the template and define your events as follows:

<template>
  <Qalendar :events="events" />
</template>

export default {
  components: {
    Qalendar,
  },
  data() {
    return {
      events: [
        {
          title: "Event 1",
          with: "Chandler Bing",
          time: { 
            start: "2022-07-16 12:05", 
            end: "2022-07-16 13:35" 
          },
          topic: '',
          location: '',
          // 'blue', 'yellow', 'green' or 'red'
          color: "yellow",
          colorScheme: '',
          isEditable: true,
          id: "123456",
          description: "Event Description 1",
          disableDnD: ['month', 'week', 'day'],
          disableResize: ['week', 'day']
        },
        // ...
      ],
    }
  },
}

3. Available component props.

config: {
  type: Object as PropType<configInterface>,
  default: () => ({}),
},
events: {
  type: Array as PropType<eventInterface[]>,
  default: () => [],
},
selectedDate: {
  type: Date,
  default: new Date(),
},
isLoading: {
  type: Boolean,
  default: false,
},

4. Config options.

data() {
  return {
    config: {
      week: {
        // Takes the value 'sunday' or 'monday'
        // However, if startsOn is set to 'sunday' and nDays to 5, the week displayed will be Monday - Friday
        startsOn: 'monday',
        // Takes the values 5 or 7.
        nDays: 7,
        // Scroll to a certain hour on mounting a week. Takes any value from 0 to 23.
        // This option is not compatible with the 'dayBoundaries'-option, and will simply be ignored if custom day boundaries are set.
        scrollToHour: 5,
      },
      month: {
        // Hide leading and trailing dates in the month view (defaults to true when not set)
        showTrailingAndLeadingDates: false,
      },
      // Takes any valid locale that the browser understands. However, not all locales have been thorougly tested in Qalendar
      // If no locale is set, the preferred browser locale will be used
      locale: 'de-DE',
      style: {
        // When adding a custom font, please also set the fallback(s) yourself
        fontFamily: 'Nunito', sans-serif,
      },
      // if not set, the mode defaults to 'week'. The three available options are 'month', 'week' and 'day'
      // Please note, that smaller devices can only utilize the day mode
      defaultMode: 'day',
      // The silent flag can be added, to disable the development warnings. This will also bring a slight performance boost
      isSilent: true,
      // Display a line indicating the current time 
      showCurrentTime: true, 
    }
  }
}

5. Events.

• @event-was-clicked
• @event-was-dragged
• @event-was-resized
• @updated-period
• @updated-mode
• @edit-event
• @delete-event

6. It also comes with a date picker component that allows the user to select a date from the calendar. Basic usage:

import { DatePicker } from "qalendar";

export default {
  components: { DatePicker },
  data() {
    return {
      // Disables the user from selecting dates other than in June 2022
      disableDates: {
        before: new Date(2022, 5, 1),
        after: new Date(2022, 5, 31),
      },
    };
  },
  methods: {
    handleUpdate(payload) {
      const { year, month, date } = payload;
    },
  },
};

<template>
  <DatePicker
    locale="en-US"
    firstDayOfWeek="sunday"
    :disable-dates="disableDates"
    :default-date="new Date(2022, 5, 1)"
    @updated="handleUpdate"
  />
</template>

Preview:

Changelog:

v3.8.1 (02/23/2024)

• bugfixes

v3.8.0 (02/23/2024)

• added polish translations

v3.7.0 (12/09/2023)

• enable resize of weekday event slot

v3.6.1 (12/01/2023)

• prevent faulty event bubbling when clicking on month day event

v3.6.0 (11/30/2023)

• exposes gotoPeriod method to top level

v3.5.1 (11/14/2023)

• bugfixes

v3.5.0 (07/13/2023)

• add config option to disable flyout closing when clicking outside

v3.4.0 (07/04/2023)

• add japanese language

v3.3.0 (06/29/2023)

• add new event datetime was clicked

v3.2.0 (06/23/2023)

• dark mode

v3.1.0 (06/16/2023)

• month: add highlight to current day

v3.0.0 (06/12/2023)

• new view for month mode on mobile
• flexible day boundaries. A day in the calendar can now span across two actual days, starting for example at 6AM and ending at 3AM the next day.
• month mode on small screens has a new layout, and monthEvent slot now only works on larger screens

v2.5.0 (04/06/2023)

• add Spanish translations

v2.4.0 (04/02/2023)

• custom day slot

v2.3.1 (03/26/2023)

• re-init scrollbar every time a drag & drop action is canceled

v2.3.0 (03/23/2023)

• Add Language Support for Ababic

v2.2.0 (03/18/2023)

• add Russian language

v2.1.3 (03/11/2023)

• correct line-height for hours in day timeline

v2.1.2 (03/09/2023)

• hide leading and trailing days in month on mobile

v2.1.1 (03/08/2023)

• prevent layout shifts in header

v2.1.0 (03/08/2023)

• allow user to optionally hide leading and trailing days in month mode

v2.0.0 (03/01/2023)

• month mode custom events
• named slot “event” has been replaced by “weekDayEvent”

v1.18.1 (02/28/2023)

• bugfix

v1.17.0 (01/31/2023)

• add dutch/nl lang

v1.16.0 (01/26/2023)

• bugfixes

v1.14.1 (12/04/2022)

• bugfixes

v1.14.0 (11/27/2022)

• enable month mode in small calendar

v1.13.0 (11/26/2022)

• add french language support

v1.12.1 (11/20/2022)

• prevent qalendar from resetting to default mode when being resized

v1.12.0 (11/16/2022)

• configurable day boundaries

v1.11.0 (11/16/2022)

• add day-was-clicked event for all modes

v1.10.1 (11/15/2022)

• Bugfix: missing type check on config.week.scrollToHour

v1.10.0 (11/05/2022)

• add line for current time

v1.9.1 (10/29/2022)

• improve event flyout position on small screens

v1.9.0 (10/21/2022)

• Added pt-BR language

v1.8.0 (10/08/2022)

• add scrollToHour option

v1.7.0 (09/17/2022)

• more precise dragging

v1.6.1 (08/23/2022)

• add perfect scrollbar to prevent layout shifts

v1.6.0 (08/13/2022)

• customizable events

v1.5.2 (08/07/2022)

• bugfixes

v1.5.1 (08/05/2022)

• bugfixes

v1.5.0 (07/30/2022)

• feat: clickable day intervals