Vue event calendar timeline with configurable day, week & month view
Use it in responsive mobile & desktop web apps and Ionic Vue projects
- Week, month & year views
- Built in drag & drop
- CRUD operations
- Day, week, work-week views
- Resource support
- Customizable day, week, month views
- Built in resources
- Event D&D with CRUD operations
- Daily, monthly, yearly event list
- Combine with week calendar
The timeline features a horizontally scrollable view with multiple resource support for day, week, work-week and month with built in templating and drag & drop.
The four views - scheduler, calendar, timeline, agenda - can be combined to create the perfect user experience on mobile, desktop and on everything in-between.
The capabilities like recurring events, all-day, multi-day events, responsiveness are supported by all views.
Timeline for Vue JS
Change the theme setting here
Change the language and localization settings here
Timeline - Timezones
The event calendar works with local times by default, but ships with support for changing the timezone. The conversions and correct output relies on either of the two external libraries: luxon or moment-timezone. For installing and using these libraries check out this guide.
There are two angles regarding timezones:
dataTimezone- the calendar expects this format and returns this format. It is
'local'by default if the date-times don't contain any timezone information. It can be set globally on the calendar using the
dataTimezoneoption, or specifically for the event using the
timezoneproperty of the event data.
displayTimezone- the calendar displays the events in this timezone. The date-times will be converted from the
dataTimezoneand displayed accordingly. It is
Timeline - Conditional move & resize per event, resource or globally
The drag & drop interactions can be fine-tuned depending on the requirements and situations. Maybe controlled by roles, event types, resources the move and resize can be turned on/off on an event basis, per resource or globally on the instance.
- Events can be fixed in length (cannot be resized) - by setting
falsethe events cannot be resized.
- Events can be fixed in time (cannot be moved) - by setting
falsethe events cannot be moved in time. Take in consideration that
dragToMovemust be set to
- Events can be fixed to resource (cannot be moved to another resource) - by setting
falsethe events cannot be moved between resources. Take in consideration that
dragToMovemust be set to
Looking for something you didn't see or have a sales question?
Ask us about it, we're here to help.