Modern Vue event calendar
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 calendar view supports everything from single to multiple week views all the way to month grids with various ways to render events.
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.
Calendar for Vue JS
Change the theme setting here
Change the language and localization settings here
Calendar - Mobile month view
Use the event calendar for mobile, desktop and everything in-between. The content perfectly fills the parent container or the mobile screen in full width.
You can choose to render an agenda below the calendar broken up into days ordered chronologically. All of this is configured in the
You can use the calendar and agenda together or separately. For more ways to use the agenda learn about how to configure it.
Calendar - 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
Calendar - Switching views
Dynamically switch views within one calendar instance. Use a UI control to let users do the switching or do it programmatically. This example features a segmented component inside the header, but the live option changes can be invoked from anywhere.
Switch between a month view with a monthly agenda, a week view with a weekly agenda and daily event list. Thanks to property binding and all option changes are live and propagate accordingly.
Calendar - Custom events in popover
The events listed in the popover can be customized in two ways:
- Full event customization (like in this example) - The calendar handles the rendering of events in the correct order. Styling the content, colors and everything else is your responsibility.
- Content customization - The calendar prints the
allDayand sets the appropriate
color. Content like title and other fields can be shown.
You can provide styling to the
title field and any other custom fields like
Create an event content template and pass it to the
eventContent template. All original event fields along with computed fields like
lastDay are passed to the template. For a fully custom event rendering use the
If you add custom markup you will want to add styling too. Use the
popoverClass under the
view option to tell the calendar what CSS class it should append to the popover container so that you can write specific CSS rules.
Calendar - Conditional move & resize per event 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 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
To control this on an event basis, use the appropriate properties which have precedence over global calendar options.
Calendar - Loading inline data
What is an event calendar without any events in it? To populate it with events all you have to do is pass the event array to the
In a real-world scenario you would probably load the events from a remote resource or event better, load them on demand. However the point of this example is to understand how easy it is to add events to the event calendar.
Calendar - Events from remote API
The calendar can be populated by passing an array to the
data option, that you can construct either inline or by getting it from a remote API. The important thing to remember is that events need to be in a format that the calendar understands.
Calendar - Loading events on demand
Getting the events in real time as the user navigates improves load performance and always serves the most recent data.
Calendar - Lifecycle events
The event calendar ships with different hooks for deep customization. Events are triggered through the lifecycle of the component where you can tie in custom functionality and code.
While users interact with the UI events like
... will be triggered.
Looking for something you didn't see or have a sales question?
Ask us about it, we're here to help.