Vue Common - Utils - utils

An object that serves as a namespace for utility methods that can be helpful when working with DevExtreme components.

cancelAnimationFrame(requestID)

Cancels an animation frame request scheduled with the requestAnimationFrame method.

import { cancelAnimationFrame } from "devextreme/common/core/animation"
Parameters:
requestID:

Number

The identifier returned by requestAnimationFrame method.

This method acts as a normalization of the standard cancelAnimationFrame method of the window object.

JavaScript
window.cancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.mozCancelAnimationFrame ||
window.oCancelAnimationFrame ||
window.msCancelAnimationFrame

If the API in the code above is not supported, the DevExpress.utils.cancelAnimationFrame(requestID) method clears a timer set with the requestAnimationFrame method.

getTimeZones(date)

Gets the list of IANA time zone objects.

import { getTimeZones } from "devextreme/common/core/environment"
Parameters:
date:

Date

| undefined

A date for which to get time zone objects. If not passed, the current date is used.

Return Value:

Array<SchedulerTimeZone>

A list of IANA time zone objects.

This method can accept a specific date to get the list of time zone objects for that date. This is useful because these objects can be removed or added, and time zone offsets can change, for example, due to daylight savings.

The following code illustrates how to use this method:

jQuery
index.js
const timeZones = DevExpress.utils.getTimeZones(new Date(2020, 6, 21));
// ===== or when using modules =====
import { getTimeZones } from 'devextreme/time_zone_utils';
const timeZones = getTimeZones(new Date(2020, 6, 21));
// The timeZones constant contains the following array:
// [
//      { offset: 2, title: "(GMT +02:00) Europe/Berlin", id: "Europe/Berlin" },
//      { offset: 2, title: "(GMT +02:00) Europe/Amsterdam", id: "Europe/Amsterdam" }
//      ...
// ]
Angular
app.component.ts
import { getTimeZones } from 'devextreme/time_zone_utils';
const timeZones = getTimeZones(new Date(2020, 6, 21));
// The timeZones constant contains the following array:
// [
//      { offset: 2, title: "(GMT +02:00) Europe/Berlin", id: "Europe/Berlin" },
//      { offset: 2, title: "(GMT +02:00) Europe/Amsterdam", id: "Europe/Amsterdam" }
//      ...
// ]
Vue
App.vue
import { getTimeZones } from 'devextreme/time_zone_utils';
const timeZones = getTimeZones(new Date(2020, 6, 21));
// The timeZones constant contains the following array:
// [
//      { offset: 2, title: "(GMT +02:00) Europe/Berlin", id: "Europe/Berlin" },
//      { offset: 2, title: "(GMT +02:00) Europe/Amsterdam", id: "Europe/Amsterdam" }
//      ...
// ]
React
App.js
import { getTimeZones } from 'devextreme/time_zone_utils';
const timeZones = getTimeZones(new Date(2020, 6, 21));
// The timeZones constant contains the following array:
// [
//      { offset: 2, title: "(GMT +02:00) Europe/Berlin", id: "Europe/Berlin" },
//      { offset: 2, title: "(GMT +02:00) Europe/Amsterdam", id: "Europe/Amsterdam" }
//      ...
// ]

View Demo

initMobileViewport(options)

Sets parameters for the viewport meta tag. Takes effect for mobile applications only.

import { initMobileViewport } from "devextreme/common/core/environment"
Parameters:
options:

Object

Gesture configuration for a mobile browser's viewport.

Object structure:
Name Type Description
allowPan

Boolean

Specifies whether to enable panning on the vertical and horizontal axes.
allowSelection

Boolean

Specifies whether to enable selection.
allowZoom

Boolean

Specifies whether to enable pinch-zooming.

requestAnimationFrame(callback)

Makes the browser call a function to update animation before the next repaint.

import { requestAnimationFrame } from "devextreme/common/core/animation"
Parameters:
callback:

Function

The function.

Return Value:

Number

The current request's ID.

This method acts as a normalization of the standard requestAnimationFrame method of the window object:

JavaScript
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame

If the API in the code above is not supported, the DevExpress.utils.requestAnimationFrame(callback) method calls the function passed as a parameter after an internally set timeout.