🗓 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

| Option | Default Value | Type | Description | | ------------------- | -------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------ | | view_type | 'week' | string | Determines the mode of kalendar. You can pick either 'week' or 'day'. Day is recommended for mobile devices. | | cell_height | 10 | string | Determines the height in pixels of a cell | | start_day | new Date().toISOString() | string | Determines the week or day which is shown in the kalendar on first load | | style | 'material_design' | string | You can pick either 'material_design' or 'flat_design' (iOS) | | read_only | false | boolean | Enabled, viewers won't be able to interact with kalendar | | day_starts_at | 0 | integer | Determines what hour the kalendar starts from (0 to 24) | | day_ends_at | 24 | integer | Determines what hour the kalendar ends at (0 to 24) | | overlap | true | boolean | Enables ability to create multiple events (overlapping) at the same timeframe | | hide_dates | [] | Array | Hides the provided dates from kalendar. Array of strings each being a valid date in YYYY-MM-DD format. | | hide_days | [6] | Array | Hides the provided days from kalendar. Monday = 0 ... Sunday = 6 | | past_event_creation | true | boolean | Determines the ability of creating events that have happened in the past | | scrollToNow | true | boolean | Scroll kalendar to current time on render | | formatLeftHours | (date) => { return format(date, 'HH') } | function | A function which accepts an ISO date and determines how the hours on the left side are shown | | formatDayTitle | (date) => { return format(date, 'DDD dd') } | function | A function which accepts an ISO date and determines what the day column title shows | | formatWeekNavigator | (date) => { return ${startDate(date)} - ${endDate(date)}} | function | A function which accepts an ISO date and determines what the week view navigator (at the top) shows | | formatDayNavigator | (date) => { return new Date(date).toUTCString().slice(5, 11) } | function | A function which accepts an ISO date and determines what the day view navigator (at the top) shows |

Using Slots

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

Slots summary

| Slot name | Slot scope | Slot description | | ------------- | ----------------- | ------------------------------------------------------------------------------------ | | created-card | event_information | Display information about an existing event | | creating-card | event_information | Display information about an event which is being created (mouse is being dragged) | | popup-form | popup_information | Display information about a temporary event (after user finishes dragging the mouse) |

event_information definition

| Field | Type | Description | | | | ----------- | ------ | --------------------------------------------------------------------------------- | --- | --- | | start_time | String | Start time as ISO Date String of the event | | | | end_time | String | End time as ISO Date String of the event | | | | kalendar_id | String | Unique ID used for operations internally by kalendar | | | | key | String | Key of the event used internally by kalendar | | | | data | Object | Data object which can hold any type of information which may prove useful for you | | |

🛣 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