Updated on May 31, 2024

React event calendar timeline with configurable day, week & month view

Use it in responsive mobile & desktop web apps and Ionic React projects

Recurring events
Multi-day events
Popover with full event list
Drag & drop
Templating
Resource support
Customizable times
Drag & drop
Manage multiple resources
Daily, weekly or monthly timeline
Drag & drop
Customizable range
Scroll to date
Recurring events
Templating
Daily, weekly or monthly agenda

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.

As part of Event calendar and scheduler it can be picked up with the Scheduling & calendaring and Complete licenses.

React Timeline Timeline for React

Timeline - Monthly timeline

Change demo

Get an overview across all resources over a full month. Easily zoom in by controlling the timeCellSteps and timeLabelSteps as seen in this example. By default the timeline: { type: 'month' } as configured under the view option renders with daily horizontal resolution.

Timeline - Timeline vs time grid

Change demo

The scheduler can be laid out in two different ways - as a timegrid or a timeline.

Time grid

The times rendered vertically, with one or more resources rendered horizontally as a time grid. Day views are great on small screens which can be dynamically switched to work week or full week views and even timeline views on bigger screens. Play around with the responsive API.

Timeline

Alternatively you can render the times/days horizontally and the resources vertically as a timeline view. The timeline can easily accommodate a large number of resources thanks to the vertical scroll that is easy to understand for users. This plays well on larger screens and in landscape containers.

You can switch between the two modes by dynamically setting the event calendar options or you can set it up responsively using the responsive option. Eg. show a day grid on mobile and a timeline on desktop.

Interested in the timeline view?  Learn how to configure and customize the timeline →

Timeline - Print mode

Change demo

The timeline includes print optimized styling through the print add-on. This needs to be added to the download package or installed separately from a dedicated NPM package.

Print styling is applied when someone prints the page that contains the timeline. In addition to that, you can call the print method on the instance which grabs only the markup of the timeline, places it onto a temporary page and calls the browsers printing function. This is especially useful when you want to add a button to only print the timeline rather than the whole page.

Besides printing, PDF export is possible through the print dialog of the browser.

The print module is not available in the trial. You can try the live demo to see how it looks.

Timeline - Employee shift planning

Change demo

Use the summary mode of the timeline view with eventList: true that can be configured under the timeline settings of the view option.

This will give you summarized daily events similar to the event calendar labels where each event is printed under the appropriate day, time slot (shift) for the appropriate resource one after the other.

Build a custom add/edit dialog with the necessary fields. The event dialog can be fully custom as seen in this CRUD example.

Timeline - Work order scheduling

Change demo

When scheduling work orders and synchronizing them across various assets, the timeline can be of enormous value. Resources of the same type can be grouped and arranged in multi-depth hierarchies. The list of various assets, employees, contractors can be added and organized under it.

For add/edit a custom form with the necessary fields (including resources) can be built. Resources linked to a work order can be of various categories, eg. drivers, trucks, contractors and will show up in their respective rows.

You can use the date header template and add a simple event template to show the $ value and print the total daily revenue below every day in the header.

Timeline - Meeting planner across timezones

Change demo

Setting up meetings across multiple timezones is messy and hard task. In this example, built with the Mobiscroll scheduler we've laid out a timeline with multiple resources that represent the teammates. Each team member can be in separate timezones which means we need to account for the various offsets.

First we need to set a base timezone, which for the sake of simplicity is UTC and it is the timezone of the first resource, the meeting organizer. This also means that the scheduler operates in this timezone set through the dataTimezone and displayTimezone options. To learn more about timezone management take a look at this example.

Because all resources are part of the same calendar they operate in the same timezone. That's why we need to somehow communicate the work hours with the correct offsets so that the person doing the scheduling can easily find the best times for the meeting. For that we are setting colored backgrounds with time labels that show the "working hours", "flex hours" and "time off". Besides the colored backgrounds we've also set "time off" to invalid for validation purposes. On how to work with disabled times and how to override them take a look at this example.

The last thing that needed to be done is to override the event rendering with a custom template. In the custom template/render function we can account for the offsets and print the times in the team members timezone instead of the base timezone (UTC in this example). Learn how to create a custom event template.

Timeline - Restaurant shift management

Change demo

With the combination of the timeline summary mode/event listing, time slots and the time slot templating features along with hierarchical resources you can create a restaurant shift planning UI.

The example features templating, dynamic occupancy count (how many employees are working on a specific shift), dynamically turning shifts on/off, switching between week and day view and much more. The header features custom components for filtering the view.

Try signing somone up for work by double clicking on an empty shift position.

Timeline - Weekly meal planner

Change demo

Use the timeline summary mode/event listing to create a weekly meal planner. Meal types are represented as resources with a custom template. Events are the actual meals with custom properties, like calories or notes.

The add/edit form shows up in a custom popover that opens on double click for meal creation and on click for editing.

By default the second dimension of the timeline (vertical axis) is reserved for resources, however it can be configured and used as "time slots" if the times are not relevant.

Timeline - Dynamically color & invalidate

Change demo

The options of the timeline can be dynamically changed. That applies to both the color and invalid options which control the resource track background colors and their valid state.

Based on the type of event someone wants to add or create we can highlight resources that support that type of event and invalidate resources that don't.

In the following example we have two types of tasks/events: HW for Hardware and SW for Software tasks. We also have two teams or two groups of resources: HW Team and SW Team. What we want to do is enforce event creation for teams based on the type of event: HW for the hardware team and SW for the software team.

We'll use the onEventDragStart and onEventDragEnd lifecycle events to highlight & invalidate and then set everything back to the default state. We have access to the event.category through the lifecycle event's args.

Timeline - Multiple classroom scheduling

Change demo

While the timeline can easily render multiple days horizontally with hourly resolutions, in some situations it makes sense to multiply the vertical scrolling height and set a resolutionVertical to day even if working with multiple resources.

To render a timetable for multiple classrooms for a whole week the horizontal timeline can be reduced from 8AM to 8PM and days along with the classrooms can be listed vertically Monday to Friday.

Use the resolutionVertical and startTime/endTime properties in combination with the startDay/endDay properties of the timeline to set such a view up.

Timeline - Single resource timetable

Change demo

While the timeline is great for working with many resources where each resource is rendered vertically with their own track, in case of a single resource you can use the vertical space to render multiple days.

By setting the resolutionVertical to day and keeping the horizontal resolution hourly, you can easily render month views where the days of the month are listed vertically and the daily timeline is laid out horizontally.

Want to learn about how you can configure the horizontal and vertical resolution?  Play around with this example →

Timeline - Compare resources

Change demo

With the combination of the timeline view along with fixed resources and renderResource you can create a UI for comparison.

In this example resources are people with tasks. There is a button in the resource template which on click dynamically moves the resource to/from a comparison section, located at the top of the view. Compare up to 3 resources at a time, but adjust this as you like in your own implementation.

Timeline - Assign/unassign work orders

Change demo

The process of assigning and unassigning work orders with a large number of employees can get overly complicated. The timeline with a row fixed to the top, containing the unassigned work orders, can be of great help to create a work planner.

This will contain all scheduled but unassigned work and by vertically scrolling the content of the timeline, the row will allways be visible and stuck to the top. The following resources are the employees themselves, where eventOverlap is not allowed to avoid double scheduling.

For more strict validation, the dragInTime and dragToResize options are set to false rendering the workorders fixed in time and only allowing vertical movement between and to resources for re-assignment and assignment.

Timeline - Sub-tasks and lists

Change demo

When there are subtasks related to work orders, it may be necessary to display them in the context of work order (or event). Subtasks can be rendered as a list with the possibility of adding new items using the Prompt or more sophisticated modals even. The height of resources will dynamically increase depending on the height of the events/length of lists.

To allow dynamic changes in heights according to the length of subtask lists, eventHeight: 'variable' is used, along with custom event content rendering to maintain the appropriate theme styles.

Timeline - Flight scheduling with two timelines

Change demo

For creating complex dashboards like for managing jet bookings sometimes two separate timeline instances are necessary.

Sticking two instances together with synchronized horizontal scrolling allows for a setup where the top timeline is a list of bookings with one flight per rows and the bottom timeline holds available aircrafts.

Only moving events from the top timeline is allowed and events are fixed in time, meaning the start and end cannot be changed. Things like eventOverlap is set to false to avoid overlapping events.

Timeline - Display task progress

Change demo

Showing percentage progress, or even having a visual overlay that indicates the progress of a task is sometimes necessary, not just for full fledged Gantt charts.

Although being usually associated with Gantt charts, having a clear overview of progress with tools that enable live update is useful in a lot of situations.

Using the event templating capabilities, it is possible to render a live slider that reacts on hover and enables updating the progress inline.

Use the renderScheduleEvent function to customize the template and adjust it to your needs.

Besides being able to update progress right on the event, it is also possible to add a slider that controls task progression - saved in a custom property of the event - inside an add/edit dialog.

Timeline - Configure the timeline

Change demo

Set up day, week, month or year views.

For certain views you can customize the visible days along with the scale of the timeline through the timeline object under the view option. You can control the days shown (eg. Weekdays), set the time scale (eg. 30 minutes) and set the labels shown (eg. every 15 minutes).

  • Specify the first and last visible weekdays - Use the startDay and endDay properties
  • Control the granularity of the timeline - Use the timeCellStep and timeLabelStep properties
  • Week numbers - Controlled through the weekNumbers property
  • Real time positioning or event listing - Set eventList: true if you want to list the events on a daily basis rather than have them positioned with minute precision

Timeline - Configure the page, size, resolution

Change demo

There are four types of timeline views: day, week, month and year. Use the size property of the configuration object to set the length of the view or page size.

Use the resolutionHorizontal property of the configuration object to set the horizontal unit of a timeline column, it can be 'hour', 'day', 'week', 'month', 'quarter' and 'year'. In case of hourly resolution, the columns can be split to minutes (1, 5, 15, 20, 30) or merged into multiple hours (2, 3, 4, 6, 8, 12) using the timeCellStep and timeLabelStep properties.

Use the resolutionVertical property of the configuration object to set the vertical unit of a timeline rows, it can be 'day' or 'none'. If set to 'day', the days will be rendered on the vertical axis, while the hours of the day will be displayed on the horizontal axis.

The reference date, controlled through the refDate option, is today by default, but it can be set to any date, like the first day of the month, or the first day of the year. The refDate serves as the start of the reference range. From that point on you can navigate forward and backward.

A couple of examples:

  • Rolling two weeks - use type: 'day' and size: 14
  • Two weeks (starting with Sun/Mon) - use type: 'week' and size: 2
  • Quarter view, starting from January - use type: 'year' and resolutionHorizontal: "quarter"
  • Rolling three months - use type: 'month' and size: 3
  • Year view - use type: 'year'

Timeline - Set event stack size

Change demo

The timeline renders all concurrent (overlapping) events by default, and the height of the resource row will increase to fit those events. If equal row height is used, the available vertical space will be divided between them. When there are a lot of concurrent events, displaying all of them isn't always helpful.

A maximum number of concurrent events can be set by passing a number to the maxEventStack property of the view.timeline option.

Timeline - Event buffer

Change demo

Use the bufferBefore and bufferAfter to add buffer times that will be rendered before and after the event.

These areas can help you visualize delays or added minutes for tasks. Here are some examples:

  • Travel time for meetings, appointments, work orders
  • Check in and check out times around flights
  • Loading/unloading for bus/truck
  • Cleaning, inspection, maintenance work that happen on a recurring basis

Looking to customize event buffers?  Check out the templating capabilities →

Timeline - View with custom range picker

Change demo

The timeline comes with built-in support for day, week, month and year views. For those situations where a custom range makes more sense, it is possible to override the calendar navigation component with a range picker.

The calendar header can be easily customized and a two-way synchronization needs to be kept between the timeline and range picker.

Timeline - CSS class for colors and invalids

Change demo

Besides customizing the background color of cells and setting up invalid/blocked out times you can customize how these blocks and disabled times look by passing a cssClass to the colors and invalid array elements.

The output could be a custom pattern, custom styling for the labels or anything that you'd like to render as the background. This a great way for adding special meaning to certain days and time ranges.

Timeline - Equal row height

Change demo

By default the height of the timeline tracks will adjust to accommodate the events inside. However, in some cases it is desired that the track heights remain equal, and distribute the overlapping events evenly inside the track. This can be achieved by using the rowHeight: 'equal' property under the timeline configuration of the view option.

The height of the timeline tracks have a minimum height of 52px. This means that regardless of the available vertical space the height of the timeline rows never shrinks below that number.

If there is more vertical space available the rows automatically grow to fill it. Eg. if the parent container is 250px and there are only two resources, their height will grow to fill the full height minus the calendar header.

This can however be overridden with a custom CSS rule:


.md-timeline-height .mbsc-timeline-resource,
.md-timeline-height .mbsc-timeline-row {
    min-height: 120px;
}

Timeline - Variable event height

Change demo

By default, events are equal in height and content is truncated by default where necessary. There are cases however where event height should match the content so that everything fits. To render events with variable height, use the eventHeight: 'variable' property under the view option's timeline configuration and the custom event templates: renderScheduleEvent or renderScheduleEventContent . When the latter is used, to let the event container grow, the height of the inner content must be set to auto: .mbsc-schedule-event-inner { height: auto }. The height of the timeline events grow with the internal content, and the height of the resource rows adjust themselves to the events.

In the following example the height of the resource rows change dynamically based on the height of their events. Resources are the rooms where events are held and events have varying descriptions.

Variable event height is an experimental feature.  Learn more about it in the documentation →

Timeline - Daily event summary

Change demo

In situations when users are interested in seeing a daily summary rather than an hour-by-hour layout of events use the eventList: true property under the timeline configuration of the view option.

This is especially useful for spotting overloaded resources/days and helps in managing and creating efficient schedules.

Are you building UI for planning employee shifts?  Check out this example →

Timeline - Day, week, work week

Change demo

Scheduling people, teams or an entire workforce requires different views. Sometimes you'll be needing a helicopter view of a week and other times you might want to dig into a specific day. This all can be served through a simple switching mechanism implemented with a segmented control right in the header of the calendar.

By dynamically changing the options you can set the level of detail you want to see. Eg. Show a daily timeline with hourly steps, show the work week with the same resolution or zoom out for a full week-view with 12 hour steps.

Want to see how to set other views?  Check out this example for switching views →

Timeline - Timezones

Change demo

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 dataTimezone option, or specifically for the event using the timezone property of the event data.
  • displayTimezone - the calendar displays the events in this timezone. The date-times will be converted from the dataTimezone and displayed accordingly. It is 'local' by default
Enable switching the timezone in the UI?  Learn how to dynamically change timezones →

Timeline - Switching timezones

Change demo

If the context requires users being able to change the timezone on the fly, you can add a custom dropdown with the desired timezones to the event calendar header. This can be of course placed externally to the calendar as well, eg. setting page.

Set the timezone of the incoming data through the dataTimezone - eg. 'utc', and set the display timezone through the displayTimezone - eg. 'America/Los_Angeles'

Timeline - Event search with sidebar

Change demo

Inline search can be easily implemented with the help of a separate agenda instance. This example is relying on a single API endpoint for getting the data onto the primary timeline view and also for getting the filtered data based on the search terms.

Events can be filtered in real time so using an agenda view for the search results is an easy choice. It provides all the necessary styling and advanced features that you might need to customize the experience.

Alternatively, search can be implemented in the header using a similar search box with an agenda listed in a popup instead of rendered inline.

Timeline - External navigation

Change demo

This example demonstrates how can the Timeline navigated externally. Here we have a two-pane layout with a Datepicker on the left and a Timeline on the right. Changing date on the Datepicker will trigger the date change on the Timeline.

The Datepicker updates the selectedDate option of the Timeline in its onChange event, while the Timeline updates the datepicker value from its onSelectedDateChange event.

Timeline - Timeline event template

Change demo

Events can be customized through the renderScheduleEvent option. How the events look are fully up to you. Base event fields along with custom fields can be accessed when writing the rendering function.

The before/after buffers can help you visualise delays or added minutes for tasks. For example travel time for meetings/appointments, check in/check out for flights.

The buffers can be customized through the renderBufferBefore and renderBufferAfter options.

Want to see how custom event rendering looks on the time grid?  Check out this example →

Timeline - Time slot template

Change demo

Use the renderSlot option for rendering a custom time slot header. Customize how the time slots look and what they show. Utilize properties passed in the slots array.

Timeline - Resource header template

Change demo

The empty space above the resource list can be customized through the renderResourceHeader function. This a perfect place for filtering or headers in case of a resource grid and everything that helps the users in the context of the timeline.

Timeline - Custom event tooltip

Change demo

There are several approaches to showing a tooltip when hovering events.

The native tooltip

By default, the calendar shows the browser native tooltip when hovering over the event. This includes the times and title of the event, which does the job most of the times. For showing a custom text use the tooltip property of the data object. This tooltip is specific to every event. If you want to hide the native tooltip, you can set the showEventTooltip to false.

Fully custom tooltip

Setting the showEventTooltip to false gives room for a fully custom tooltip that can be implemented by using the onEventHoverIn and onEventHoverOut lifecycle events. With the help of the Mobiscroll popup you can show a custom tooltip that holds details, actions applicable to the event it is anchored to.

Timeline - Controlling the row height

Change demo

The height of the rows is determined by the maximum number of events it houses at any moment, but in some cases this needs to be overridden. The height of a resource row or track can be adjusted in CSS. Let's explore a couple of scenarios.

Timeline - Move, resize & create

Change demo

Drag & drop is a core feature of the event calendar and it is composed of four sub-features:

  • Click to create events - double click to create events. This can be turned off or set to single click
  • Drag to create events - tap/click to start creating an event and drag to the desired length
  • Move events - grab an event and move it wherever needed
  • Resize events - change the length of an event, grab it from either end and resize it
  • Delete events - pressing the Delete or Backspace keys on the keyboard will delete the focused event

You have granular control over features through the clickToCreate, dragToCreate, dragToMove, dragToResize and eventDelete options, which are false by default.

Use the dragTimeStep option (defaults to 15 minutes) to set the snap resolution of all drag actions.

Events can be marked as fixed by setting their editable property to false. This turns delete, drag & drop move and resize off for the event. The mbsc-event-readonly CSS class will be added to the events. This means if you would like to add opacity, override the mouse cursor or apply any other CSS override, you can add it to this class.

Timeline - Conditional move & resize per event, resource or globally

Change demo
Conditional move & resize per event, resource or globally
Get started with this example

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 dragToResize option to false the events cannot be resized.
  • Events can be fixed in time (cannot be moved) - by setting dragInTime option to false the events cannot be moved in time. Take in consideration that dragToMove must be set to true
  • Events can be fixed to resource (cannot be moved to another resource) - by setting dragBetweenResources option to false the events cannot be moved between resources. Take in consideration that dragToMove must be set to true

To control this on a resource an event basis, use the appropriate properties which have precedence over global calendar options.

Timeline - Drag & drop between timelines

Change demo

There are certain cases when moving the events between calendars can come in handy.

Dragging and dropping events between two timeline instances can be enabled by turning on the externalDrag and externalDrop options.

Want to learn about how you can configure the horizontal and vertical resolution?  Check out how to build a synchronized flight scheduling dashboard →

Timeline - Prevent event overlap

Change demo

Sometimes it is necessary to guarantee that events don't overlap - eg. when scheduling workorders, interacting with a work calendar. You can reject the updates or additions and let the user know about it.

The event overlap can be turned on/off on an event basis, per resource or globally on the instance.

  • On an event basis - by setting the overlap property to false the specified event cannot overlap.
  • Per resource - by setting the eventOverlap property to false the events in the specified resource cannot overlap.
  • Globally on the instance - by setting eventOverlap option to false overlap is disbled globally.

If set to false, the resource and the event settings have precedence over the global calendar eventOverlap option.

Give feedback to the user - optionally, a toast can be displayed to explain why an event cannot be dropped, moved or created. For this we can use the onEventCreateFailed and onEventUpdateFailed lifecycle events.

Timeline - Resource grouping & hierarchy

Change demo

Resources can be fixed to the top through the fixed property of the resource object. The fixed resources have to be placed before any other resource in the order of resources.

Resources can be placed into collapsible groups that can be collapsed or expanded on load through the collapsed property of the resource object. Parents have a slightly different styling compared to child elements that spans across the entire timeline. While the height of the rows are the same for all resources, these can be customized with CSS, the same way as seen in this example.

The hierarchy can be of multiple levels. Event creation, drag & drop is enabled for parent and child resources alike, that can be turned off through the eventCreation property of the resource object.

Timeline - Resource group summaries

Change demo

When scheduling across multiple groups of resources it sometimes is helpful to provide summaries and aggregate calculations on a group level. These dynamically calculated values can be presented as custom templated events in resource parent rows. Whenever new bookings are made, updated or deleted, use the onEventCreated, onEventUpdated and onEventDeleted lifecycle events to update the aggregates for their parent resource.

As we are working with variable event heights, make sure to set eventHeight: 'variable' which can be configured under the view. This is necessary if the actual booked events have a different height than the summary events (for parent resources).

Variable event height is an experimental feature.  Learn more about it in the documentation →

Timeline - Resource properties

Change demo

The resource data structure for the scheduler is straightforward with a couple of base properties that the component understands and uses to render the UI. Besides the base properties you can add any custom property, like title, job ...

  • id - This is an id that can be referenced in the event data
  • name - The name of the resource that will be printed at the top of the respective column
  • color - The color controls the default event color of the resource. Event colors can be specific above this. If the color is omitted the underlying events will inherit the default calendar color
  • eventCreation - This controls if events can be created or dropped onto this resource
  • children - Array of resource objects which will render as a child of the specified resource
  • collapsed - Defines the displayed state of the child resoruce group
  • eventDragBetweenResources - Specifies whether the events in the specified resource are movable across resources. If set to false has precedence over dragBetweenResources option of the calendar.
  • eventDragInTime - Specifies whether the events in the specified resource are movable in time. If set to false has precedence over dragInTime option of the calendar.
  • eventResize - Specifies whether the events in the specified resource are resizable. If set to false has precedence over dragToResize option of the calendar.
  • eventOverlap - Specifies whether the events in the specified resource are allowed to overlap. If set to false has precedence over eventOverlap option of the calendar.
  • fixed - Specifies whether the resource is fixed to the top. If set to true, the specified resource will stick to the top when scrolling.

Timeline - Event properties

Change demo

The event data structure for the timeline is straightforward with a couple of base properties that the component understands and uses to render the UI. Besides the base properties you can add any custom property, like location, description ...

  • id - A unique ID for the event. If not specified a unique id will be generated
  • title - Defines the event text. This can be plaintext or HTML
  • tooltip - Defines the text for the tooltip which appears on mouse hover. If not specified, it will show the title and the start/end times of the event.
  • color - Defines the event color
  • start - Sets the start date and time for the event. It can be a js date object, ISO date string or moment.js object. Learn about date formats
  • end - Sets the end date and time for the event. The same formats are supported as for start
  • allDay - Configures the event as a full-day event
  • recurring - Configures the recurring rules for the event. Learn about recurring events
  • recurringException - Represents the exceptions of a recurring event, when specific dates need to be skipped from the rule.
  • recurringExceptionRule - Represents the exception rule of a recurring event, when recurring dates need to be skipped from the rule.
  • resource - Links the event to one or more resources. Expects a list of IDs from the resources array
  • slot - Links the event to a slot. Expects an ID from the slots array
  • timezone - The timezone where the event takes place. If specified, it takes precedence over the calendar's specified dataTimezone.
  • dragBetweenResources - Specifies whether the event is movable across resources. If set to false has precedence over eventDragBetweenResources property in resources and the dragBetweenResources option of the calendar.
  • dragInTime - Specifies whether the event is movable in time. If set to false has precedence over eventDragInTime property in resources and the dragInTime option of the calendar.
  • resize - Specifies whether the event is resizable. If set to false has precedence over eventResize property in resources and the dragToResize option of the calendar.
  • overlap - Specifies whether overlap is allowed on the event. If set to false has precedence over eventOverlap property in resources and the eventOverlap option of the calendar.
  • editable - Denotes if the event is editable. If set false, the event cannot be dragged, resized or deleted even if globally enabled
  • cssClass - A custom css class for the event. Useful for quick styling adjustments of the event container.
  • bufferBefore - Defines a buffer time in minutes that will be rendered before the start of the event. This buffer area can help you visualise delays or added minutes for tasks. For example travel time for meetings/appointments, check in before a flight.
  • bufferAfter - Defines a buffer time in minutes that will be rendered after the end of the event. This buffer area can help you visualise delays or added minutes for tasks. For example travel time after meetings/appointments, check out after flights, inspection, cleaning after certain tasks.

Timeline - Event connections

Change demo

Link events together, show dependency or event sequence through the connections option.

Pass an array of connection objects where you can specify:

  • from- The ID of the event where the connection starts
  • to- The ID of the event where the connection ends
  • color- Defines the color of the connection
  • arrow- Defines the arrow style of the connection. Can be:
    • 'from'- The arrow points to the starting event
    • 'to'- The arrow points to the ending event
    • 'bidirectional'- The arrow points to both events
    • false- No arrow is displayed
  • type- Defines the type of the connection. Can be:
    • 'fs'- finish-to-start: connects the finish of the starting event with the start of the ending event
    • 'sf' - start-to-finish: connects the start of the starting event with the finish of the ending event
    • 'ss' - start-to-start: connects the events' start times
    • 'ff' - finish-to-finish: connects the events' finish times
  • cssClass A custom css class to the connection SVG paths. E.g. if you want to render a dashed line in some cases or add hover effects, you can do it through a custom cssClass

Timeline - Supported date formats

Change demo

Understanding how to work with dates inside the timeline is essential. You can pass to the data, marked, colors and labels in four different formats. The timeline can work with Javascript date objects, ISO strings and Moment.js objects.

Timeline - Recurrence rules

Change demo

Configure daily, weekly, monthly and yearly recurring events. On top of setting up recurrence, you can exclude specific and recurring days. This is especially useful in cases when a single occurrence of an event is deleted or is moved to a different time.

You can pass the recurrence rule in the recurring property of the event as an object or a string in RRULE format. Learn about the event data structure and where to place the recurring rules.

Use the configurator to experiment, build strings and objects that you can grab and use.

Interested in adding recurrence configuration to your UI?  Take a look at this add/edit dialog →

Timeline - Loading inline data

Change demo

What is a timeline without any events in it? To populate it with events all you have to do is pass the event array to the data option.

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 timeline.

Do you want to learn about the event data sctructure?  See how the event object is built →

Timeline - Events from remote API

Change demo

The timeline 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 timeline understands.

Interested in load on demand?  Dynamically load events on month change →

Timeline - Loading events on demand

Change demo

The timeline supports remote and local data sources. Besides that, events can be populated on initialization or loaded on demand.

Getting the events in real time as the user navigates improves load performance and always serves the most recent data.

Use the onPageLoading lifecycle event to load the data runtime. You can learn about lifecycle events and places where to drop logic to customize the experience.

Interested in loading events from Google Calendar?  Show events from Google Calendar →

Timeline - Loading resources on demand

Change demo

The resources can be populated on initialization or in case of a bigger hierarchy, the more efficient way is to load the child resources and their events on demand.

Getting the resources and the events in real time as the user navigates improves load performance.

Use the onResourceExpand lifecycle event to load the data runtime. You can learn about lifecycle events and places where to drop logic to customize the experience.

Timeline - Working with large data sets

Change demo

The timeline supports virtual horizontal and vertical scrolling. The view virtualization makes it possible to work with many resources across long date ranges.

The following examples shows that navigating 200 resources across a whole year with 10000 events won't pose any problems for the browser neither on mobile or desktop.

View virtualization is always enabled and doesn't need to be turned on explicitly.

Timeline - Sync events to google calendar

Change demo

The event calendar comes with third party calendar integration support through the integration plugin. This needs to be added to the download package or installed separately from a dedicated NPM package.

It includes everything you need to authenticate your users, get their Google calendars and provides functions for CRUD operations. It takes care of loading the events and converts them to the required format so that they can be displayed on the Mobiscroll calendar separately or mixed with other calendars and events.

Customizing the interaction, event workflows, whether the events are read-only is up to you. In this live demo, the different calendars are handled as resources and have their own timeline rows. You can manipulate events in the desired calendars, while read-only calendars are greyed out.

This example uses the integration plugin to connect to and load events from Google Calendar and it is not available in the trial. Give the live demo a try and see how it can be configured.

Timeline - Sync events to outlook calendar

Change demo

The event calendar comes with third party calendar integration support through the integration plugin. This needs to be added to the download package or installed separately from a dedicated NPM package.

It includes everything you need to authenticate your users, get their Outlook calendars and provides functions for CRUD operations. It takes care of loading the events and converts them to the required format so that they can be displayed on the Mobiscroll calendar separately or mixed with other calendars and events.

Customizing the interaction, event workflows, whether the events are read-only is up to you. In this live demo, the different calendars are handled as resources and have their own timeline rows. You can manipulate events in the desired calendars, while read-only calendars are greyed out.

This example uses the integration plugin to connect to and load events from Outlook Calendars and it is not available in the trial. Give the live demo a try and see how it can be configured.

Timeline - Load events from public google calendar

Change demo

Event data can be loaded from remote sources, like public google calendars. Through the integration plugin you can easily show events that are available in a public calendar. The integration plugin needs to be added to the download package or installed separately from a dedicated NPM package.

You will just need the CALENDAR_ID and an apiKey from google and you should be ready to roll.

In this example you can see how multiple public holiday calendars are loaded as separate resources into the timeline.

Public calendars are read-only. If you are interested in syncing private google calendars with read/write/delete access, check out this example.

This example uses the integration plugin to connect to and load events from Google Calendar and it is not available in the trial. Give the live demo a try and see how it can be configured.

Timeline - Add/edit/delete events

Change demo
Create new events

Drag to create and click to create is enabled. Events can be created by dragging or with double clicks. As soon as the initial position is confirmed, a temporary event is created and a custom edit dialog is shown for refinement. On cancel the temporary event will be removed and on confirmation the event will stay in the calendar.

Edit existing events

Drag to resize and drag to move is enabled. Events can be reordered and resized. In addition to that, clicking on the event will open a custom dialog that enables editing the various properties.

Delete events

Delete can be implemented inside the edit dialog with a button. It's just a matter of removing it from the data object. If a dialog is not shown on click, focused events can be deleted with the backspace and delete keys.

Interested in adding recurrence configuration?  Check out this example →

Timeline - Disable past event creation

Change demo

Sometimes we don't want users to be able to create events in the past or to alter past events. This might be role based in some cases or applied in general to the calendar.

To disable past event creation and manipulation, a couple of things need to be handled:

  • Invalidate dates that are before today - this takes care of validating event drop and event creation on past dates
  • Mark past events as fixed - to do this, set the editable property of the event object to false for the events that should remain fixed
  • Handle past occurrences of recurring events - recurring events are loaded as a single event and the occurrences are generated by the timeline. Moving the past occurrences need to be handled in the onEventUpdate and onEventCreate lifecycle events
  • Give feedback to the user - optionally, a toast can be displayed to give feedback to the user why an event cannot be dropped, moved and created in the past. For this we can use the onEventCreateFailed and onEventUpdateFailed lifecycle events

Timeline - Multiple select & bulk operations

Change demo

Multiple event selection can be turned on with the selectMultipleEvents option. Selecting multiple events can be done through user interaction with CTRL/SHIFT/CMD + click or programmatically eg. click of a button or 'select all' checkbox.

Bulk operations like delete, update can be applied the selected events. Things like deleting with the backspace or delete buttons work out of the box but custom actions can be also applied. The selection can be easily retrieved and updated with the getSelectedEvents and setSelectedEvents method.

Custom actions can be performed with external buttons or with context menu activated on right-click.

Timeline - Theming capabilities

Change demo

The look and feel of the timeline can be deeply customized. There are four levels of customization:

  • Base themes: Choose between iOS, Material and Windows.
  • Light or dark: Every theme has a light and dark variant. Setting the themeVariant to 'auto' will switch based on system settings.
  • Custom themes: Use the theme builder to customize the colors and make it match your brand.
  • Custom CSS: If you need further customization, the sky is the limit with CSS overrides.

You can also see how every example looks by changing the theme from the header.

Timeline - Resource background and styling

Change demo

Easily highlight rows by adding a simple background color or craft a more specific look with the cssClass property of the resources data.

The output could be a custom background to individual rows and it can be used for multiple purposes. For example:

  • Changing the background color for parent and child resources, like different color for different levels.
  • Different styling for certain rows, like thicker border acting as separator.
  • Resource selection, where the selected resource has a different background.
  • Setting different backgrounds for the resource titles/grid rows/sidebar
Interested in highlighting date ranges only?  Explore this example →

Timeline - Calendar systems

Change demo

The timeline supports multiple calendar systems. You can control it with the calendarSystem setting, and it supports the following options:

  • Gregorian - it is included by default
  • Jalali - it is the default system of the Persian calendar and is included within the Farsi language pack
  • Hijri - it is included in the Arabic language pack
Interested in localization?  Explore this example →

Timeline - Lifecycle events

Change demo

The timeline 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 onEventClick, onInit, onSelectedDateChange ... will be triggered.

For a complete list of events go to the documentation  See available lifecycle events →

Timeline - Localization

Change demo

The components are fully localized. In case of the timeline this covers date and time format, button copy, rtl and more. You can see how each example shows up by clicking on the small flag icon or checking the examples below.

All settings can be manually overridden  See what options the localization impacts →

Timeline - RTL mode

Change demo

RTL support is built in and can be explicitly controlled through the rtl option. If not set, it is inherited from the locale settings.

Explore the different locales  Check out this example →

Looking for something you didn't see or have a sales question?
Ask us about it, we're here to help.

Get started with Mobiscroll for Angular

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for React

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Javascript

Give the components a try in a starter app or see how they look in your project.

Get started with Mobiscroll for Vue

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Ionic Vue

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Ionic Angular

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Ionic React

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for jQuery

Give the components a try in a starter app or see how they look in your project.

Already have an account?
Get started with Mobiscroll for Angular

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for React

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Javascript

Give the components a try in a starter app or see how they look in your project.

Get started with Mobiscroll for Ionic Angular

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Ionic React

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for jQuery

Give the components a try in a starter app or see how they look in your project.

Get started with Mobiscroll for Vue

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Ionic Vue

Give the components a try locally and see how they look in your project.

Already have an account?
Simple two minute install guide for jQuery and jQuery Mobile
Step 1.
Copy resources
Step 2.
Add references
Step 3.
Copy the code
Step 4.
Refresh browser
Copy the downloaded JS and CSS folder into your project

Extract the downloaded zip (download again) and grab the two folders. Make sure to place it where it can be reached from your html file.

Alternatively you can run the example using our demo app.

file-copy-arrows

Or you can just simply try and play with the examples right from the folder you just unpacked. You don't find the downloaded example? Download it again.

Include the mobiscroll CSS and JS resources in your files

Add this script before the closing </head> tag of your file. Make sure to have jQuery loaded before this.

Copy code <link href="css/mobiscroll.jquery.min.css" rel="stylesheet" />
<script src="js/mobiscroll.jquery.min.js"></script>

Make sure to have the CSS and JS files copied over as explained in Step 1.

Copy the code into your app

Grab the relevant parts and drop them into your JS, HTML and CSS files.

Copy JS
Copy HTML
Copy CSS
Take a look at what you've accomplished

Reload your application in your favorite browser

arrow-browser-reload@2x

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

install-help-bck
Simple two minute install guide for Javascript
Step 1.
Copy resources
Step 2.
Add references
Step 3.
Copy the code
Step 4.
Refresh browser
Copy the downloaded JS and CSS folders into your project

Extract the downloaded zip (download again) and grab the two folders. Make sure to place it where it can be reached from your html file.

Alternatively you can run the example using our demo app.

file-copy-arrows

Or you can just simply try and play with the examples right from the folder you just unpacked. You don't find the downloaded example? Download it again.

Include the mobiscroll CSS and JS resources in your files

Add this script before the closing </head> tag of your file

Copy code <link href="css/mobiscroll.javascript.min.css" rel="stylesheet" />
<script src="js/mobiscroll.javascript.min.js"></script>

Make sure to have the CSS and JS files copied over as explained in Step 1.

Copy the code into your app

Grab the relevant parts and drop them into your JS, HTML and CSS files.

Copy JS
Copy HTML
Copy CSS
Take a look at what you've accomplished

Reload your application in your favorite browser

arrow-browser-reload@2x

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to configure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your React project

Run the following command in the root folder of your React project.

Don't have a project? Try it with our demo app.

Copy command $ mobiscroll config react

You will be prompted to log in with your mobiscroll account. Set your password here.

Working behind a proxy?

If you're working behind a proxy server, additional configuration might be needed. Please check the proxy configuration options in the documentation.

Using a CI/CD workflow?

The package will be installed from a private npm registry, which requires authentication. If your project uses a CI/CD workflow, read this guide on how to make it work.

Copy the code into your app

Grab the relevant parts and drop them into your JSX and CSS files.

Copy JSX
Copy TSX
Copy CSS
Take a look at what you've accomplished

Run $ npm start in the root folder of your app

Copy command $ npm start

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to configure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your React project

Run the following command in the root folder of your React project.

Don't have a project? Try it with our demo app.

Copy command $ mobiscroll config ionic

You will be prompted to log in with your mobiscroll account. Set your password here.

Working behind a proxy?

If you're working behind a proxy server, additional configuration might be needed. Please check the proxy configuration options in the documentation.

Using a CI/CD workflow?

The package will be installed from a private npm registry, which requires authentication. If your project uses a CI/CD workflow, read this guide on how to make it work.

Copy the code into your app

Grab the relevant parts and drop them into your TSX and CSS files.

Copy TSX
Copy CSS
Take a look at what you've accomplished

Run $ ionic serve in the root folder of your app

Copy command $ ionic serve

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to configure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your Angular project

Run the following command in the root folder of your Angular project.

Don't have a project? Try it with our demo app.

Copy command $ mobiscroll config angular

You will be prompted to log in with your mobiscroll account. Set your password here.

Working behind a proxy?

If you're working behind a proxy server, additional configuration might be needed. Please check the proxy configuration options in the documentation.

Using a CI/CD workflow?

The package will be installed from a private npm registry, which requires authentication. If your project uses a CI/CD workflow, read this guide on how to make it work.

Copy the code into your app

Grab the relevant parts and drop them into your Component and Template files. Copy the necessary imports into the Module file of your component. For quick testing copy the css to into your project's style.css or style.scss.

Copy TS
Copy HTML
Copy Module
Copy CSS
Take a look at what you've accomplished

Run $ ng serve in the root folder of your app

Copy command $ ng serve

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to configure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your Angular project

Run the following command in the root folder of your Angular project.

Don't have a project? Try it with our demo app.

Copy command $ mobiscroll config ionic

You will be prompted to log in with your mobiscroll account. Set your password here.

Working behind a proxy?

If you're working behind a proxy server, additional configuration might be needed. Please check the proxy configuration options in the documentation.

Using a CI/CD workflow?

The package will be installed from a private npm registry, which requires authentication. If your project uses a CI/CD workflow, read this guide on how to make it work.

Copy the code into your app

Grab the relevant parts and drop them into your Component and Template files. Copy the necessary imports into the Module file of your component. For quick testing copy the css to into your project's global.scss file.

Copy TS
Copy HTML
Copy Module
Copy CSS
Take a look at what you've accomplished

Run $ ionic serve in the root folder of your app

Copy command $ ionic serve

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to configure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your Vue project

Run the following command in the root folder of your Vue project.

Don't have a project? Try it with our demo app.

Copy command $ mobiscroll config vue

You will be prompted to log in with your mobiscroll account. Set your password here.

Working behind a proxy?

If you're working behind a proxy server, additional configuration might be needed. Please check the proxy configuration options in the documentation.

Using a CI/CD workflow?

The package will be installed from a private npm registry, which requires authentication. If your project uses a CI/CD workflow, read this guide on how to make it work.

Copy the code into your app

Grab the relevant parts and drop them into your Vue page.

Copy
Copy
Take a look at what you've accomplished

Run $ npm run dev in the root folder of your app

Copy command $ npm run dev

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to configure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your Ionic Vue project

Run the following command in the root folder of your Ionic Vue project.

Don't have a project? Try it with our demo app.

Copy command $ mobiscroll config ionic

You will be prompted to log in with your mobiscroll account. Set your password here.

Working behind a proxy?

If you're working behind a proxy server, additional configuration might be needed. Please check the proxy configuration options in the documentation.

Using a CI/CD workflow?

The package will be installed from a private npm registry, which requires authentication. If your project uses a CI/CD workflow, read this guide on how to make it work.

Copy the code into your app

Grab the relevant parts and drop them into your Vue page.

Copy
Take a look at what you've accomplished

Run $ npm run dev in the root folder of your app

Copy command $ npm run dev

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

install-help-bck
Customize & try this demo locally
Sign in or start your free trial

We have to set you up with a trial for this to run 👍

Demos
Timeline Monthly timeline Timeline vs time grid Print mode Employee shift planning Work order scheduling Meeting planner across timezones Restaurant shift management Weekly meal planner Dynamically color & invalidate Multiple classroom scheduling Single resource timetable Compare resources Assign/unassign work orders Sub-tasks and lists Flight scheduling with two timelines Display task progress Configure the timeline Configure the page, size, resolution Set event stack size Event buffer View with custom range picker Equal row height Variable event height Daily event summary Day, week, work week Timezones Switching timezones Event search with sidebar External navigation Timeline event template Hour, day, week, month, year header and footer template Time slot template Resource header template Custom event tooltip Controlling the row height Move, resize & create Conditional move & resize per event, resource or globally Drag & drop between timelines Prevent event overlap Resource grid Resource grouping & hierarchy Resource group summaries Resource properties Event properties Event connections Supported date formats Recurrence rules Loading inline data Events from remote API Loading events on demand Loading resources on demand Working with large data sets Sync events to google calendar Sync events to outlook calendar Load events from public google calendar Add/edit/delete events Disable past event creation Multiple select & bulk operations CSS class for colors and invalids Theming capabilities Resource background and styling Calendar systems Lifecycle events Localization RTL mode
Theme Select
Material
Material Dark
iOS
iOS Dark
Windows
Windows Dark
Language Locale
See other demos and change options
Theme
Locale
See other demos