Kalendar
made with Vuejs

Kalendar是一个全功能、可伸缩、轻量级的浏览器日历组件，功能全面，响应迅速。

Kalendar有Vue，React和Angular等多个版本，这是此插件的Vue版本。

安装

Npm

npm i kalendar-vue portal-vue -S

使用

全局引入

import Vue from "vue";
import PortalVue from "portal-vue";
Vue.use(PortalVue);

组件中使用

import { Kalendar } from 'kalendar-vue';
...
components: {
    Kalendar,
    ...
},

示例

<template>
    <kalendar :configuration="calendar_settings" :events.sync="events" />
</template>
<script>
...
data: () => ({
    calendar_settings: {
      style: 'material_design',
      view_type: 'week',
      cell_height: 20,
      scrollToNow: true,
      start_day: new Date().toISOString(),
      read_only: false,
      day_starts_at: 0,
      day_ends_at: 24,
      overlap: true,
      hide_dates: ['2019-10-31'], // Spooky
      hide_days: [6],
      past_event_creation: true
    },
    events: [
      {
        from: '2020-03-18T18:00:00Z',
        to: '2020-03-18T19:00:00Z',
        data: 'Event 1',
      },
      {
        from: '2020-03-18T19:00:00Z',
        to: '2020-03-18T21:00:00Z',
        data: 'Olive & Friends',
      },
      ...
    ],
    ...
})
</script>