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 24 hour cell and label steps.

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.

When scheduling work orders and syncronizing 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 resources.

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

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 though 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 timemezone (UTC in this example). Learn how to create a custom event template.

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.

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.

By default the height of the timeline tracks will adjust to accomodate 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;
}

In situations when users are interesed in seeing a daily summary rather then 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.

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

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 thorugh the displayTimezone - eg. 'America/Los_Angeles'

Timeline events can be customized with the help of 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.

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.

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

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

By default, the calendar shows the browser native tooltip when hovering 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.

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.

The resources rendered vertically can be as simple as plain text or have a custom template implemented. This example utilizes the properties of the resource objects which are conference rooms with capacity. This can be rendered a simple grid with the name and available seats.

Resources can be placed into collapsible groups. Parents hava a slighlty different styling compared to child elements that spans across the entire timeline.

The hierarchy can be of multiple levels and event creation, drag & drop is enabled for parent and child categories alike. Specific resources (eg. parents) can be disabled selectively thorugh the invalid option.

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

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.

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.

After looking at the different operations of event creation, edit/update and delete it all can be all put together in a choesive example.

Drag to create and click to create is enabled. Events can be created by dragging or with double click. As soon as the initial posion 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.

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

Delete can be implmented 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.

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.