altinselimi / kalendar Goto Github PK

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

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 ?

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

See here

Can you remove it? Thanks!

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.

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

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

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

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.

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

Hey there, it appears when (Ex):

day_starts_at: 8
day_ends_at: 22

And the actual time is more than 22!

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

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.

Hi, this library has any support for i18n?

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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 👍

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.

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.

Feature Request:

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

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

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"

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

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.

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

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

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.

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
     ]
  }),

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

Cheers

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!

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.

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

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?