Serious Vue scheduler with configurable daily, weekly & monthly views
Flexible, configurable for 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 scheduler features a time grid - vertically scrollable daily and weekly views with built in resource support, 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.
Scheduler for Vue JS
Change the theme setting here
Change the language and localization settings here
Scheduler - Mobile daily schedule
View daily schedules with a fixed week view at the top and a scrollable schedule for the day. The week view is optional and can be turned off.
All-day events are fixed at the top below the header and calendar.
The dates can be quickly navigated by clicking on the month & year indicator.
Scheduler - Mobile weekly schedule
A full week can be rendered on small screens if needed. The header with the days of the week fixed at the top while the schedule is scrollable.
The screen can easily become crowded so it might be a good idea to think in a responsive implementation - daily schedule on small screens and weekly schedule on bigger screens.
Scheduler - Visible hours and days
Customize the visible days and hours along with the scale of the time grid through the
schedule object under the
view option. You can control the days to display (eg. Weekdays), the visible time range (eg. 8AM to 6PM), set the time scale (eg. 30 minutes) and set the labels shown (eg. every 15 minutes).
- Specify the first and last day - Use the
- Set the visible time range - Use the
- Control the granularity of the time grid - Use the
Scheduler - 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
Scheduler - 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
Scheduler - Loading inline data
What is a scheduler 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 scheduler.
Scheduler - Events from remote API
The scheduler 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 scheduler understands.
Scheduler - Loading events on demand
Getting the events in real time as the user navigates improves load performance and always serves the most recent data.
Looking for something you didn't see or have a sales question?
Ask us about it, we're here to help.