Kalendar
made with Vuejs

Kalendar

这是一个全功能、可伸缩、轻量级的浏览器日历组件。

相关问答
暂无相关问题
查看全部
简介及使用教程

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>

image.png

作者

Altin Selimi

@altinselimi

相关项目

这是一个适用于移动设备的日期时间选择器。
这是一个使用Vuetify开发的计划和日历组件。
这是一个轻巧、无依赖性、基于Vue.js的日历及日期选择器组件。