Skip to main content
Version: 5.35.0

Migrating from DHTMLX to Mobiscroll

Overview​

This article provides a comprehensive guide for migrating your scheduling solution from DHTMLX to Mobiscroll.

DHTMLX Scheduler can be integrated into Vue by using a custom wrapper component around the plain JavaScript scheduler instance, whereas Mobiscroll provides native Vue components that plug directly into templates through standard bindings.

If you are currently using DHTMLX Scheduler in Vue via a custom wrapper, or using it within another framework and planning to migrate to Mobiscroll’s Vue components, the following guide outlines the steps required for a smooth transition.

Installation​

Migrating from DHTMLX Scheduler to Mobiscroll starts with a different approach to installation, especially regarding package access and tooling.

Mobiscroll installation steps:​

Install the Mobiscroll CLI (only needed once):

npm install -g @mobiscroll/cli

Configure Mobiscroll in your project (navigate to your project root folder and run):

mobiscroll config vue

Alternatively, Mobiscroll also supports manual installation if you’re not using NPM. However, using NPM is generally the recommended approach for simplicity and maintainability.

Initialization​

DHTMLX Scheduler:​

scheduler.init('scheduler_here');

Mobiscroll:​

<script setup>
import '@mobiscroll/vue/dist/css/mobiscroll.min.css'
import { MbscEventcalendar } from '@mobiscroll/vue'
</script>

<template>
  <MbscEventcalendar />
</template>

View configuration​

Key Differences:

  • With Mobiscroll, you get precise control over time ranges on Scheduler and Timeline views, plus feature-rich Event Calendar and Agenda views for seamless scheduling.
  • DHTMLX uses deeply nested vue objects or HTML for defining views, layouts, templates, and event sources. Views like “Day,” “Week,” “Month,” and custom configurations are declared in the scheduler initialization with specific settings for each widget, often grouped into sections and requiring manual wiring for advanced customization.

DHTMLX Scheduler - Timeline view:​

For the DHTMLX you have to use the createTimelineView method for customizing the Timeline view

scheduler.plugins({
  timeline: true,
});

scheduler.createTimelineView({
  name: 'timeline',
  x_unit: 'minute', // measuring unit of the X-Axis.
  x_date: '%H:%i', // date format of the X-Axis
  x_step: 30, // X-Axis step in 'x_unit's
  x_size: 24, // X-Axis length specified as the total number of 'x_step's
  x_start: 16, // X-Axis offset in 'x_unit's
  x_length: 48, // number of 'x_step's that will be scrolled at a time
  y_unit: [
    { key: 1, label: 'Resource 1' },
    { key: 2, label: 'Resource 2' },
    { key: 3, label: 'Resource 3' },
    { key: 4, label: 'Resource 4' },
  ],
  render: 'bar', // view mode
});

scheduler.init('scheduler_here');

Mobiscroll Timeline view:​

In the Mobiscroll Timeline view, the timeline object within the view option allows you to customize the visible days and the timeline’s scale. You can specify which days to display (e.g., weekdays), set the time scale (e.g., 30-minute intervals), and define the frequency of the labels shown (e.g., every 15 minutes).

<script setup>
import { MbscEventcalendar } from '@mobiscroll/vue'
import '@mobiscroll/vue/dist/css/mobiscroll.min.css'

const myView = {
  timeline: {
    type: 'day',
    size: 1,
    startTime: '06:00',
    endTime: '20:00'
  }
}

const mySelectedDate = '2017-01-01' // if you want to set the initial view to a specific date
</script>

<template>
  <MbscEventcalendar :view="myView" :defaultSelectedDate="mySelectedDate" />
</template>

Check out how you can configure the Timeline view in this live example.

DHTMLX Scheduler view:​

In case of DHTMLX Scheduler the Week view is added to the basic scheduler's markup by default. That's why you don't need to provide any extra code for adding the view to the scheduler.

scheduler.init('scheduler_here',new Date(2019,0,10),"week");

Mobiscroll Scheduler:​

You can customize the visible days and hours, as well as the time grid scale, using the schedule object under the view option. This allows you to define which days are shown (e.g., weekdays), set the visible time range (e.g., 8 AM to 6 PM), adjust the time scale (e.g., 30-minute intervals), and control the frequency of the labels (e.g., every 15 minutes).

<script setup>
import { MbscEventcalendar } from '@mobiscroll/vue'
import '@mobiscroll/vue/dist/css/mobiscroll.min.css'

const myView = {
  schedule: {
    type: 'week'
  }
}

const mySelectedDate = '2019-01-10' // if you want to set the initial view to a specific date
</script>

<template>
  <MbscEventcalendar :view="myView" :defaultSelectedDate="mySelectedDate" />
</template>

Check out how you can configure the Scheduler view in this live example.

Resource configuration​

Both DHTMLX Scheduler and Mobiscroll support resource-based scheduling (e.g., rooms, employees, assets), but they use different configuration models and event data structures.

In DHTMLX Scheduler, resource assignment depends on the view you use:

  • Timeline view uses y_property to decide which row an event belongs to.
  • Unit view uses property to decide which column an event belongs to. You pick the event field name yourself (e.g. room_id, employee_id), and Scheduler groups events accordingly.

In Mobiscroll, resources are defined once in a global resources array. Mobiscroll can handle multiple resources inside a single instance. Mobiscroll also supports multi-resource assignment out of the box.

DHTMLX Scheduler - Timeline view – resource definition:​

scheduler.plugins({
  timeline: true,
});

scheduler.createTimelineView({
  name: 'timeline',
  y_property: 'section_id', // mapped data property
  y_unit: [
    { key: 1, label: 'Mike' },
    { key: 2, label: 'Linda' },
    // ...
  ],
});

scheduler.init('scheduler_here');

DHTMLX Scheduler - Units view – resource definition:​

The DHTMLX Units view uses the list parameter of the createUnitsView option to set values/ units for the X-Axis. To be correctly processed, list items must have 2 mandatory properties:

  • key - the item's id
  • label - the item's label
scheduler.plugins({
  units: true,
});

scheduler.createUnitsView({
  name: 'unit',
  property: 'unit_id', //the mapped data property
  list: [
    //defines the units of the view
    { key: 1, label: 'Mike' },
    { key: 2, label: 'Linda' },
    // ...
  ],
});

scheduler.init('scheduler_here');

Mobiscroll Timeline view/ Scheduler – resource definition​

Mobiscroll uses the resources array with id and name properties.

<script setup>
import '@mobiscroll/vue/dist/css/mobiscroll.min.css'
import { MbscEventcalendar } from '@mobiscroll/vue'
import { ref } from 'vue'

const myResources = ref([
  {
      { id: 'r1', name: 'Mike' },
      { id: 'r2', name: 'Linda' },
      // ...
  }
])
</script>

<template>
  <MbscEventcalendar :resources="myResources" />
</template>

Mobiscroll offers significantly more resource manipulation flexibility, including fixed rows, reorder, and external drag & drop.

For more advanced use cases, refer to the Mobiscroll documentation for additional options, including custom rendering and templating of resources. You can also explore our demo page for detailed resource configuration examples.

Event migration​

As shown below, there are clear differences in how events are structured between DHTMLX and Mobiscroll:

  • The basic DHTMLX event structure is a JSON object with a unique event id, start_date and end_date (that defines the event period), an event title defined by text property, and optional custom properties like room_id to link to resources - this defines how events are internally represented and loaded in the scheduler.
  • In contrast, Mobiscroll uses the data option in which start and end define the event period, the title property represents the event’s title, and an event id property is also available. Additionally, you can use the resource property to specify which resource the event should be assigned to.

Event structure comparison​

DHTMLX Scheduler:​

scheduler.parse([
  {
    id: 1,
    text: 'Conference',
    start_date: '2012-09-17 12:00',
    end_date: '2012-09-28 21:00',
    room_id: 1, // Custom property to associate event with a resource (e.g., room)
  },
]);

Mobiscroll:​

<script setup>
import { MbscEventcalendar } from '@mobiscroll/vue'
import '@mobiscroll/vue/dist/css/mobiscroll.min.css'
import { ref } from 'vue'

const myEvents = ref([
  {
    id: 1, 
    resource: 'r1',
    start: '2012-09-17T12:00',
    end: '2012-09-18T21:00',
    title: 'Conference'
  }
])

</script>

<template>
  <MbscEventcalendar :data="myEvents" />
</template>

Converting DHTMLX Scheduler events to Mobiscroll Format​

Here’s a simple example of how to convert DHTMLX-style events into the format used by Mobiscroll:

const mobiscrollEvents = ref([])

// ...

if (dhtmlxEvents && dhtmlxEvents.length) {
  const convertedEvents = dhtmlxEvents.map(event => {
    const start = new Date(event.start_date)
    const end = new Date(start.end_date)

    return {
      id: event.id,
      title: event.text,
      start,
      end,
      resource: event.resource_id // based on `property` option
    }
  })

  mobiscrollEvents.value = convertedEvents
}

Every project may have its own unique data format and requirements, so this script serves only as a basic starting point. You’ll likely need to adapt your transformation logic to fit your application’s specific needs.

Loading and saving data​

When selecting a scheduling or calendar UI component, one of the most important factors to evaluate is how the component loads and saves data. The chosen approach can significantly influence performance, scalability, and integration complexity.

We will examine how each framework handles:

  • Loading data from local or remote sources.
  • Saving or synchronizing changes to a backend system.

Loading data​

DHTMLX:

In DHTMLX Scheduler, loading data works by calling scheduler.parse() or scheduler.load() after initialization:

  • scheduler.load(url, format) - fetches events from a server (JSON, XML, or iCal).
  • scheduler.parse(data, format) - loads events directly from a vue object. Once loaded, Scheduler automatically renders the events into the current view.

Mobiscroll:

Let’s see an example for each case:

Local data​

DHTMLX Scheduler:​

scheduler.init('scheduler_here');

scheduler.parse([
  {
    id: 1,
    text: 'Conference',
    start_date: '2012-09-17 12:00',
    end_date: '2012-09-28 21:00',
    room_id: 1, // Custom property to associate event with a resource (e.g., room)
  },
]);

Mobiscroll:​

Pass the event array to the data option.

<script setup>
import { MbscEventcalendar } from '@mobiscroll/vue'
import '@mobiscroll/vue/dist/css/mobiscroll.min.css'
import { ref } from 'vue'

const myEvents = ref([
  {
    id: 1, 
    resource: 'r1',
    start: '2017-01-01T10:00',
    end: '2017-01-01T12:00',
    title: 'Click me'
  }
])

</script>

<template>
  <MbscEventcalendar :data="myEvents" />
</template>

Remote data​

DHTMLX Scheduler​

In case of DHTMLX, scheduler.init initializes the scheduler in the specified HTML element, then scheduler.load fetches event data as a JSON array from a remote URL for display in the scheduler.

scheduler.init('scheduler_here', new Date(), 'day');

// enable dynamic loading BEFORE load()
scheduler.setLoadMode('day'); // "day" | "week" | "month" | "year"

// initial fetch for current range
scheduler.load('/api/events');

Mobiscroll​

In case of Mobiscroll, you can also use the page-loading pevent to load the data (on demand) relevant to the currently active view. The event fires every time the date range of the view changes, for example, when someone navigates the event calendar. Getting the events in real time as the user interacts with the UI improves load performance and always serves the most recent data.

<script setup>
  import { MbscEventcalendar, getJson } from '@mobiscroll/vue'
  import '@mobiscroll/vue/dist/css/mobiscroll.min.css'
  import { ref } from 'vue'

  const myEvents = ref([])

  const myView = {
    schedule: { type: 'day' }
  }
  
  function handlePageLoading(args) {
    const year = args.month.getFullYear()
    const month = args.month.getMonth()
    const day = args.month.getDate()

    getJson(
      'https://example.remotedata.com/weeklyevents/?year=' + year + '&month=' + month + '&day=' + day,
      (data) => {
        myEvents.value = data
      },
      'jsonp'
    )
  }
</script>

<template>
  <MbscEventcalendar
    :view="myView"
    :data="myEvents"
    @page-loading="handlePageLoading"
  />
</template>

In case of the timeline view, data can also be loaded dynamically during scrolling. Scrolling vertically or horizontally triggers the virtual-loading lifecycle event, which can be used to load data incrementally during scrolling.

Saving data​

DHTMLX​

In DHTMLX Scheduler, saving data works by attaching a dataProcessor to the scheduler that handles CRUD operations by sending changes (adds, updates, deletes) to a server-side script which updates the database accordingly.

Example:

scheduler.init('scheduler_here');

scheduler.load('/api/events');

const dp = scheduler.createDataProcessor({
  url: '/api/events',
  mode: 'REST',
});

Mobiscroll​

  • Persistence is managed by listening to Mobiscroll’s CRUD lifecycle events.
  • The Event Calendar exposes a variety of events that are triggered on certain actions made on calendar events. These events can be used to send your data to your API or save it to persistent storage.

Example for saving, updating, and deleting an event through an API:

<script setup>
  import '@mobiscroll/vue/dist/css/mobiscroll.min.css';
  import { MbscEventcalendar } from "@mobiscroll/vue";
  import { ref } from "vue";

  const myEvents = ref([]);

  const myView = {
    schedule: { type: "week" },
  };

  function saveEvent(args, inst) {
    fetch('add.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(args.event)
    });
  }

  function updateEvent(args, inst) {
    fetch('update.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(args.event)
    });
  }

  function deleteEvent(args, inst) {
    fetch('delete.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(args.event)
    });
  }
</script>

<template>
  <MbscEventcalendar
    :view="myView"
    :data="myEvents"
    @event-created="saveEvent"
    @event-updated="updateEvent"
    @event-deleted="deleteEvent"
  />
</template>

Mobiscroll offers a flexible, event-driven approach suitable for both lightweight client-side setups and API-driven applications. Developers are responsible for implementing their own persistence logic, allowing for high adaptability but requiring more manual integration effort.

Both libraries are capable of handling modern scheduling needs, but the choice depends largely on application scale, data complexity, and desired control over the persistence layer.

Lifecycle events​

Both libraries, DHTMLX and Mobiscroll, provide a comprehensive set of lifecycle event hooks, enabling deep customization and integration with your application logic. These events are emitted at various stages of a component’s lifecycle, offering developers full control to inject custom behavior and extend default functionality.

Whether you’re looking to manipulate data before rendering, respond to user interactions, or perform cleanup tasks, Mobiscroll’s event system offers the flexibility to tailor components to your specific needs.

When migrating between DHTMLX and Mobiscroll, it’s important to note that most lifecycle events follow similar patterns across both libraries. This alignment minimizes friction during the transition process and helps preserve custom behaviors with minimal adjustments.

One such example is how each library handles a double-click on a cell. Below is a comparison of the respective event handlers and their parameters.

DHTMLX​

In DHTMLX Scheduler, lifecycle events such as creating, updating, or deleting an event are handled through the scheduler.attachEvent() method. This API allows you to subscribe to internal scheduler callbacks — for example: onEventAdded, onEventChanged, or onEventDeleted — and execute custom logic when these actions occur.

For example the onXScaleDblClick event is triggered when the user makes a double click on a cell on the x-axis (the Timeline view only). This event provides access to several key objects that describe the interaction and contextDblClick:

  • index: number - the column index of the clicked cell (zero-based numbering)
  • value: object - Date object of the start time stamp of the clicked cell
  • e: event - native event object

Example:

scheduler.attachEvent('onCellDblClick', function (x_ind, y_ind, x_val, y_val, e) {
  console.log('Cell double-clicked:', x_ind, y_ind, x_val, y_val, e);
  // Example: open a new event creation dialog
  // showCreateEventDialog(x_val, y_val);
});

Mobiscroll​

Mobiscroll components (e.g., Event Calendar, Scheduler, Timeline) expose a similar cell-double-click event, which is fired when a cell is double-clicked. It includes contextual information that allows for granular control over the interaction:

  • args - The event argument with the following properties:
    • date: Date - The date of the clicked cell.
    • domEvent: Event - The DOM event of the click.
    • events: Array - The events for the clicked date.
    • resource: string | number - The id of the resource where the cell was clicked, if resources are set.
    • selected: boolean - Specifies if the day is currently selected or not (before it was clicked).
    • source: 'calendar' | 'schedule' | 'timeline' - The view where the cell was clicked.
    • target: HTMLElement - The DOM element of the clicked cell.
  • inst - The component instance.

Example:

<script setup>
import { MbscEventcalendar } from '@mobiscroll/vue'
import '@mobiscroll/vue/dist/css/mobiscroll.min.css'

function handleCellDblClick(args) {
  console.log('Cell double-clicked:', args.date, args.resource);

  // Example: open a custom dialog to create a new event
  // showCreateEventDialog(args.date, args.resource);
}
</script>

<template>
  <MbscEventcalendar @cell-double-click="handleCellDblClick" />
</template>

To explore the full list of available Mobiscroll lifecycle events and understand how they can be leveraged, please refer to the documentation.

Additionally, you can see these events in action through live, interactive examples for the following Mobiscroll components:

These examples provide hands-on insights into how lifecycle events work in practice.

Feature migration​

As a final step, let’s explore how core features from DHTMLX can be replicated using Mobiscroll. While some capabilities are available out of the box in DHTMLX, Mobiscroll often requires more explicit setup but offers much more flexibility.

Drag & Drop functionality​

  • DHTMLX Scheduler enables drag-and-drop operations by default with no extra configuration needed.
  • In Mobiscroll, the D&D features must be enabled explicitly via configuration options.

Enabling Drag & Drop in Mobiscroll:​

<script setup>
import '@mobiscroll/vue/dist/css/mobiscroll.min.css'
import { MbscEventcalendar } from '@mobiscroll/vue'

</script>

<template>
  <MbscEventcalendar 
    :clickToCreate="true" 
    :dragToCreate="true" 
    :dragToMove="true" 
    :dragToResize="true" 
    :eventDelete="true"
  />
</template>

This configuration allows users to create, move, resize, and delete events in Mobiscroll.

Switching Views (Calendar/Scheduler/Agenda)​

  • DHTMLX Scheduler enables switching views by default with no extra configuration needed.
  • Mobiscroll doesn’t include a built-in view-switching UI by default. However, it offers greater flexibility by allowing you to implement a custom header where you can design the view-switching experience to fit your needs. For example, you can use a dropdown menu or segmented controls to let users switch between views like Calendar, Scheduler, Agenda, or any other layout that fits your use case.

DHTMLX Scheduler:​

scheduler.init('scheduler_here', new Date(2020,8,12), "week");

Mobiscroll:​

In Mobiscroll, switching between views like Day, Week, or Month requires setting up a custom header along with event listeners to handle the view changes. You can see an example of this implementation here.

<script setup>
import '@mobiscroll/vue/dist/css/mobiscroll.min.css'
import {
  getJson,
  MbscCalendarNav,
  MbscCalendarNext,
  MbscCalendarPrev,
  MbscCalendarToday,
  MbscEventcalendar,
  MbscSegmented,
  MbscSegmentedGroup
} from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'

const myEvents = ref([])
const view = ref('month')
const myView = ref({
  calendar: {
    labels: true
  }
})

function changeView() {
  let calView

  switch (view.value) {
    case 'year':
      calView = {
        calendar: { type: 'year' }
      }
      break
    case 'month':
      calView = {
        calendar: { labels: true }
      }
      break
    case 'week':
      calView = {
        schedule: { type: 'week' }
      }
      break
    case 'day':
      calView = {
        schedule: { type: 'day' }
      }
      break
    case 'agenda':
      calView = {
        calendar: { type: 'week' },
        agenda: { type: 'week' }
      }
      break
  }

  myView.value = calView
}

onMounted(() => {
  getJson(
    'https://trial.mobiscroll.com/events/?vers=5',
    (events) => {
      myEvents.value = events
    },
    'jsonp'
  )
})
</script>

<template>
  <MbscEventcalendar
    className="md-switching-view-cont"
    :view="myView"
    :data="myEvents"
    :height="750"
  >
    <template #header>
      <MbscCalendarNav className="cal-header-nav" />
      <div className="cal-header-picker">
        <MbscSegmentedGroup v-model="view" @change="changeView">
          <MbscSegmented value="year"> Year </MbscSegmented>
          <MbscSegmented value="month"> Month </MbscSegmented>
          <MbscSegmented value="week"> Week </MbscSegmented>
          <MbscSegmented value="day"> Day </MbscSegmented>
          <MbscSegmented value="agenda"> Agenda </MbscSegmented>
        </MbscSegmentedGroup>
      </div>
      <MbscCalendarPrev className="cal-header-prev" />
      <MbscCalendarToday className="cal-header-today" />
      <MbscCalendarNext className="cal-header-next" />
    </template>
  </MbscEventcalendar>
</template>

Timezones​

Handling time zones accurately is crucial in calendar and scheduling applications, especially when working across regions or coordinating international events. Mobiscroll and DHTMLX take significantly different approaches. Mobiscroll is clearly superior in timezone management, while DHTMLX only operates with native JS Date objects, which limits its ability to handle complex timezone scenarios. 

DHTMLX​

DHTMLX Scheduler only operates with native JS Date objects.

Mobiscroll​

By default, Mobiscroll will not do any timezone conversion, will display the dates without modification, handling them as timezone-less. If your use case requires interpreting or displaying data in a different time zone, you can achieve this by using one of the supported third-party libraries for time zone conversion:

Mobiscroll exposes two configuration options to handle time zones:

  • dataTimezone option – the time zone in which your event data is stored (e.g., 'utc')
  • displayTimezone option – the time zone in which you want the data to be presented (e.g., 'Europe/Stockholm')

So, let’s say you want to use the Day.js timezone library. After installing it into your project, you can pass the dayjsTimezone object to the Timeline’s timezonePlugin option:

<script setup>
  import '@mobiscroll/vue/dist/css/mobiscroll.min.css'
  import { dayjsTimezone, MbscEventcalendar } from '@mobiscroll/vue';
  import dayjs from 'dayjs';
  import timezone from 'dayjs/plugin/timezone';
  import utc from 'dayjs/plugin/utc';

  dayjs.extend(utc);
  dayjs.extend(timezone);
  dayjsTimezone.dayjs = dayjs;
</script>

<template>
  <MbscEventcalendar
    :timezonePlugin="dayjsTimezone"
    dataTimezone="utc"
    displayTimezone="Europe/Stockholm"
  />
</template>

Also, feel free to explore live examples to see how time zones work in action:

Or you can also check advanced demos such as:

You can also store the timezone inside the event data, using the timezone property.

As a conclusion, Mobiscroll is clearly superior in timezone management, DHTMLX only operates with native JS Date objects.

Conclusion​

DHTMLX Scheduler offers stronger server-side capabilities and export options, while Mobiscroll excels in multi-calendar systems and flexible component design:

In addition to drag & drop and custom view-switching, Mobiscroll also supports timezone handling and zooming levels. All of our views work seamlessly across both mobile and desktop environments, with full support for touch interactions.

As mentioned above, with some additional setup, most —if not all— features can be effectively replicated when migrating from DHTMLX to Mobiscroll. If you have any specific questions or run into any issues, don’t hesitate to reach out — we’re happy to help.

Templating and renderers​

Event templating​

DHTMLX​

In DHTMLX Scheduler, you can customize the content of events and define which data should be displayed by using templates. Each view relies on its own set of templates, so to determine which templates a particular view uses, refer to the article Formatting Labels, Dates, Styles article.

Most views use the following two templates for customizing event text:

  • event_header - defines the text shown in the event header
  • event_text - defines the main text displayed inside the event

DHTMLX also recommends redefining templates inside the onTemplatesReady event handler. Doing so ensures that your custom templates are not overwritten by the default ones.

Below is an example of how to display the event location together with the event text in the event box:

scheduler.attachEvent('onTemplatesReady', function () {
  scheduler.templates.event_text = function (start, end, event) {
    return `
      <div style="background:#a8d8ea; border-radius:4px; padding:4px;">
          <strong>${event.text}</strong>
          <div style="font-size:12px; color:#444;">Location: ${event.location} </div>
      </div>
  `;
  };
});

scheduler.init('scheduler_here', new Date(2019, 5, 5), 'week');

scheduler.parse([
  {
    id: 1,
    text: 'Custom Meeting',
    start_date: '2019-06-05 09:00',
    end_date: '2019-06-05 11:00',
    location: 'Room 1',
  },
]);

Mobiscroll​

You can customize many parts of the Event Calendar by writing custom templates. In the context of plain vue these templates are functions that return a string containing the html markup. You will find a comprehensive list of all the available render functions for the Event Calendar in the API templates section.

When you want to customize how the events look, depending on what your goal is, you have two options:

  • Customize the event content - Mobiscroll takes care of rendering the events in the correct order and also prints basic fields, like start/end, whether it is an allDay event or not and also takes care of coloring the event appropriately. Everything else comes from the custom template.
  • Customize the full event - Mobiscroll takes care of rendering the events in the correct order, but everything else comes form the template you write.

To define a custom template, pass a functional to the appropriate option that returns the desired html:

<script setup>
import { MbscEventcalendar } from '@mobiscroll/vue';
import '@mobiscroll/vue/dist/css/mobiscroll.min.css';

const myView = {
  timeline: {
    type: 'week',
  },
}

const myEvents = [
  {
    id: 10,
    resourceId: 'r1',
    name: 'Custom Meeting',
    start: '2017-01-01T09:00',
    end: '2017-01-01T11:00',
    duration: 2,
  },
]
</script>

<template>
  <MbscEventcalendar view="myView" :data="myEvents">
    <template #scheduleEvent="event">
      <div style="background: '#a8d8ea'; border-radius: 4px; padding: 4px;">
        <strong>{{event.name}}</strong>
        <div style="font-size: 12px; color: #444;">Duration: {{event.duration}}h</div>
      </div>
    </template>
  </MbscEventcalendar>
</template>

Feel free to explore live examples to see how event content templating work in action:

Feel free to explore live examples to see how full event templating work in action:

Resource templating​

DHTMLX​

In case of DHTMLX Scheduler - Timeline view the resources can be customized through the columns property of the timeline configuration object:

scheduler.plugins({
  timeline: true,
});

scheduler.createTimelineView({
  name: 'timeline',
  y_unit: [
    { key: 1, label: 'Adam', city: 'Washington' },
    { key: 2, label: 'Eva', city: 'New York' },
  ],
  columns: [
    {
      label: '<strong>Name</strong>',
      width: 130,
      template: function (obj) {
        return '<strong>' + obj.label + '<strong>';
      },
    },
    {
      label: '<i>City</i>',
      width: 90,
      template: function (obj) {
        return '<i>' + obj.city + '<i>';
      },
    },
  ],
});

scheduler.init('scheduler_here');

Mobiscroll​

In the case of Mobiscroll, we take a different approach. We provide various templating options (listed below), which allow you to customize the resources.

Scheduler​

Use the resource option to customize the resource template of the Scheduler. Customize how the resource headers look and what they show. Utilize properties passed in the resources array. It takes a function that should return the desired markup.

Check out how you can style the resources in this example.

Timeline​

In case of the Timeline view there are three places where you can customize the resource column:

  • Use the resource option to customize the resource template of the Timeline. Customize how the resource headers look and what they show. Utilize properties passed in the resources array.
  • Customize the empty cell content above the resource column with the resourceHeader option.
  • Or if you want to customize the empty cell content below the resource column you can achieve this with the resourceFooter option. This element only renders for the Timeline view, if the dayFooter option is present.

Check out how you can style these resource parts in this example.

<script setup>
import { MbscEventcalendar } from '@mobiscroll/vue';
import '@mobiscroll/vue/dist/css/mobiscroll.min.css';

const myView = {
  timeline: {
    type: 'week',
  },
}

const myResources = [
  { id: 1, name: 'Adam', city: 'Washington' },
  { id: 2, name: 'Eva', city: 'New York' },
]
</script>

<template>
  <MbscEventcalendar
    :view="myView"
    :resources="myResources"
  >
    <template #resourceHeader>
      <div className="my-resource-header">
        <strong>Name</strong>
      </div>
      <div className="my-resource-header">
        <i>City</i>
      </div>
    </template>
    <template #resource="resource">
      <div className="my-resource-cell">
        <strong>{{resource.name}}</strong>
      </div>
      <div className="my-resource-cell">
        <i>{{resource.city}}</i>
      </div>
    </template>
  </MbscEventcalendar>
</template>

Header templating​

DHTMLX​

In DHTMLX Scheduler, the header (the top navigation area containing the date, navigation buttons, and view tabs) is generated from a combination of HTML markup and Scheduler’s template system.

The header area corresponds to this block in your code:

<div class="dhx_cal_navline">
  <div class="dhx_cal_prev_button">&nbsp;</div>
  <div class="dhx_cal_next_button">&nbsp;</div>
  <div class="dhx_cal_today_button"></div>
  <div class="dhx_cal_date"></div>
  <div class="dhx_cal_tab" data-tab="day"></div>
  <div class="dhx_cal_tab" data-tab="week" ></div>
  <div class="dhx_cal_tab" data-tab="month"></div>
</div>

Scheduler fills these elements using built-in templates, which you can override to control what appears in the header.

Mobiscroll​

The header of the Mobiscroll calendar can be fully customized to one's needs with the use of the header option.

Here's the list of the built in components of the default header. You can initialize these by putting the attributes on the elements:

  • mbsc-calendar-prev - Previous button component, that navigates to the previous month.
  • mbsc-calendar-next - Next button component, that navigates to the next month.
  • mbsc-calendar-today - Today button component, that navigates to the current date.
  • mbsc-calendar-nav - The title navigation button component, that opens the year/month navigation.

The following example will render the prev and next buttons and a custom title.

<MbscEventcalendar>
  <template #header>
    <MbscCalendarPrev />
    <MbscCalendarNext />
    <div class="my-custom-title">{{myTitle}}</div>
  </template>
</MbscEventcalendar>

Also, feel free to explore live examples to see how header templating work in action:

Other templating/ renderer options​

Event Calendar​

  • Date header templating - There are two approaches you can take:
    • Customize the date headers of the Event Calendar with the day option by adding relevant content, labels or completely change how they look.
    • If you are looking to customize only the content and don't want to bother with the styling of the event, you can use the dayContent option.

Scheduler​

  • Date header templating - There are two approaches you can take:

    • Customize the date headers of the Scheduler with the day option by adding relevant content, labels or completely change how they look.
    • If you are looking to customize only the content and don't want to bother with the styling of the event, you can use the dayContent option.

    Check out how you can style the date header in this example.

Timeline​

  • Templating the sidebar header and footer - Besides the resource template, an additional sidebar can be rendered on the opposite end of the row and there are three approaches you can take:

    • Use the sidebar option to render a custom sidebar on the right side of the Timeline.
    • Customize the empty cell content above the sidebar column with the sidebarHeader option.
    • Or if you want to customize the empty cell content below the sidebar column you can achieve this with the sidebarFooter option.

    Check out how you can style the sidebar parts in this example.

  • Date header and footer templating - The headers hold key information like the date, day of the week and in some cases it also holds the full date. Whenever you need to show extra information, or if you would like to change the styling or date format, time format you can use the various header templates, depending on the view configuration. You can also show a footer element, for displaying more information.

    Check out how you can style the date header and footer in this example.

  • Slots - Use the slot option to customize the slot template of the Timeline view.

    Check out how you can style the slots in this example.

  • Variable event height - When using event templating, you might end up with various event heights, depending on the displayed content, e.g. larger description, list of tasks, etc. You can enable support for variable event heights by setting the eventHeight: 'variable' property for the timeline inside the view option.

    Check out how you can set and style the variable event height in this example.

Agenda​

Localization​

DHTMLX​

DHTMLX Scheduler supports scheduler's localization by providing a number of predefined locales and means of creating custom ones. By default, DHTMLX Scheduler uses English locale.

To set the desired language for the scheduler, you need to activate the necessary locale via the setLocale method of the scheduler.i18n object.

scheduler.i18n.setLocale("fr");

You can use and update any of the predefined locales that are bundled with the dhtmlxscheduler.js file or define a custom locale.

The locale can be switched dynamically but the changes will be applied only after a complete redrawing of the Scheduler either with the scheduler.render() or scheduler.init() call.

scheduler.i18n.setLocale("fr");
scheduler.init("scheduler_here");

Mobiscroll​

Mobiscroll enables localization by letting developers set language, date, and time formats both globally (across the entire application) and locally (on individual components). Highlights:

  • Global settings object lets developers set locale, theme, and format across the app (first example).
  • Each component (e.g., Date Picker, Event Calendar) supports locale switching and custom translations with simple configuration (second example).
  • RTL and calendar system support (Gregorian, Jalali, Hijri)
  • Quick override ability for localized formats ensures that adaptations can be made case-by-case or via global settings.

Example setting the locale option globally:

<script setup>
import { setOptions, localeFr } from '@mobiscroll/vue';

setOptions({
  // ...other config...
  locale: localeFr // French locale applied globally
});
</script>

Example setting the locale at the component level:

<script setup>
import { Eventcalendar, localeFr } from '@mobiscroll/vue';
import '@mobiscroll/vue/dist/css/mobiscroll.min.css';

</script>

<template>
  <Eventcalendar :locale="localeFr" />
</template>

Conclusion​

Migrating from DHTMLX Scheduler to Mobiscroll involves rethinking certain configurations, especially around views, events, and feature toggles. While DHTMLX Scheduler offers strong server-side capabilities and comprehensive export options, Mobiscroll stands out as a modern, developer-friendly, and highly adaptable calendar and scheduling solution. Its superior framework support, refined UX, accessibility readiness, and deep customization make it the better long-term choice for teams building maintainable and scalable scheduling experiences.

The overall migration process includes:

  • Adjusting initialization patterns
  • Adapting view configurations
  • Mapping resources and events to Mobiscroll’s structure
  • Enabling features like drag-and-drop manually

With a clear understanding of both libraries’ capabilities and structures, you can migrate efficiently and take full advantage of Mobiscroll’s modern UI and feature-rich environment.

Considering migrating from DHTMLX Scheduler to Mobiscroll?​

Schedule a call and let's chat about how we can help. We're here to support you in the migration process.