Vue Calendar

Library designed to facilitate the creation of interactive calendars in applications using Vue >= 3.

Built with Vue 3 Composition API and Vite for optimal performance and developer experience.

Demo

Vue Calendar

Install

$ yarn add @glhrmoura/vue-calendar

or

$ npm install @glhrmoura/vue-calendar

Usage

Options API

<template>
  <Calendar
    :events="events"
    :ranges="ranges"
  />
</template>

<script>
  import { Calendar } from '@glhrmoura/vue-calendar';

  export default {
    components: {
      Calendar,
    },
  
    data() {
      return {
        events: [
          {
            all: true,
            interval: { from: '05:00', to: '06:00' },
          },
          {
            date: new Date,
            interval: { from: '06:00', to: '08:45' },
          },
          {
            wday: ['monday', 'wednesday', 'thursday', 'friday'],
            interval: { from: '09:00', to: '11:00' },
          },
          {
            wday: 'thursday',
            interval: { from: '11:00', to: '12:00' },
          },
        ],

        ranges: [
          {
            start: new Date,
            end: new Date,
          },
          {
            start: new Date,
            end: new Date,
          },
          {
          /**
           * Passing only the {start} property we will have a range that will 
           * start on the given date and cover all subsequent dates
           **/
            start: new Date,
          },
        ],
      };
    },
  };
</script>

Composition API

<template>
  <Calendar
    :events="events"
    :ranges="ranges"
    @select-date="onSelectDate"
    @select-dates="onSelectDates"
  />
</template>

<script setup>
import { ref } from 'vue';
import { Calendar } from '@glhrmoura/vue-calendar';

const events = ref([
  {
    all: true,
    interval: { from: '05:00', to: '06:00' },
  },
  {
    date: new Date(),
    interval: { from: '06:00', to: '08:45' },
  },
  {
    wday: ['monday', 'wednesday', 'thursday', 'friday'],
    interval: { from: '09:00', to: '11:00' },
  },
  {
    wday: 'thursday',
    interval: { from: '11:00', to: '12:00' },
  },
]);

const ranges = ref([
  {
    start: new Date(),
    end: new Date(),
  },
  {
    start: new Date(),
    end: new Date(),
  },
  {
    start: new Date(),
  },
]);

const onSelectDate = (data) => {
  console.log('Selected date:', data.date);
  console.log('Events on this date:', data.events);
};

const onSelectDates = (data) => {
  console.log('Selected dates:', data.dates);
};
</script>

Properties

Calendar

| Property | Description | Type | Default | | ------------- | ---------------------------------------------------------- | ------------------- | -------------- | | events | Events that will be shown on the calendar | Event[] | [] | | ranges | A range of dates that will be highlighted in the calendar | Range[] | [] | | rows | Number of lines that the calendar will show | Number | 5 | | controls | Indicates whether action buttons will be shown | Boolean | true |

Event

| Property | Description | Type | | ----------------- | --------------------------------------------------------------------------------------------------- | --------------------- | | wday | Used to define recurring events | String or String[] | | date | Used to set events on fixed dates (Takes precedence over wday) | Date | | all | Used to define that an event will happen every day. This property takes precedence over all others | Boolean | | interval | An object that informs the start and end time of the event | Interval |

Range

| Property | Description | Type | | --------------- | ------------------ | ------ | | start | Range start date | Date | | end | Range end date | Date |

Interval

| Property | Description | Type | | --------------- | -------------------- | -------- | | from | Event start time | String | | to | Event end time | String |

Events

| Name | Description | Callback Arguments | | --------------- | --------------------------------------------------------------- | ---------------------------------------- | | select-date | When only one date is selected with a simple click | { date: Date, events: Event[] } | | select-dates | When multiple dates are selected by clicking and dragging | { dates: Date[] } |

License

MIT

Copyright (c) Guilherme Moura