altinselimi/kalendar

Full featured, responsive, lightweight calendar in the browser.

kalendar's Issues

Mobile view add calendar event

I’m unable to add a calendar event via the mobile view. Is there planned support for this feature?

A new view type?

Hi, do you have any plan to add Year View?
Thanks for all...

Disabling hours

Hello, how can I disable hours in the table? I just want to customize kalendar so I can assign some appointments for a whole day omitting hours. Thank you!

Set start-date

Hi, I am unsure whether or not this is possible yet, but something like the ability to always have today's date as the left-most date and only see forwards in the calendar.

Cheers

Changing the cell height breaks the hour indicator

When changing the cell height, the hour indicator does not scale accordingly, resulting in an incorrect position of the indicator. This also affects the scrollToNow, as this function focusses on the hour indicator.

Attached is a screenshot with this issue. At the time of the screenschot it is 14:25, while the hour indicator shows it's about 20:45.

Start week on monday

Hi, is it possible to start the week on monday, it's the customary way to display a calendar in Europe.

Cheers

Add start_hour/end_hour support

The day view is always from 0 a.m. to 11 p.m. which is not always convenience, because we merely add event in the very early morning or too late in the night.
So I add start_hour/end_hour support to customize this behavior like the following snapshot.

click event

hi how to handle the click on the event ?( for editing or delete it ) i tried to add @click to details-card but it will not be fired

demo doesn't work

Week Navigator shows same date for start and end dates

If you look at your codepen example, the start and end date in the week navigator is the same. I'm using that code as my starting point, and I'm not sure how to fix this.

Support switching between 24 and 12 hour time

Feature Request:

Can we add a configuration parameter to switch between 12 hour and 24 hour time (1:00 pm vs 13:00 pm)?

Calendar is only render without error between day_starts_at and day_ends_at values

Hi,

The Kalendar here is configured to permit event between 8 an 22 hours for example. If I try to render the Kalendar outside this window, I catch this error:

[Vue warn]: Error in render: "TypeError: _vm.passedTime is null"

TypeError: Cannot read property 'distance' of null

Hey there, it appears when (Ex):

day_starts_at: 8
day_ends_at: 22

And the actual time is more than 22!

Disable selection on a published event

Hello! I want to put just one item every hour! How can I disable that, because now, I can select and save items at the same hour

Any support for i18n?

Hi, this library has any support for i18n?

Event cards are blank

I have set up a simple project and am pulling data from Google Calendar and passing it to Kalendar.

Kalendar creates event cards in the right places on the calendar but they are all blank. See attached image.

<template>
  <Kalendar :configuration="calendar_settings" :events="events" />
</template>

<script>
import Vue from 'vue';
import PortalVue from 'portal-vue';
import {Kalendar} from 'kalendar-vue';
Vue.use(PortalVue);

export default {
  name: 'Calendar',
  components: {
    Kalendar,
  },
  data: () => ({
    calendar_settings: {
      day_starts_at: 7,
      cell_height: 10,
      scrollToNow: true,
      read_only: false,
      past_event_creation: false
    },
   events: [
          {
      summary: 'B in M 🎤',
      start: { dateTime: '2020-03-18T18:00:00Z', timeZone: 'Europe/Dublin' },
      end: { dateTime: '2020-03-18T19:00:00Z', timeZone: 'Europe/Dublin' },
    },
    {
      summary: 'O & F 🎤',
      start: { dateTime: '2020-03-18T19:00:00Z', timeZone: 'Europe/Dublin' },
      end: { dateTime: '2020-03-18T21:00:00Z', timeZone: 'Europe/Dublin' },
    },
    ...  // many more
     ]
  }),

Events loaded via Ajax not showing

Hey, the events that has loaded via axios are not loading, the kalendar has the events but they are not showing.

enhancement "requests"

Hi, this looks like an amazing lib that I'll probably end up using, just have 2 things that would be cool if they could be implemented in the future, maybe in that rewrite you're doing right now, there's no hurry as I'm in early dev-stage of my project right now

1: on the week/day views (side note: why is the config for week view 'month'?) would it be possible to have a date/week-picker to select the current range in addition to the navigation arrows?

2: would it at all be possible to implement events that can cross over midnight? currently you have a start and end time and a date property, the project I'm working out is going to be used in multiple timezones, so even when someone creates an event from 4pm till 10pm american time, that would be a '2 date event' when converted to a european timezone

Not able to add kalendar-vue dependency (dependencies were not found)

Created a new project cal with vue cli 3.0.0

vue create cal
npm install --save kalendar-vue

then in HelloWorld.vue added the following:

import { Kalendar } from 'kalendar-vue';
import 'kalendar-vue/dist/kalendar-vue.css';

It gave me the following error:

ERROR Failed to compile with 2 errors 08:35:51

These dependencies were not found:

• kalendar-vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/components/HelloWorld.vue?vue&type=script&lang=js&
• kalendar-vue/dist/kalendar-vue.css in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/components/HelloWorld.vue?vue&type=script&lang=js&

To install them, you can run: npm install --save kalendar-vue kalendar-vue/dist/kalendar-vue.css

More documentation

Hey, could you please add more documentation? Options, etc...

Disable event creation (i.e., read-only mode)

Is it possible to have a read-only mode where event creation is disabled?

TypeError: Cannot read property 'some' of undefined

If I click into the cell, to create new event, I got error.
TypeError: Cannot read property 'some' of undefined
at VueComponent.clearCreatingLeftovers

Remove Kalendar hours time and conflict with boostrap.css (v4.2)

1. Is there a way that I could remove the hours time and just display 1 row for adding event?

2. There is conflict with my bootstrap v4.2 and kalendar.css ?

when I place the component in one of my nuxt.js views I get the following error (Cannot set property 'getEvents' of undefined)

Split current day from configuration

Split current_day from configuration and provide it as a separate prop. In the same time remove the need for .sync modifier on kalendar props.

the calendar shows only one event per hour

if there are two events with the same date and the same hour, the calendar display only one event

please check this error, thx

[Demo] Time formatting broken on demo

If you drag to create a new event from bottom to top after 12PM the times for the events are wrong.

Import CSS throws not found error

When doing this step,
import 'kalendar-vue/dist/KalendarVue.css';

I get the error
Module not found: Error: Can't resolve 'kalendar-vue/dist/kalendar-vue.css' in '/home/projectname/projectname/components'

Is there another way to import them, or should I just download the CSS?

Also, when using <kalendar :configuration="calendar_settings" :appointments="appointments"/>, is this all you need in the HTML part to make it render the calendar, or do you have to provide the full scoped slots stuff too?

Thanks.

different locale than en

is there a possibility to use other languages than English for displaying calendar?

Change period shown in day view

Hi Altin,

I would like to make a change to the day view that it is possible to limit the period of the day that is displayed. Now it displays the full day. I would like to limit it to a specific period, i.e. business hours (8:00-17:00).

Can you please provide me with guidance how to best approach this change?

Regards, Stephen

Remove console.log in kalendar-cell.js

In the kalendar-cell file you have a console.log statement that really spams the console:

See here

Can you remove it? Thanks!

Crash when creating event until end of day

When trying to add an event that lasts until the end of the day (23:59:59), the whole thing just crashes. This is reproducible even in the demo (as seen bellow).

How to do new events Hourly?

Hey, when you select the hours for doing an event, you can choose with 10 min range, what if I only want hourly or 30 minutes rang?

missing modules

I'm using vue as frontend with meteor and get this error after install npm i kalendar-vue -S:

"If you notice problems related to these missing modules, consider running:
meteor npm install --save kalendar-vue" over and over again

any suggestions ???

Mobile view?

Awesome component.

But i found a mobile view, checking on some mobile app agent. If we check the mobile views of the day there is no reason to check things like that. Maybe a media query to check the width of the browser. But i would prefer not to check those, Phones and tablets are wider than most modern desktops when checking.
https://www.w3schools.com/howto/howto_js_media_queries.asp

I just remove the media is mobile check in the element and everything worked better, maybe a touch drag in sync with the mouse down check to add.

When you add a overflow hidden on the .day-indicator class it still fits as it should :)

.day-indicator {
    padding-left: 5px;
    overflow: hidden;
    @media only screen and (min-width: 600px) {
        padding-left: 16px;
     }
}

Also would like to help. Don't know what the status is of the new developments. But if you know, please let us know here. Would like a nice standalone calendar for vue 👍

Overlapping events

Hi Altin,

Excellent component! Really impressed.

I would like to make an enhancement and need your guidance where to start. The current implementation does not position events correctly if they overlap. They are positioned directly over each other. It would be if they would be positioned next to each other. In other words, that there width would be halved. If you would like to test this you can add the following events to the codepen you provide.

  {
    from: "Tue Nov 05 2018 01:00:00",
    to: "Tue Nov 05 2018 03:00:00",
    date: "2018-11-05",
    data: {
      title: "My Birthday",
      description: "Lorem ipsum dolor sit amet."
    }
  },
  {
    from: "Tue Nov 05 2018 02:00:00",
    to: "Tue Nov 05 2018 04:00:00",
    date: "2018-11-05",
    data: {
      title: "My Birthday",
      description: "Lorem ipsum dolor sit amet."
    }
  }

To better see the result switch to day view.

An additional problem I have noticed that it is not possible to create an overlapping event. The schedule is not clickable.

Regards, nidkil

crypto.getRandomValues doesnt work on IE11

For IE11
the use of crypto as a global variable doesnt work on IE11 as crypto exists not as window.crypto but as window.msCrypto.

this can be fixed by adding const crypto = window.crypto || window.msCrypto; to kalendar-container and kalendar-cell.

Note, that if later adding type definitions or for users using typescript, the msCrypto would have to be added

declare global {
  interface Window{
    msCrypto: Crypto;
  }
}

Other options could be using non mscrypto polyfills such as https://github.com/gaswelder/window-crypto

Add support for minimum cell(s) selection

Have an option that users can use to determine what is the lowest allowed time selection .e.x: 5 minutes, 10 minutes etc.

KalendarVue.common.0.worker.js 404 (Not Found)

What's this? Is a new project with sample data...

adjusting split_value responsively

Hi, I was wondering if I can upgrade the way split_value is handled recently.

Right now, in order to avoid problems in displaying appointments in my Calendar,
split_value is always equal to the greatest common divisor between my appointments durations.

Meaning if I have appointments with duration 15 min and another one with duration 20 min, split_value will equal 5 so all the appointments can be displayed without any error.

But this calculation is done globally among all my appointments, if I have 200 appointments with a duration of 20 minutes and 1 old appointment with a duration of 15 minutes, the split_value will still be 5, and it will be displayed like this for every day and every week shown in the calendar.

One way to enhance this that would be to calculate the geatest common divisor, not on all the appointments, but only on those that are displayed to the user. Thus the split_value would be calculated reactively to always match the greatest common divisor of the appointments displayed.

I saw that the component kalendar-week-view contains a computed property witch contains only the appointments displayed. Would it be possible to pass it via scoped-slots or events to parent component that contains the kalendar ?

I also saw that every time we change the week-view, there is a change event that is emitted. If the value of the dates that are displayed could be passed in this event, this could also be a way to retrieve info about dates that are actually displayed. So we can then calculate and optimise the split_value to be the greatest common divisor among the appointments that are showned.

BR

Kalendar + Firebase database

Hi everyone,

Ive 2 issues using this module with my firebase database.

First, the div "details-card" isn't being taken into account when im pulling appointments from my firebase database.

As you can see on the screenshot, appointments are being display, but when i'm using the following code in order to control what's inside the appointments blue rectangles, nothing is being display.

<div id='slot' slot="details-card" slot-scope="{appointment_props}">
            {{appointment_props.start_value.value | moment("add", "8 hours","hh:mm a")}} to 
             {{appointment_props.end_value.value | moment("add", "8 hours","hh:mm a")}}
 </div>

My second issue is that i want to be able to update or remove appointments when user clicks on them. It is related to the first issue obviously but its also related to the css of kalendar which indicated a "pointer-event:none" on the details-card.

Thanks very much in advance.

Event time not positioned correctly

Hi Altin,

I have noticed that the event time is not positioned correctly. It falls outside the event area. You can test this with the codepen you provide using the following event.

  {
    from: "Tue Nov 05 2018 02:00:00",
    to: "Tue Nov 05 2018 04:00:00",
    date: "2018-11-05",
    data: {
      title: "My Birthday",
      description: "Lorem ipsum dolor sit amet."
    }
  }

The fix is pretty straight forward, changing the .existing-event .time from 12px to 50px. See below.

.existing-event .time {
    right: 50px;
}

Regards, nidkil

Navigation to Next or Previous Week Slow

Sweet library! @altinselimi

One issue I noticed is that the navigation between weeks is really slow when I added to my project. It takes about 4-7 seconds to load the next week, no existing appointments. Initial load of the component is quick. Everything else seems to work fine. No console errors.

Any idea what might be causing this? Navigation throughout my project is fast. Just this component.

scss is not scoped

The scss is not scoped, causing problems with styling when embedding Kalendar in a website.

normalizeDate

Hi!

I`m trying to use this compoment.
I already followed this repo tutorial and the codepen example. But i getting these errors:

Failed to resolve filter: normalizeDate

vue.esm.js?efeb:571 [Vue warn]: Unknown custom element: <portal> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Kalendar> at kalendar-container.vue
       <Agenda> at src\components\agenda\Agenda.vue
         <VuesticLayout> at src\vuestic-theme\vuestic-components\vuestic-layout\VuesticLayout.vue
           <AppLayout> at src\components\admin\AppLayout.vue
             <App> at src\App.vue
               <Root>

Is there something i'm forgeting to add to my app?

Thanks in advance.

Only events with start end time equal to the full hour supported

Hi Altin,

I ran into a problem that events that do not start or end on the full hour throw an error (Uncaught TypeError: r.getHours is not a function). The problem seems to be the following line in kalendar-container.vue.

let start_is_midnight = from.getHours() + from.getMinutes() === 0;

In the codepen you provide you can test this with the following event.

  {
    from: "Tue Nov 05 2018 01:00:00",
    to: "Tue Nov 05 2018 02:30:00",
    date: "2018-11-05",
    data: {
      title: "My Birthday",
      description: "Lorem ipsum dolor sit amet."
    }
  }

Regards, nidkil

Webpack worker-loader not bundling workers using provided options

This is resulting in a failure when trying to import the library from node_modules after installing it using npm.

"TypeError: from.getHours is not a function"

I don't know why it's crashing all time!

app.js:8368 [Vue warn]: Error in callback for watcher "appointments": "TypeError: from.getHours is not a function"

found in

---> <Kalendar> at kalendar-container.vue

range dates view

amazing design and functionalties.

I would like to know if i can change the range of hour of my calendar like from 8A.M. to 6P.M.