AiCalendar (Vue or Quasar)

Customizable and stylized calendar with events. It is compatible with Vue and is suitable as an alternative to q-date from Quasar. Настраиваемый и стилизованный календарь с событиями. Он совместим с Vue и подходит в качестве альтернативы q-data от Quasar.

Versions / Версии

vue: ^3.0 quasar: ^2.0

Installation / Установка

npm install ai-calendar
       or
npm i ai-calendar

Description of properties / Описание свойств

| props | type | en | ru |
|-------|-----|-----|-------|
| isQuasar | boolean | Do you use Quasar? If the value is true, then the q-icon will be used for the button and you can use any icons from quasar.conf (eva, mdi,...). And if the value is false, then there will be a standard switch symbol "‹›", but it is also possible to connect mdi icons by specifying: "mdi mdi-chevron-left" | Используете ли вы Quasar? Если значение true, то будет использован q-icon для button и вы можете использовать любые иконки из quasar.conf (eva, mdi,...). А если значение false, то будет стандартный символ переключателей "‹›", но возможно и подключение mdi иконок, указав: "mdi mdi-chevron-left" | | eventsColors | array | An array with event colors. There are already 7 colors included as standard, but you can specify your own. If the events property already has a color, then the array is ignored | Массив с цветами событий. Стандартно включены уже есть 7 цветов, но вы можете указать свой. Если в свойстве events уже есть color, то массив игнорируется | | locale | object | Used for localization, it works in English as standard, which you can change. The weekDays property contains an array of days of the week (7 days), the MonthNames property contains an array of month names | Используется для локализации, стандартно работает на английском языке, который вы можете поменять. Свойство weekDays содержит массив дней недели (7 дней), свойство monthNames содержит массив названий месяцев | | fontSizeDays | integer | Font size for displaying days in the calendar | Размер шрифта для отображения дней в календаре | | fontSizeIcon | integer/float | The size of the button icons is the size in em. Maximum size 2em | Размер иконок кнопок размеры в em. Максимальный размер 2em | | iconLeft | string | The icon of the "left" button. If isQuasar = true, it is compatible with all icons from the Quasar framework | Иконка кнопки "влево". Если isQuasar = true, то совместим со всеми иконками из фреймворка Quasar | | iconRight | string | The icon of the "right" button. If isQuasar = true, it is compatible with all icons from the Quasar framework | Иконка кнопки "вправо". Если isQuasar = true, то совместим со всеми иконками из фреймворка Quasar | | yearMin | integer | Minimum year to generate the list | Минимальный год, для генерации списка | | yearMax | integer | The maximum year to generate a list | Максимальный год, для генерации списка | | swipable | boolean | Can I scroll through? If the value is true, then you can swipe on computers and smartphones. By default, the property has the value true | Можно пролистывать? Если значение true, то можно свайпить на компьютерах и смартфонах. По дефолту свойство имеет значение true | | heightCalendar | boolean | Property for changing the height of the calendar. By default, the property has the value false | Свойство для изменения высоты календаря. По дефолту свойство имеет значение false | | showFilter | boolean | Activating the filtering function by event type | Активация функции фильтрации по типу событии |
| iconFilter | string | The icon of the "filter" button. If isQuasar = true, it is compatible with all icons from the Quasar framework | Иконка кнопки "фильтр". Если isQuasar = true, то совместим со всеми иконками из фреймворка Quasar |
| colorButtonIcon | string | Sets the color of the button. If isQuasar = true, it takes the system color dark or light | Задаёт цвет кнопки. Если isQuasar = true, то принимает цвет системы dark или light |
| types | array | An array of event types. Each array property contains a type, a name, and a color. | Массив типов событий. Каждое свойство массива содержит тип, имя и цвет |

Connection example / Пример подключения

Minimal with default properties / Минимальный тип с дефолтными свойствами:

<ai-calendar/>

Old syntax without "setup" / Старый синтаксис без "setup"

<template>
  <div style="width: 100%; max-width: 450px; margin: 0 auto;">
    <ai-calendar
        :events="[
            {
              date: '2025-06-15',
              events: [{ type: 'alert', name: 'Alert name', description: '...' }]
            }
           ]"
        @date-selected="handleDateSelection"
    />
  </div>
</template>

<script>
import AiCalendar from 'ai-calendar';
import 'ai-calendar/dist/ai-calendar.css'; //Add CSS style
export default {
  components: {
    AiCalendar
  },
  methods: {
    handleDateSelection({ date, events }) {
      console.log('Date: '+new Date(date).toLocaleDateString('en-CA', { year: 'numeric', month: '2-digit', day: '2-digit' }))
      console.log(events)
    }
  }
};
</script>

New syntax for setup (Composition API). An example with many properties. Новый синтаксис setup (Composition API). Пример с множеством свойств.

<template>
  <div style="width: 100%; max-width: 450px; margin: 0 auto;">
    <ai-calendar
        @date-selected="handleDateSelection"
        :events="events"
        :is-quasar="true"
        icon-left="eva-arrow-ios-back-outline"
        icon-right="eva-arrow-ios-forward-outline"
        :font-size-days="1.1"
        :font-size-icon="1.2"
        :year-min="3"
        :year-max="5"
        :locale="locale"
        :swipable="true"
        :height-calendar="false"
        :show-filter="true"
        color-button-icon="#333"
        :types="types"
    />
  </div>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue';
import AiCalendar from 'ai-calendar';
import 'ai-calendar/dist/ai-calendar.css'
// Определяем props
const props = defineProps({
  events: {
    type: Array,
    default: () => []
  },
  eventsColors: {
    type: Array,
    default: () => ['#FF9800', '#4CAF50', '#F44336']
  },
  locale: {
    type: Object,
    default: () => ({
      weekDays: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'],
      monthNames: [
        'Январь', 'Февраль', 'Март', 'Апрель',
        'Май', 'Июнь', 'Июль', 'Август',
        'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'
      ]
    })
  },
  iconLeft: {
    type: String,
    default: null
  },
  iconRight: {
    type: String,
    default: null
  }
});

// Определяем emit
const emit = defineEmits(['date-selected']);
const emitEvents = defineEmits(['events']);
// Обработчик выбора даты
const handleDateSelection = ({ date, events }) => {
  emit('date-selected', date);
  emitEvents('events', events);
};

// Пример данных
const events = [
  {
    date: '2025-06-15',
    events: [
      { type: 'alert', name: 'Alert name', description: '...' }
    ]
  },
  {
    date: '2025-06-16',
    events: [
      { type: 'alert', name: 'Alert name', description: '...' },
      { type: 'warning', name: 'Warning name', description: '...' },
      { type: 'info', name: 'Info name', description: '...'},
    ]
  }
];
const types = [
  { type: 'alert', name: 'Alert', color: '#e54e4e' },
  { type: 'warning', name: 'Warning', color: '#e5b34e' },
  { type: 'info', name: 'Info', color: '#4e6fe5' },
  { type: 'success', name: 'Success', color: '#4ee58b' }
];
const locale = {
  weekDays: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  monthNames: [
    'January', 'February', 'March', 'April',
    'May', 'June', 'July', 'August',
    'September', 'October', 'November', 'December'
  ]
};

const iconLeft = 'arrow_left';
const iconRight = 'arrow_right';
</script>