Wijmo 2026 v2 Has Landed

We're happy to announce Wijmo's second major release of 2026, 5.20262.60! This release includes several major features, the largest being the introduction of Wijmo's newest control, the FlexScheduler, a scheduling component that allows your users to manage calendars and schedule meetings and events. We're also happy to announce Wijmo's support for Angular 22, as well as additional accessibility improvements for the FlexGrid and OLAP controls. Read below for release details on:

• FlexScheduler Component
• Angular 22 Support
• WCAG Accessibility Updates

Ready to check it out? Download Wijmo Today!

FlexScheduler Component

We're excited to introduce FlexScheduler, a new Wijmo component for building scheduling and calendar experiences directly into JavaScript web applications. FlexScheduler is designed to display and edit time-based business data, giving developers a flexible way to build everything from appointment calendars and project schedules to room reservations, employee planning, and resource management applications. Applications provide the event data, resources, and scheduling configuration, while the FlexScheduler control handles the layout, navigation, and user interactions.

Multiple Calendar and Timeline Views

FlexScheduler includes several built-in views so users can work with schedule data at the level that best fits their workflow. Out of the box, developers can configure the following views:

• Day
• Week
• Work Week
• Month
• Timeline Day
• Timeline Week
• Timeline Month

Timed views position and size events according to their start and end times, while Month and Timeline Month provide summary-style layouts for a broader look at scheduled activity.

The built-in toolbar makes it easy to move between these views, with Previous and Next navigation, a date picker, and configurable view buttons.

For applications that need something beyond a traditional calendar, developers can also create customer SchedulerDefinition configurations that organize time and resource bindings across the Scheduler's rows and columns.

Flexible Event and Resource Management

FlexScheduler can bind directly to your application's existing event data. Developers map application properties to Scheduler fields such as start time, end time, subject, and description, so existing data models do not need to be restructured around the control.

const eventFields: wjScheduler.SchedulerEventsField = {
  subject: 'title',
  start: 'beginsAt',
  end: 'endsAt',
  description: 'notes'
}

const scheduler = new wjScheduler.FlexScheduler('#scheduler', {
  itemsSource: appointments, // the application's data
  eventFields,
  displayDate: new Date(2026, 7, 24)
})

The values assigned in the eventFields are source property names, not event values. For example, subject: 'title' tells the Scheduler to read the event subject from item.title; the original objects remain the Scheduler's source data, keeping application state and scheduling data closely connected.

Scheduling applications often need to organize more than just time, so FlexScheduler also includes a flexible resource model. Resources can represent rooms, teams, people, equipment, or other application-defined entities, allowing a schedule to be divided into meaningful resource lanes.

scheduler.definition = {
  key: 'roomDay',
  rows: { bindings: [{ type: wjScheduler.SchedulerAxisBindingType.Time, unit: wjScheduler.SchedulerTimeUnit.Hour }] },
  columns: { bindings: [{ type: wjScheduler.SchedulerAxisBindingType.Resource, fieldExpr: 'roomId' }] },
  cellSemantic: wjScheduler.SchedulerCellSemantic.Timed,
};

Applications can configure multiple resource dimensions, associate colors with resources, and assign events to one or more resource values.

Built-In Event Editing and Drag-and-Drop

FlexScheduler includes built-in interactions for common scheduling workflows. Users can create events from empty schedule cells, edit existing events, and delete events through the built-in event editor. Developers can validate changes before committing them and respond to accepted changes to synchronize them with a server or application service layer.

Events can also be moved and resized directly within the Scheduler. Users can drag an event to another time or resource lane, or resize its edges to update its duration. FlexScheduler keeps the source item unchanged while the interaction is taking place and commits the candidate change only after the operation completes, allowing applications to validate the update before it becomes part of the schedule.

Conflict Detection for Scheduling Rules

For applications where availability matters, FlexScheduler provides built-in conflict detection. The control can identify overlapping events as well as events that intersect configured non-working time. Conflict detection is informational by default, so applications can choose whether to simply display or log conflicts, notify the user, or reject the proposed scheduling change entirely.

scheduler.conflictChecked.addHandler((_sender, args) => {
  const conflicts = args.result?.conflicts ?? [];
  if (conflicts.length > 0) {
    showConflictWarning(conflicts);
    args.cancel = true;
  }
});

This makes it easier to layer application-specific business rules on top of common scheduling operations, such as preventing two meetings from occupying the same room or stopping an appointment from being scheduled outside the configured working hours.

Customize the Scheduling Experience

Like other Wijmo controls, FlexScheduler offers several ways to adapt the UI to your application's needs. Event templates allow developers to control the content displayed in each event, enabling the inclusion of additional information such as locations, resource details, status indicators, or conflict information while leaving the underlying source data unchanged.

FlexScheduler also includes context menus for cells and events, with built-in commands for common actions such as adding, editing, deleting, and navigating to the current date. These menus can be replaced or extended with application-specific commands, giving developers another way to integrate scheduling operations into their existing workflows.

Time Zone-Aware Scheduling and Data Operations

FlexScheduler is also designed for applications whose schedules span regions and time zones. Developers can configure an IANA time zone for displaying and editing events, with the FlexScheduler handling how existing event times are presented when that time zone changes.

const scheduler = new wjScheduler.FlexScheduler('#scheduler', {
  itemsSource,
  displayDate: new Date('2026-05-06T01:00:00Z'),
  timeZone: 'Asia/Shanghai',
});

The control also accounts for daylight saving time transitions when converting user-entered local times.

For managing larger or more dynamic datasets, applications can query events by date and resource, using Wijmo's CollectionView filtering to control which events are displayed, and refresh the Scheduler as local or server-side data changes.

const visibleEvents = scheduler.getEvents(
  new Date(2026, 7, 24),
  new Date(2026, 7, 25),
  [{ fieldExpr: 'roomId', value: 'room-a' }],
);

With its built-in calendar views, flexible resource scheduling, event editing, drag-and-drop interactions, conflict detection, templates, time zone support, and customizable layouts, FlexScheduler provides developers with a powerful new foundation for adding scheduling functionality to modern enterprise JavaScript applications. You can learn more about the new FlexScheduler component by heading over to our documentation and demos pages.

Angular 22 Support

We are happy to announce that Wijmo fully supports Angular 22. We have a long tradition of support for Angular, including powerful markup features such as Cell Templates in FlexGrid. We believe Wijmo offers the most powerful set of Angular components and the best Angular DataGrid in the market.

To get started using Wijmo in Angular, follow our Angular QuickStart guide!

WCAG Accessibility Updates

During the last major Wijmo release, we announced that we had completed our updates to achieve WCAG 2.2 compliance, but accessibility is not a one-time effort. Our team remains committed to improving and maintaining accessibility among Wijmo's controls, and we've continued to make further accessibility improvements.

FlexGrid ColumnPicker

An issue we've had reported to us is that FlexGrid's ColumnPicker reads the incorrect column number, instead reading the column property's index in the item array. 

Previously, screen readers would read the Product Id column as 'Column Eight,' even though it is the fifth column displayed in the FlexGrid control. Now, screen readers will properly read out this column as 'Column Five.'

OLAP Accessibility Improvements

OLAP PivotGrid

The PivotGrid control has received three accessibility updates in this release. The first is a compliance change to icon target sizes in the PivotGrid control.

The glyphs within the PivotGrid control now have the appropriate spacing around the icon.

The second is improvements to non-text contrast, making non-text elements stand out more against the backdrop of the displayed data.

Finally, there have been additional keyboard shortcuts added, which you can review in the table below:

OLAP PivotPanel

Like the PivotGrid control, the PivotPanel has had several accessibility updates added in this release. The first, similar to PivotGrid, is the sizing changes for icons and buttons in the PivotPanel.

These now provide the proper spacing as per WCAG compliance standards.

The panel is now more readable for screen readers and has also been improved to make it easier to navigate the elements via keyboard and keyboard shortcuts.

Ready to try it out? Download Wijmo Today!

Please Migrate npm References to @mescius Scope

As a reminder, our new releases have now been published to the @mescius scope on npm. To access the latest code, you should migrate to the new @mescius scoped packages from the old @grapecity scope.

The table below includes examples of some new packages and their old equivalents:

As you can see, this is a direct migration. You will need to update the package.json references and the import statement. The best way to update your applications is to use a Find and Replace tool (like the one in VS Code), locate instances of "@grapecity/", and replace them with "@mescius/". This will cover the package.json and import statements.