npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

kodio-booking-calendar

v2.2.5

Published

[![npm version](https://badge.fury.io/js/kodio-booking-calendar.svg)](https://badge.fury.io/js/kodio-booking-calendar) [![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=102)](https://github.com/ellerbrock/open-source-badge/) [![Open

Downloads

4

Readme

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

  • 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 kodio-booking-calendar 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 'kodio-booking-calendar';
...
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 | | hourlySelection | false | boolean | Select an entire hour when you click 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