Updated on Sep 24, 2021

Modern jQuery scheduler with time grid & timeline

Use it in responsive mobile & desktop web apps with jQuery

Drag & Drop ready
Daily or weekly schedule
Responsive calendar
Turn Drag & Drop ON/OFF
Visit the event calendar
Customizable week-view
Event list - daily, weekly, monthly...
Visit the agenda

The scheduler features a time grid - vertically scrollable daily and weekly views and a timeline - horizontally scrollable view with multiple resource support.
The three views - scheduler, calendar, agenda - can be combined to create the perfect user experience on mobile, desktop and everything in-between.

The capabilities like recurring events, all-day, multi-day events, responsiveness are supported by all three views.

As part of Event calendar and scheduler it can be picked up with Scheduling & Calendaring or with the Complete license.

Event calendar
Scheduler
v5
Date & Time pickers
Calendar Date & Time Range Timespan
Event calendar
Agenda Event calendar Scheduler
Form components
Alerts & notifications Buttons Collapsible Forms Inputs & fields Slider & progress Timer Toggle & Radio
Gesture enabled responsive list
Cards Listview Scrollview
Numeric pickers
Measurement Number Numpad
Page layout & navigation
Grid layout Navigation Popup Styling
Pickers & dropdowns
Color Image Option List Scroller Select Treelist

jQuery Scheduler Scheduler for jQuery and jQuery Mobile

Scheduler - Mobile daily schedule

Change demo
Mobile daily schedule
Download and try example

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.

Interested in weekly schedule?  Explore this example →

Scheduler - Desktop daily schedule

Change demo
Desktop daily schedule
Download and try example

Daily schedules can be displayed on large screens as well as small screens.

All-day events are fixed at the top below the header and calendar, while the schedule view is scrollable.

The dates can be quickly navigated by clicking on the month & year indicator.

Interested in weekly schedule?  Explore this example →

Scheduler - Mobile weekly schedule

Change demo
Mobile weekly schedule
Download and try example

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.

Interested in daily schedule?  Explore this example →

Scheduler - Desktop weekly schedule

Change demo
Desktop weekly schedule
Download and try example

Render a full weeks worth of schedule on the screen. The header with days of the week remains planted at the top while the grid with the hours of the week and scheduled events is scrollable.

The current hour is displayed so that upcoming events can be spotted easily.

Interested in daily schedule?  Explore this example →

Scheduler - Responsive behavior

Change demo
Responsive behavior
Download and try example

The scheduler is fully responsive, it adapts to the available space and fills the screen to look good everywhere.

Use the responsive option to configure how the scheduler behaves on different sized screens. You can set it up as a daily schedule view on small screens and a weekly schedule on bigger screens.

The responsive option is equipped with five breakpoints - xsmall, small, medium, large, xlarge - and custom values can be added for a perfect fine-tune.

Change the viewport

Scheduler - Employee shift planning

Change demo
Employee shift planning
Download and try example

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

Scheduler - Work calendar

Change demo

Customize the scheduler by not only See disabling certain hours but hide them through setting the startTime and endTime properties of the view.scheduler option. Quikcly set up a work calendar that goes from Monday though Friday with the startDay and endDay properties and renders the schedule from 8AM to 6PM.

You can easily add breaks - like a "Lunch break" - or disable times with the invalid option.

Scheduler - Work order scheduling

Change demo
Work order scheduling
Download and try 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.

Scheduler - Meeting planner across timezones

Change demo
Meeting planner across timezones
Download and try example

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.

Scheduler - Weekly meal planner

Change demo
Weekly meal planner
Download and try example

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.

Scheduler - Show/hide all-day events

Change demo
Show/hide all-day events
Download and try example

Hide the all-day events section of the scheduler by setting the allDay property under the view.scheduler option.

Scheduler - Colored backgrounds

Change demo
Colored backgrounds
Download and try example

Color the background of entire days or time ranges with the colors option. You can specify backgrounds as exact dates, ranges or set up recurring rules. The recurring object works the same way as for the events. Optionally, you can specify a title as well, which will be displayed on the colored block.

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

Want to color time ranges & days in the calendar view?  Learn how to do it →

Scheduler - Switching views

Change demo

Dynamically switch views within one instance. Use a UI control to let users do the switching or do it programatically.

The example features a month view with with events as labels, a weekly schedule view, a daily schedule and a weekly agenda. Use the setOptions method to dynamically change the settings.

Scheduler - Visible hours and days

Change demo
Visible hours and days
Download and try example

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 startDay and endDay properties
  • Set the visible time range - Use the startTime and endTime properties
  • Control the granularity of the time grid - Use the timeCellStep and timeLabelStep properties
Building a work calendar?  Check out this example →

Scheduler - 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
  • 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 →

Scheduler - Switching timezones

Change demo
Switching timezones
Download and try example

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'

Scheduler - Event customization

Change demo
Event customization
Download and try example

Above the built in rendering mode you can either customize the full event or just the content of the event. If we break up the event into pieces there are four fields that we are interested in:

  • The event start and end time
  • Whether it is an allDay event or not
  • The event color
  • The event title

The scheduler takes care of positioning the event container and everything else is your responsability. You will have to place and provide styling to all event fields. Beside the ones mentioned above you'll be able to render other custom fields, like description, location, participants ... and add buttons, custom interactions.

Pass a custom rendering function to the renderScheduleEvent option. All original event fields along with computed fields like isMultiDay, lastDay can be reached inside the function.

Scheduler - Timeline event template

Change demo
Timeline event template
Download and try example

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.

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

Scheduler - Date header template

Change demo
Date header template
Download and try example

Customize the date headers of the scheduler by adding relevant content, labels or completely change how they look. Use the renderDay option for rendering a custom date header.

Scheduler - Resource template

Change demo
Resource template
Download and try example

Use the renderResource option for rendering a custom resource header. Customize how the resource headers look and what they show. Utilize properties passed in the resources array.

Scheduler - Customizing the header

Change demo
Customizing the header
Download and try example

You can customize how the header of the scheduler looks and how the components are arranged. Besides that you can also add custom functionality, like a segmented control that lets people switch between scheduler and calendar.

Use the renderHeader option for passing a custom header layout. There are predefined components - shorthands if you will - that can be used to assemble the header:

  • Navigation component - <div mbsc-calendar-nav></div>. Use the .md-header-filter-controls CSS class for custom overrides.
  • Today button - <button mbsc-calendar-today></button>. Use the .md-header-filter-today CSS class for custom overrides.
  • Previous month button - <button mbsc-calendar-prev></button>. Use the .md-header-filter-prev CSS class for custom overrides.
  • Next month button - <button mbsc-calendar-next></button>. Use the .md-header-filter-next CSS class for custom overrides.

For changing the order the controls are laid out, you only need to set up the renderHeader. This example sets a consistent order and layout across all themes and shows a custom control at the far right end.

Overriding the order for specific themes

For a custom order on a theme to theme basis, you will need to use a little CSS. Flex layout makes reordering easy. It's just a matter of setting the order in CSS. For material use the .mbsc-material, for windows the .mbsc-windows prefix and for iOS it is .mbsc-ios class. Eg.:

.mbsc-material .md-header-filter-prev { order: 1; }
.mbsc-material .md-header-filter-next { order: 2; }
.mbsc-material .md-header-filter-controls { order: 3; }
.mbsc-material .md-header-filter-today { order: 4; }
Want to add a filter to the header?  Check out the next example →

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

Scheduler - Timeline vs time grid

Change demo
Timeline vs time grid
Download and try example

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.

Scheduler - Resource grid

Change demo

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.

Would you like to customize the resource template?  Check out the previous example →

Scheduler - Configure the timeline

Change demo
Configure the timeline
Download and try example

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 day - Use the startDay and endDay properties
  • Control the granularity of the timeline - Use the timeCellStep and timeLabelStep properties

Scheduler - Custom track height

Change demo
Custom track height
Download and try example

The height of the timeline tracks have a minimum height of 48px. 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;
}

Scheduler - Daily event summary

Change demo
Daily event summary
Download and try example

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.

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

Scheduler - Day, week, work week

Change demo
Day, week, work week
Download and try example

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.

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

Scheduler - Resource grouping & hierarchy

Change demo
Resource grouping & hierarchy
Download and try example

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.

Scheduler - Move, resize & create

Change demo
Move, resize & create
Download and try example

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 en event, grab it from either end and resize it

You have granular control over features through the clickToCreate, dragToCreate, dragToMove and dragToResize 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.

Scheduler - Blocked out times

Change demo
Blocked out times
Download and try example

Entire days and time ranges can blocked out to manage event creation and editing more efficiently.

To disable specific times, ranges, days or recurring days and times you can pass an array to the invalid option. A couple of examples:

  • To disable weekends, use the recurring object - recurring: { repeat: 'weekly', weekDays: 'SA,SU' }
  • Lunch break between 12 PM and 1 PM with title - { start: "12:00", end: "13:00", title: 'Lunch break', recurring: { repeat: 'weekly', weekDays: 'MO,TU,WE,TH,FR' }

When dragging events onto disabled days or time-slots, they will automatically be denied and onEventCreateFailed/onEventUpdateFailed events will be triggered, from which custom logic can be executed to show a toast or maybe a modal for data correction. The built-in logic of how the calendar handles validation on user interaction can be controlled through the invalidateEvent option:

  • 'strict' - Strict being the default, no event overlap is allowed with invalid ranges.
  • 'start-end' - With start-end validation the calendar checks if the start or end of the event coincides with any invalid range. Other overlaps are allowed.

If you're interested in invalids for a given range (including recurring occurrences), you can use the getInvalids function.

Want to prevent double booking?  Learn how to manage event overlaps →

Scheduler - Prevent event overlap

Change demo
Prevent event overlap
Download and try example

Sometimes it is necessary to guarantee that events don't overlap - eg. when scheduling workorders, interacting with a work calendar.

Use the onEventCreate and onEventUpdate events to reject the updates, additions and let the user know about it. Use the getEvents method to get the events for a given range.

These two lifecycle events run before the event is actually created or updated whenever someone interacts with the scheduler through drag & drop. For a complete list of lifecycle events take a look at this interactive exmaple.

Looking to implement time off or block out ranges?  Learn how to add lunch breaks, working hours and disable weekends →

Scheduler - External drag and drop

Change demo
External drag and drop
Download and try example

Events can be created and scheduled by dragging and dropping an external resource onto the scheduler. In order for that to work you will need to have two things set up:

  • Enable the scheduler to receive external events by setting externalDrop to true.
  • Initialize the external events (containers) as draggable components.

Set up a container as draggable with the mbsc-draggable attribute. Pass a skeleton event definition through the data-drag-data attribute as a stingified json object. This will be added to the event calendar on drop. If omitted, a default event will be created. For a more programmatic approach you might want to use the component initialization where the draggable is initialized in js code and the dragData can be passed as an object.

Learn more from the external drag & drop documentation.

Use the onEventCreate and onEventCreateFailed for triggering a custom logic on drop like showing a toast. The appropriate lifecycle event will be triggered if the drop is successful or fails.

Looking for external drag into a calendar?  Check out this example →

Scheduler - External d&d presets

Change demo
External d&d presets
Download and try example

Use external draggable events to create preset tasks that people can quickly copy and spawn events from. A great example is an auto repair shop where among others, mechanics have to perform the same predefined tasks.

Print a list of predefined tasks and initialize them as draggable elements. Enable externalDrop for the scheduler and set up the predefined event skeletons for the draggable component.

Whenever there is more information to be captured, like a detailed task notes, customer information, the name of the technician... you can trigger a popup with the task form in the onEventCreate lifecycle event. For failed drops (trying to schedule a task during lunch breaks or weekends) the onEventCreateFailed event will be triggered.

Want to see how external presets look & feel for a calendar?  Check out this example →

Scheduler - Multiple resources

Change demo
Multiple resources
Download and try example

The scheduler can handle multiple resources inside a single instance. Pass the resource list to the resources option with an id, name and color.

  • 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 ommited the underlying events will inherit the default calendar color.

Events can be shared between resources and it is possible to move events between resources. The move is handled automatically however you can block it if moving an event from one resource to the other is prohibited. Learn about lifecycle event hooks.

Scheduler - Resource grouping

Change demo
Resource grouping
Download and try example

Resources show up in the header of the calendar as the primary group and below them are the days. This can be switched up through the groupBy option that expects 'resource' or 'day'.

Combined with the day and week-view you can help people quickly find what they are looking for. Learn how to add an integrated segmented control to the header.

Scheduler - Shared events

Change demo

Events can be shared among resources. This can easily be the same resource type, like people in a shared work calendar scenario or different resource types, like aircraft and instructor in a flight training scenario where you'll have to schedule an instructor and an aircraft for a class which is the event.

Shared events will render correctly in the appropriate resource columns with drag & drop, validation across invalid dates and times will work out of the box. All you need to do is to add both resourceIDs to the event.

Scheduler - Show/hide resources

Change demo
Show/hide resources
Download and try example

Resources can be dynamically turned on and off. This will show or hide the resource and can be done runtime the same way as for any other calendar option.

Scheduler - Event properties

Change demo

The event 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 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
  • 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
  • resource - Links the event to one or more resources. Expects a list of IDs from the resources array
  • editable - Denotes if the event is editable. If set true, the event cannot be dragged, resized or deleted even if globally enabled

Scheduler - Supported date formats

Change demo
Supported date formats
Download and try example

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

Scheduler - 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 occurence 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 →

Scheduler - Loading inline data

Change demo
Loading inline data
Download and try example

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

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

Scheduler - Events from remote API

Change demo
Events from remote API
Download and try example

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.

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

Scheduler - Loading events on demand

Change demo
Loading events on demand
Download and try example

The scheduler 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 →

Scheduler - Events from Google calendar

Change demo
Events from Google calendar
Download and try example

Event data can be loaded from remote sources. Even if initially you don't get it in the same format the scheduler understands, you can easily convert it. Set the base properties and custom fields and let the calendar render the events or create custom event templates.

In this example you'll see how you can load events from a public calendar using the googleSDK. Make sure to set your API key and Client ID, that you can get from here.

When trying locally please make sure to run this demo on a local webserver, otherwise data won't load from the Google calendar.

Scheduler - Add/edit/delete events

Change demo
Add/edit/delete events
Download and try example

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

Create new events

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.

Edit existing events

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 events

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.

Interested in adding recurrence configuration?  Check out this example →

Scheduler - Custom component in header

Change demo
Custom component in header
Download and try example

The header of the scheduler is a canvas and an opportunity for customization. You can add custom components and enable new interaction in context.

Such an example would be a custom filter block created with the help of a segmented control and placed between the standard UI components, which are:

  • Navigation component - <div mbsc-calendar-nav></div>. Use the .md-header-filter-controls CSS class for custom overrides.
  • Today button - <button mbsc-calendar-today></button>. Use the .md-header-filter-today CSS class for custom overrides.
  • Previous month button - <button mbsc-calendar-prev></button>. Use the .md-header-filter-prev CSS class for custom overrides.
  • Next month button - <button mbsc-calendar-next></button>. Use the .md-header-filter-next CSS class for custom overrides.

For changing the order the controls are laid out, you only need to set up the renderHeader.

Overriding the order for specific themes

For a custom order on a theme to theme basis, you will need to use a little CSS. Flex layout makes reordering easy. It's just a matter of setting the order in CSS. For material use the .mbsc-material, for windows the .mbsc-windows prefix and for iOS it is .mbsc-ios class. Eg.:

.mbsc-material .md-header-filter-prev { order: 1; }
.mbsc-material .md-header-filter-next { order: 2; }
.mbsc-material .md-header-filter-controls { order: 3; }
.mbsc-material .md-header-filter-today { order: 4; }
Want to style and reorder the header?  Take a look at the previous example →

Scheduler - Theming capabilities

Change demo
Theming capabilities
Download and try example

The look and feel of the scheduler 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.

Scheduler - Calendar systems

Change demo

The scheduler 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 inlcuded within the Farsi language pack
  • Hijri - it is included in the Arabic language pack
Interested in localization?  Explore this example →

Scheduler - Lifecycle events

Change demo

The scheduler 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 →

Scheduler - Localization

Change demo

The components are fully localized. In case of the scheduler 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 overriden  See what options the localization impacts →

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

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.

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 figure 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

Copy command $ mobiscroll config react --version=5

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

Copy the code into your app

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

Copy JSX
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 figure 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

Copy command $ mobiscroll config ionic --version=5

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

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 figure 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

Copy command $ mobiscroll config angular --version=5

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

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 figure 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

Copy command $ mobiscroll config ionic --version=5

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

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
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
Theme Select
Mobiscroll
Mobiscroll Dark
Material
Material Dark
iOS
iOS Dark
Windows
Windows Dark
Language Locale
See other demos and change options
Theme
Locale
See other demos