A Vue JS full calendar, no dependency, no BS.
🤘
npm i --S vue-cal
 |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|
| Latest
|
Latest
|
Latest
|
Latest
|
Latest
|
10+
|
If you want to support the development of this library, you can buy me a beer!
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.
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.
Hi,
Do you have any ETA when the drag and drop feature will be implemented, or if you can guide me a little bit, I can send the PR?
Thanks.
Hey,
I am having a little issue here.
When I use the vue-cal option @event-delete and hold to delete an event, in a web browser, it fires the @event-click event also. In mobile, it fires the @cell-click event.
I am using the @cell-click event to create a reservation and event-click to update a reservation in the vue-cal. So I can't remove a reservation without firing these other events.
How to prevent, when deleting an event, other events get fired?
Thanks.
Hello @antoniandre!
I have an issue with the columns when all-day is on. Even in the docs at # All day events it is visible that the all-day cell is not aligned with the column.
Is there any solution for that?
Thanks!
As per the original request https://github.com/antoniandre/vue-cal/issues/21, the idea is to have all the "all day events" separated in a top bar like on this image:
select event and show the time of the event not the minutes
select event @cell-click="teste" -> console.log('date')
Not - Tue Jun 16 2020 08:28:00 GMT-0400 (Horário Padrão do Amazonas)
Not - Tue Jun 16 2020 08:14:00 GMT-0400 (Horário Padrão do Amazonas)
true - Tue Jun 16 2020 08:00:00 GMT-0400 (Horário Padrão do Amazonas)
true - Tue Jun 16 2020 08:40:00 GMT-0400 (Horário Padrão do Amazonas)
true - Tue Jun 16 2020 09:20:00 GMT-0400 (Horário Padrão do Amazonas)
hors time event
Hey, thanks for library, it's really helpful!
I have a question, is it possible to display a discontinuous timeline? For example, skip certain hours (like from 9 to 15) where there are no events.
I am facing issue that I am having one main event with date range and inside it has multiple sub-events that has their own date range but falls inside Main Event Date Range. I want to plot Main event along with its sub-events that falls in their respective date. For Example Lets Say I have one event name as Event-XYZ which has its date range from 2023-03-10 to 2023-05-10. And its has multiple sub-events as mention below: Sub-event 1- 2023-03-15 to 2023-03-20 Sub-event 2- 2023-03-12 to 2023-03-20 Sub-event 1- 2023-03-15 to 2023-04-20
Now I want to plot this type of Main event along with its sub-event(In what date it falls).
Json looks like this events: [ { title: 'Event 1', start: '2023-05-10T09:00:00', end: '2023-05-30T12:00:00', subEvents: [ { title: 'Sub Event 1', start: '2023-05-12T10:00:00', end: '2023-05-20T11:00:00' }, { title: 'Sub Event 2', start: '2023-05-15T11:00:00', end: '2023-05-25T12:00:00' } ] }, { title: 'Event 2', start: '2023-05-11T09:00:00', end: '2023-05-11T12:00:00' } ]
Hello,
I have a custom function when a cell-dblclick event is fired. This function just open a modal. After this function is called, there is an activeView event called that I wan't to stop.
<vue-cal
ref="vuecal"
v-model:active-view="planningStore.activeView"
:on-event-dblclick="onEventClick"
:cell-click-hold="false"
:drag-to-create-event="false"
@cell-dblclick="createEvent">
</vue-cal>
function createEvent(event) {
createEventDialog.value = true
}
On the on-event-dblclick, you provide a solution to stop the propagation. Is there a similar way for the cell-dblclick event ?
Thanks for the help :)
Hey, is there perhaps any information on the status of work on recurring events? I am creating a small project and this is the only thing I am missing.
I don't have the scrollbar but I still have this space which ruins the calendar's appearance
