Welcome to vue-cal V5 Discussions!

[antoniandre]

👋 Welcome to the V5!

We’re using Discussions as a place to connect with other members of our community. We hope that you:

• Ask questions you’re wondering about.
• Share ideas.
• Engage with other community members.
• Welcome others and are open-minded. Remember that this is a community we
  build together 💪.

The new discussion channel is open for everybody who want to discuss usage of Vue Cal that is not directly an issue. Like questions.

[ince500]

Hi !
When will there be support for ts?

[antoniandre]

Hi @ince500,
There won't be TS definitions from the start, but @jonastahl has suggested to work on it at some point, in this conversation:
antoniandre/vue-cal-v4#589 (let's continue the discussion here).

You are also most welcome to jump in to help out!

[n1crack]

Hi,

Do you have a schedule for "recurring events" ? When will it be available?

Btw, I think this is a great package and you should also make a react version. :)

[antoniandre]

Hi @n1crack, thanks for your message.
Recurring events are definitely on the to-do list and will be the next major feature to work on after achieving feature parity with V4.

Currently, V5 is mainly missing drag-and-drop, all-day events, and multi-day events. I’m aiming for a pre-release in February, which will include drag-and-drop and possibly all-day events. This will allow me to start gathering feedback while continuing development.

One thing is certain—everything built so far in V5 is significantly better: more flexible, more convenient to use, and more performant than V4! 🚀

[Achraf931]

Hello, the project is so cool, bravo!

Is a primitive version (I don't know if that's the right word, but it's like the Reka UI library) planned to implement our own design with Tailwind, for example?

Like Nuxt UI, we can pass de :ui prop and set our tailwind classes :

Example for Badge component :

{
  base: 'inline-flex items-center',
  rounded: 'rounded-md',
  font: 'font-medium',
  size: {
    xs: 'text-xs px-1.5 py-0.5',
    sm: 'text-xs px-2 py-1',
    md: 'text-sm px-2 py-1',
    lg: 'text-sm px-2.5 py-1.5'
  },
  gap: {
    xs: 'gap-0.5',
    sm: 'gap-1',
    md: 'gap-1',
    lg: 'gap-1.5'
  },
  color: {
    white: {
      solid: 'ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-900'
    },
    gray: {
      solid: 'ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800'
    },
    black: {
      solid: 'text-white dark:text-gray-900 bg-gray-900 dark:bg-white'
    }
  },
  variant: {
    solid: 'bg-{color}-500 dark:bg-{color}-400 text-white dark:text-gray-900',
    outline: 'text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400',
    soft: 'bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400',
    subtle: 'bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 ring-opacity-25 dark:ring-opacity-25'
  },
  icon: {
    base: 'flex-shrink-0',
    size: {
      xs: 'h-4 w-4',
      sm: 'h-4 w-4',
      md: 'h-5 w-5',
      lg: 'h-5 w-5'
    }
  },
  default: {
    size: 'sm',
    variant: 'solid',
    color: 'primary'
  }
}

[antoniandre]

Hi @Achraf931, thanks for the suggestion! At the moment, this isn’t supported, and it won’t be included in the first release planned for later this month. 🚀🤞
That said, let’s see how easy it is for users to work with the new Vue Cal and customize the CSS.
If this feature proves to be a significant time-saver for many users, we’ll likely integrate something similar to what you shared.

Cheers!

[zzp9999]

Hello, first of all, this is a powerful and easy-to-use component. I encountered some problems. In the drag event, I have created an all-day event and an event for a certain time period, but I want to drag the all-day event to the specified time period, which is unsuccessful. I have changed allDay to true. I look forward to your reply. Thank you.

[n1crack]

I think dnd is in progress atm. Probably it is a known issue.

[antoniandre]

@zzp9999 I believe you're refering to the V4 of Vue Cal, which is not discussed in this thread but in a new issue @ https://github.com/antoniandre/vue-cal-v4/issues. If you open one though, please complete your request with more explanation and reproduction link or at least attempted code.

@n1crack, the drag-and-drop feature is well underway and almost complete! However, all-day events are not implemented yet.

[MrSanchez]

Hi Antoni,

Great project. Loved V4 so far.
I do wonder, does V5 already have features that V4 doesn't have? I can't seem to find a changelog other than what you said above: "One thing is certain—everything built so far in V5 is significantly better: more flexible, more convenient to use, and more performant than V4! 🚀"

Or are you focusing on feature parity with V4 first and then later adding new features?

[antoniandre]

Hi @MrSanchez, thanks for your enthusiasm!

While the first goal is feature parity with v4, we’ve already introduced some new features and enhancements to existing ones.

The best way to track progress until the first official release later this month is to clone this repo, run it locally, browse the docs, and check out the migration guide and roadmap pages—they should list everything (or close to it).

Here’s a sneak peek! 🙂

Some notable new features and enhancements:

• option to show the time at cursor (vertical bar moving with your cursor)
• new days view that allows sliding x number of days
• new day offset option to adjust the view days range
• new grid layout
• headers are now sticky in both directions at the same time
• scroll to time, scroll to event
• easier access to important data through the exposed view object
• easier events management with v-model
• easier create and delete now in view.createEvent, view.deleteEvent, and even in each event, event.delete()
• 3 different deletion stages
• more flexibility in all the events listeners thanks to an automatic event listener forwarding (attach any valid event you want to cells and events)
• designed with and for composition API
• using date prototypes (or not) is simplified
• some props are made more intuitive, for instance, splits is renamed schedules and days to define schedules are now keyed by short strings like mon, tue, ..., instead of numbers
• and lots more in the box!

I hope this looks enticing to you all - it sure is a shitload of work! 😅🔥

[n1crack]

An event added externally with dnd should be able to be rejected.
It took me 2 hours to solve this in v4.

[antoniandre]

Well you could do something similar to this I just answered, but this is a quick draft not a 2h well-tested solution #10

[n1crack]

Thanks.

btw, do you have any solutions about timezones? (V4 or v5)

I use UTC in my DB. Dates and times changes by user timezone preferences.

[antoniandre]

For now I don't have a solution, but it's in the to do list to look into that (in the later column, it will be the first item)

[Achraf931]

Hello, how are you?

I have a question, do you have an example of how to synchronize your google calendar with vue-cal?

[antoniandre]

For now I don't have any recommendation, maybe other people or AI could help :)

[antoniandre]

Hello everyone,
I’m thrilled to announce that the first version of v5 is set to be released in just a few days! 🚀

This update brings numerous enhancements, including a brand-new feature that allows accepting or refusing event drag-and-drop and resizing. Plus, overlapping event detection has been made super easy for external use!

Stay tuned! 🎉

[n1crack]

Cool.

looking forward to horizontal timeline and timezones support :)

[antoniandre]

Vue Cal V5 library will be released on NPM later today!! 🚀
Even if the library is not yet released, the new V5 official documentation is already live as we speak at https://antoniandre.github.io/vue-cal :)
Of course, all your feedback is most welcome and helpful!

Stay tuned for the library release, shortly! 😎

[antoniandre]

Vue Cal v5 is Finally Here! 🎉

After months of development, fine-tuning, and amazing feedback from the community, Vue Cal v5 is officially released! 🎊

📦 Get it now with: npm i vue-cal@next.

💡 Ready to supercharge your calendar? Upgrade today and explore the power of Vue Cal v5! 🚀

Your feedback makes Vue Cal even better—let us know what you think! ❤️

[cherimo]

@antoniandre great library, my hats of to you!!
Can't wait for the multiple day events but other then that you made an awesome plugin :D

Hopefully my project start off soon.. your the first one to back!!

[antoniandre]

Hi @cherimo, thanks for your feedback :)
I've just started the all-day events feature, which is a base for multi-day events. Let's see how far we go! 🚀

[cynodia]

@antoniandre first of all, what a great and easy to use library - great work!! I'm in the middle of a massive vue2->3 migration and the v-calendar limitations in vuetify3 became a blocker. vue-cal came to the rescue!

I have one issue - I cannot seem to get the event-resize-start event firing. event-resize-end works just as expected.

And then my feature request, which would remove my need for dealing with these events 😃 An option to prevent event overlaps. It would not allow drag/resize that overlaps another event. Would be very useful to us.
Also an option to hide the "now" time-marker would be nice.

Currently at vue-cal 5.0.1-rc.20

[antoniandre]

Hi @cynodia, thanks for the feedback!
Here are some answers:

• The event-resize-end is already working and I just fixed (in RC 23) the event-resize-start not firing.
• The now line can be hidden with basic CSS: .vuecal__now-line {display: none;}, so it will likely stay this way.
• The denial of an event drag or resize is already possible and detailed here: https://antoniandre.github.io/vue-cal/examples/calendar-events--interactions#ex--reject-event-dnd-or-resizing (check the 2 resizing toggles and updated source code)

Let me know if you have further questions!

[cynodia]

Thanks for the quick feedback @antoniandre !
Great news about the event firing fix! Also using CSS to his the current-time marker works just fine.
Regarding the denial of dropping/resize, I was already using that approach. What we had in our old solution was that the drag/resize itself to visually stop once it reaches the start/end of another event and then drop there when the button is released. But it's no blocker at all for me.
Again, thanks a bunch for making not just something that works well, but also something that is easy to integrate!