Skip to content

altinselimi/kalendar

Repository files navigation

🗓 Kalendar

npm version Open Source Love Open Source Love PRs Welcome

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 :

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