altinselimi / Kalendar

🗓 Kalendar

Your best friend when it comes to events management in Vue.

🕹 Live Demo

Kalendar Showcase

Running the Demo Locally

You can run the demo locally :

• git clone https://github.com/altinselimi/kalendar.git
• cd kalendar
• npm install
• npm run serve

The code for the demo app is in src/serve-dev.vue - a small but complete calendar app. This is a good place to learn how thing work and a good starting point for your own implementation.

🏁Getting Started

• Install plugin and its dependencies from npm

npm install kalendar-vue portal-vue -S

• The easiest option is to copy the demo app from src/serve-dev.vue into your project and start from that.

Step by Step:

• Import plugin and its dependencies in your component

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

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

• Provide Appointments array. This array will be the source of the appointments which are rendered in the calendar. Specify the start and end times of each appointment as ISO format strings. You must use the sync modifier when passing the configuration prop to the component or else switching weeks will break.

<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>

🎛 Kalendar Options

Using Slots

The plugin can turn incredibly useful using scoped slots. You can customize all the essential parts of it.

Slots summary

event_information definition

🛣 Roadmap

• ⚠️ Refactor so code is readable/understandable and others can help--
• Add Read-Only mode
• Remove date-fns dependency
• Improve performance _ Hard-code split value to 5mins, and use split-value-prop to only mark current_min%split-value-prop === 0 _ Using upmentioned technique, day hours can be hardcoded into JSON, while the date part would come in from for in loop * Use event delegation and remove listeners from every cell. Use event target instead, to manipulate the cell DOM object.
• Add month view
• Write docs
• Write unit-tests