antoniandre / vue-cal

A Vue 2 & 3 full calendar, no dependency, no BS. :metal:

Warning

This library is to be used as is for the current codebase. However, I am actively working on the v5 in a branch. 😎

vue-cal

A Vue JS full calendar, no dependency, no BS. 🤘

Installation

npm i vue-cal

Vue 2 (legacy)

npm i vue-cal@legacy

---

Demo & Documentation

antoniandre.github.io/vue-cal

---

Browser Support

Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔	10+ ✔

---

Donating

If you want to support the development of this library, you can buy me a beer or become a sponsor!

Thank you!

If you are using this library for profit business, please consider backing me! It ensures that the project your products rely on keep being actively maintained. :)

---

Contributing

If you have any idea, feel free to open an issue to discuss a new feature or fork Vue Cal and submit your changes back to me.

---

Release Notes

antoniandre.github.io/vue-cal/#release-notes

vue-cal's Issues

events that are pulled from axios not getting plotted

Just checking if its not possible to plot events that are being pulled via ajax.

Support displaying more than 3 simultaneous events, in chronologic order.

Hi,

I noticied this and I cannot wrap my head around it, you might have some useful insight on this:

Here is a gif showing the problem I have: https://i.imgur.com/c9SlrZO.gif
As you can see, its not possible to reach the event 2. The only way to reach it is to set :time="false"

here is the events I used in the example

[
        {
          start: '2019-01-10 10:00:00',
          end: '2018-01-10 10:30:00',
          title: '1',
          content: '1',
          class: 'primary'
        },
        {
          start: '2019-01-10 10:00:00',
          end: '2018-01-10 10:45:00',
          title: '2',
          content: '2',
          class: 'info'
        },
        {
          start: '2019-01-10 10:00:00',
          end: '2018-01-10 11:00:00',
          title: '3',
          content: '3',
          class: 'warning'
        },
        {
          start: '2019-01-10 09:59:59',
          end: '2018-01-10 11:00:01',
          title: '4',
          content: '4',
          class: 'danger'
        }
      ]

And the last thing is that when I use :time="false" the events are showing on different days, as you also can see in the gif.

Repeating events

Is there a way to create repeating events?
I can create one event and clone it as needed but this is not very practical and it clogs the dataset with lots of identical events

delete and modify events

Is there any way to delete or modify specific events in the calendar?

Highlight Today's current time visible in Month view

It looks like ever since the highlight today's current time feature was implemented in 1.16, the highlight line is also shown on the Month view, but I believe it should only be visible in the Week and Day views. In Firefox (60.3) this causes the view to be too tall and becomes vertically scrollable.

This issue is reproduced for me (again Firefox 60.3) in the demo here: https://unpkg.com/[email protected]/dist/demo.html

Error: hasTouch is not defined on beforeDestroy hook

This error hasTouch is not defined is popping whenever vue-cal component is destroying.
I see you have fixed this problem in commit 88932ee.

So, I think it is still not updated in npm. Can you update it?

Reproduction Link

https://codesandbox.io/s/n9xwkpjp00 - just hit destroy button and see console.

Custom function when double clicked on event

Hello,

Currently if you double click on an event the view changes to the day view. What I would like to do is to overwrite this functionality and trigger a function. When an event is double clicked I would like to open a modal. So i would like something like "@event-double-click='doMethod'"

Thanks!

All Day events in separate bar on week & day views

As per the original request #21,
the idea is to have all the "all day events" separated in a top bar like on this image:

Fix calendar height

In day and week views the schedule is cut by the container height, which is supposed to be set to display year and month views correctly as said in the documentation.

The bug can be seen in the examples itself

[Deprecation] Using unescaped '#' characters

If I use editable-events I get a deprecation notice

[Deprecation] Using unescaped '#' characters in a data URI body is deprecated and will be removed in M71, around December 2018. Please use '%23' instead. See https://www.chromestatus.com/features/5656049583390720 for more details.

It seems because background-image svg uses fill property with hash value instead of rgb()

background-image: url('data:image/svg+xml;utf8,<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="m163 440l-91-91 251-250 90 90z m309-352l-48-48c-12-11-32-11-45 2l-45 45 91 91 45-45c13-13 13-33 2-45z m-408 275l-32 117 117-32z" fill="#000" opacity="0.4"/></svg>');
  

Military time format

Hello!

The military time format (24 hour time) should always be 4 numbers and zerofilled on the lefthend side https://i.imgur.com/zjz0wHF.png

8:00 should be 08:00, 9:00 should be 09:00 and so on

Thanks in advance!

Use <script> tag Calendar not working

It's my code

https://codepen.io/slouchy592/pen/xMbYbv

I via vue-cal with <script> tag, but there is no calendar.

How can I use vue-cal with <script> tag ?

thanks

Drag support

I have checked your drag support branch.
Is there a reason that you don't build up on the html drag and drop API?

tl;dr

That would only require a "draggable" attribute on a vuecal__event.

• Instead of a onMouseMove, you work with the dragstart event.
• On your vuecal__cell you just need to react on the "drop" event.
• To make the vuecal__cell a valid drop zone, you implement the "dragover" event handler.

This works perfectly in my private repo as long as a cell is not editable. In your current code you do a lot of preventDefault, which prevents the drag event to happen if the cell is editable.

Option to replace or remove the "no event"

Hello,

Could we have an extra option that could either replace the "No event" text to something else like "Nothing planned" or if left empty completely removed? default of course still "No event".

Thanks!

@event-change emitted when no change occured

With editable-events in use, when clicking into an event title and clicking out of it without changing it,
@event-change is still emitted. I'm trying to find a way for my app to detect that no change in fact occurred.
I'd like to avoid maintaining a copy of the data just to check if the received event is actually different.
Is there a way around this?

Exclusion of some events from the counter on the month view.

Hi @antoniandre

If i understand you correctly. I create new issue.

Can I hide certain events from the event counter in the month view? (for example, hide the same class - "hideevent" )

Feature Request: readonly attribute

Events could have an individual readonly attribute.

When this attribute is set to true the delete button / edit title / resize should not be available.

Include visible but out-of-month dates in event payloads

Is it possible to get a range of all visible dates in the month view in the view-change and ready events? When viewing February in the month view, for instance, the visible dates are January 28 - March 8th, but only February 1 - February 28 are in the event.

vue-simple-calendar has these, for instance:

• periodStart / periodEnd: the active period (e.g., February 1 - February 28th when February is active)
• displayFirstDate / displayLastDate: all visible dates (e.g., January 28 - March 8th when February is active)

how to get the date info by use event-render slot on month view

Hi~
first apologize for my poor englist

my question is how to get the date info by use event-render slot on month view

this is my code
<vue-cal @day-focus="dayClick" > <div slot="event-renderer" slot-scope="{ event,view}"> //how to get the date info in this event ? <div class="vuecal__event-title" v-html="event.title" /> </div> </vue-cal>

Create event at cursor position - on cell click and hold

Hello @antoniandre,

I am looking for functionality that does the following:
When double clicking on a day (In week view) I want an event to trigger that tells me the date and time where you clicked. Currently the @day-focus event gives you a date but not a time, its also only double click. The time doesn't have to be minute perfect, can be rounded to the nearest 15 minutes or so.

Could you make something like that or do you have any idea how I could do that with the current events?

Feature request: Overlapping as an option

Hi,

Is there an option to disable overlapping? In the attachment you can see that on monday the 10th the events are overlapping.

However on tuesday the 11th they are not.

I wish it to be all like tuesday.

Thank you.

attach vue-cal

Hello. I can't attach Vue-Cal to my Laravel project.
What am I doing wrong?

my template "cal.blade.php"
<m-cal></m-cal>

my "app.js"
Vue.component('m-cal', require('./components/vCal.vue'));

my "vCal.vue"
<template> </template>
<script>
import Vuecal from 'vue-cal'
import 'vue-cal/dist/vuecal.css'

export default {
mounted() {
    console.log('Vuecal mounted')
},
components: { Vuecal },

data: () => ({

}),

} </script>

So does not work!

But i add in <template> <VC></VC> </template> and <script> ... components: { VC : Vuecal }, ... </script>
It starts to work, but not by the size of the container (as indicated in the documentation), but optional (I have 450 px in height -> "height not !important " )

trouble picture
https://pp.userapi.com/c844216/v844216049/15d8ae/ucnFpDgwk4k.jpg

Delete popup shows without hold when prop time is false

Hi,
when time prop is set to false, delete popup opens without hold

Reproduction link

https://codepen.io/akki-jat/pen/JxGdzg - just click to edit

Prevent click-to-navigate for 'out-of-scope' cell option

Hi @antoniandre ,

Happy new year! Thanks for your great work in this vue-cal, really loved it!

Regarding this matter, I've trying to display specific month only in the calendar, able to prevent the arrowPrev and arrowNext from clicked but out-of-scope cell is still able to be clicked thus change the month of the calendar

Multiple-day events / All Day events

I love this calendar. It looks clean and has no dependencies. The one key feature I am missing is Multiple-day events, I've seen that you have this point already on the todo list. What do you think your timeline is for this? I would love to use this in my vue project.

I've tried to implement this myself. But haven't really managed yet.My attempt looked a bit like this https://puu.sh/Ct1zX/9a54f61f90.png (Work in progress) But couldn't get it to work quite nicely with your existing code.

What are your idea's on this? Mine works by just adding "allDay: true" to the event data.

All day events in month view

This is a great calendar component, clean, practical and easy to use!

When using events-on-month-view and show-all-day-events, all day event do not appear on month view.
Is there a way around this?

Updating Event Reactivity

Hey @antoniandre nice plugin!

I referenced this #3 but I think its a different issue. Or is it the same and I'm missing something?

It doesn't seem like events are reactive, like when updating an event(s)...

https://jsfiddle.net/bribar/d2nv7Lue/46/
Clicking UPDATE updates the events as seen in console. Then if you click the "Need to go shopping" which should be "Dude Brah" but isn't. View doesn't update either.

Am I correct? If so, is this on the roadmap?

Does this calendar work with Vuex?

Hi @antoniandre, does this calendar work with Vuex?

The option to have the scroll position start somewhere else

Hello,

When I open a page with the calendar on it. The calendar starts at 0:00. but my first events are not until 09:00. So i would like to have the calendar scrolled down when first openend.

I know I could use the timeFrom option and set it to 07:00. But that would remove 00:00 - 06:59 and I would like to keep these cells shown.

Hope I made my issue clear. Found it hard to explain this one.

An image to show the white space above the first events.

Start week on sunday

Hello,
For my project I need for the week to start on sunday opposed to monday, and the documentation of this plugin doesn't say if it's possible.

Week view without events section and "today" class in headings

Hi, thanks for this great lib, can you tell me if there is by any chance an option:

1. to hide (beside css-way) the event columns in week view? I need only the top section - the headings - rendered.
2. In the same week view, I need to have "today" class on today's date to be able to style it. So the vuecal__heading should have today class too, while now only corresponding vuecal__cell underneath it has it.

Thanks!

Horizontal scroll bar visible during view change transition

When changing between views (e.g. week to month), a horizontal scroll bar is visible during the transition. (I think the -15px translateX is the cause.)

Here's a gif showing this behaviour:

I've got a quick fix for this I can put in a PR.

Making vuecal__cell a named scope

Your release today really helped us to solve the issue of not being able to style what is shown on the monthly view count. Your calendar allowed us to do most things, but we really needed to have that extra customisation. I am trying to implement this design:

I've actually got two requests, but I thought I'd start with asking if its possible to add named scope on the whole cell. That would really help with customisability, as anyone will be able to do whatever they want inside the cell while retaining the rest of the calendar as-is.

The other request, in case that making the cell a named scope doesn't make sense, would be to add a css-class on the date number.

Currently, it is inside the content, which is also a bit counterintuitive to me, but the main problem is that I can't style just the date if I wanted to. But adding even a class on this 11 div here would help a ton, if named scope is a bit too much work.

I am also happy to look into contributing on either, as I don't see it as a big change (css, not the named scope, as that might be tricker to make it work with the rest)

Date picker and day view

I've got two instances of the same vue-cal object and the data is the same. Is there a way to use one calendar as a date picker (Month only view) and the other as calendar (Week/Day only view), such that when selecting dates on one calendar, it will update the date position of the other calendar.

I'm not having much luck with listening for 'ready' and changing 'selectedDate:'

Hope my query makes sense.

German Translation json file.

Below is the German translation for the vue-cal.
Can you add it?

{
  "weekDays": ["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag"],
  "months": ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
  "years": "Jahre",
  "year": "Jahr",
  "month": "Monat",
  "week": "Woche",
  "day": "Tag",
  "today": "Heute",
  "noEvent": "Keine Events",
  "deleteEvent": "Löschen",
  "createEvent": "Event erstellen",
  "dateFormat": "DDDD mmmm d{S}, yyyy"
}

Styling the calendar

Hi @antoniandre ! Happy holidays!

Vue Cal it's great! just what I need!

I'm having problems when I try to stylize it a bit..

I'm trying to give it a red header.. Anyways, when I apply the styles in the inspection panel to the div with class vuecal__header it works like a charm.

Styles: background-color: red , color: white

But, when I attempt to apply the same styles in my vue component like this:

It doesn't do the trick.. the same happens when trying to stylize the events color just as detailed in the docs. Any ideas on this?

Thank you in advance!

JS tests

I was wondering if there are plans to add tests, say with Jest, for this library? That would make it me a lot more confident in using this library, as it looks fantastic and documentation is very well written.

"can't assign to property "events-count-month-view" on true: not an object"

Hello, for no apparent reason, because I have not made any changes, I began to arrogate this error, even though I'm not working with anything like this https://antoniandre.github.io/vue-cal/#ex--events- indicators-on-month-view, can any suggestion be this ?, I show you my component configuration
<vue-cal
:time="false"
style="height: 95vh"
locale="es"
default-view="month"
class="vuecal--green-theme"
:events="datas"
events-on-month-view="true"
class="vuecal--full-height-delete"
:on-event-click="onEventClick"
@day-focus="clickDay"

        ></vue-cal>

Error in the documentation

Hi. first of all thanks for the useful library!

In the documentation, you have an import example import { Vuecal } from 'vue-cal'
But we need to use general import as import Vuecal from 'vue-cal'.
Checked in the nuxt.js framework. If import like this import { Vuecal } from 'vue-cal' then Vuecal variable will be undefined.

Display more week-rows on month view

Hi,
Do you think you could add an option to render additional rows on month view? Right now there is a fixed number of six rows, as month always starts in the first row, but can end in 4th, 5th or 6th row. It would be best to have options for prefix-weeks and suffix-weeks, like:
suffixWeeks: 3 - renders additional three weeks of next coming month,
prefixWeeks: 2 - renders additional two rows of previous month.
Please let me know what you think. Thanks!
edit: I know I can change number of days in code below to add suffix weeks, but still there has to be a way to add prefix weeks too: (index.vue, line 770)
cells = Array.apply(null, Array(56)).map((cell, i) => {

Bug: startWeekOnSunday then change to following week breaks calendar

Example Reproduction:

• https://jsfiddle.net/qu07c3st

Steps to reproduce:

1. Enable :startWeekOnSunday="true"
2. Change the view to go to the next upcoming week

Expected:

• Days and events for the following week will be displayed accurately

Actual:

• Days shift over by one day.
• Clicking again shifts them over 7 days.
• The day of the week is now wrong (Today is Monday the 25th, but it will now display as Sunday the 25th).
• Events will be displayed on the wrong day

[Feature request] CSS transitions when switching view

Hi, first off, great job with the calendar, just what I was looking for.

Anyway, here is some ideas for features you could add:

• A guide arrow which tells the date and time (MSPAINT concept art: https://i.imgur.com/GmAh2AQ.png)
• Css/Vue transitions when "zooming in" on the calendar.

:on-event-click="onEventclick" is not working

Project:
https://codesandbox.io/s/61kz580p6k

Events had been populated but the :on-event-click="onEventclick" is not working.

[Vue warn]: Property or method "onEventclick" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

Possible bug when clicking on a multiple day event

Hello,

Congrats for what you've done with this lib!

I'm looking forward to have vue-cal fully integrated with my OSS project.

While playing with multiple day events I'm getting an inconsistency when using on-event-dblclick.

Notice the id of the logged event

Any clue ?

Thank you!

overlapping events on month view

on month view when using events-on-month-view and you have overlapping events, they are not correctly displayed
no-event-overlaps has no effect on this issue

if you have this in the week (or day) view:

you get this in the month view

Event date manipulation in DOM event handler

Hello @antoniandre.
Happy New Year.

And questions.

1. Can i check date == day name

Example
start: '2018-12-24' if( start == 'Monday' )

backend realization
$date = "2018-12-22"; $week=array(0=>"воскресение","понедельник","вторник","среда","чтетверг","пятница","суббота"); $date = explode("-", $date); return $week[date( "w", mktime(0,0,0, $date[1], $date[2], $date[0]) )];

2. Can i get focused date

Example
@day-focus="logEvents('day-focus', $event)"

Events not rendering with vue version 2.5.17

Vue Version: 2.5.17, generated project with vue cli 3.

I'm trying to do a simple example to get going but events aren't rendering. I'm copying and pasting the custom events render code like this:

<vue-cal :events-on-month-view="true" :show-all-day-events="'short'" :events="events">
	<div slot="event-renderer" slot-scope="{ event, view }">
		<v-icon>{{ event.icon }}</v-icon>

		<div class="vuecal__event-title" v-html="event.title" />
		<!-- Or if your events are editable: -->
		<div class="vuecal__event-title" v-html="event.title" />

		<small class="vuecal__event-time">
			<strong>Event start:</strong> <span>{{ event.startTime }}</span>
			<br />
			<strong>Event end:</strong> <span>{{ event.endTime }}</span>
		</small>
	</div>
</vue-cal>

My event data

events: [
	{
		start: '2019-03-14 06:00',
		end: '2019-03-14 10:00',
		title: 'Golf with John',
	},
],

The event just shows up as a gray block....

Any ideas?

Hard to contribute: Giant index.vue

It is really hard to contribute to your project, because of your giant index.vue component (1.7k lines).

I suggest to

1. move the style into its own scss file and let the build system figure that out.
2. and to move the headerbar out of index.vue into its own component.

There are probably more ways to split the file up, but those are the low hanging fruits.

Cheers

Make separate .scss file

Is there any reason the scss is embedded in the components? It would be nice to have a separate scss file that I can customize with the rest of the scss in my project.

Hide Dates before than today

Is there a way where vue-cal doesn't let the user pick a date before than this moment?
For example, Today's March 12th. 2019. I'd like the user wouldn't be able to pick 2018 as year or even February of the current year.

Thank you, I'd appreciate your answer.