Using MindFusion JavaScript Components With WordPress Elementor Plugin

In this blog post we will describe the steps that are necessary to follow if you want to use MindFusion JavaScript library with WordPress Elementor plugin.

This guide assumes you are familiar with Elementor. For clarity we will show you how to show the JavaScript Scheduler from the “First Schedule” sample. The steps can be repeated for any MindFusion JavaScript library.

I. Add HTML Tag

The Js Scheduler requires an element to be associated with. We create an HTML Elementor widget in the place of the web page where we want the schedule to appear. Then we write in it the HTML code that creates the calendar div:

Elementor HTML Widget

Use the <HTML> widget of Elementor to insert code for the <div> element required by MindFusion JS Scheduler

II. Copy the JavaScript and CSS Files

The First Schedule sample requires reference to two JavaScript files and a CSS file with the calendar theme.

We copy the theme we will use in a new folder called “calendar-themes” into the directory of your WordPress website. This folder should be located in the subfolder that has the name of the WordPress theme you are using. This subfolder is located in the wp/content/themes/ directory. The path should be:


Instead of “calendar-themes” you can use any other name for your folder.

Next, copy the MindFusion.Scheduling.js and FirstSchedule.js files in a new folder called “js”, which is located at the same place where the calendar-themes folder is placed. The path should be:


WordPress directory structure

The directory structure of a WordPress blog with the newly created “js” and “calendar-themes” folders.

III. Get a Header/Footer WordPress Plugin.

Here is a list of the available options:

For the purpose of this tutorial we installed “Insert Headers and Footers” but any other plugin will do. After you install the chosen plugin add the reference to the scheduler themes and the JavaScript files according to the instructions of the plugin provider. In our case we did this from the WordPress Dashboard > Settings > Insert Headers and Footers menu.

There we placed in the “Scripts in Header” text box:

 	<link href="" rel="stylesheet">

And in the “Scripts in Footer” textbox:

<script src="" type="text/javascript"></script>
<script src="" type="text/javascript"></script>

On our test blog we use the twentyseventeen theme. That’s how the Header/Footer settings look like:

Header/Footer settings

The header references the CSS theme of the calendar, the footer adds references to the required JavaScript files.

You can check the live page on:

Learn more about MindFusion JavaScript components at:

For technical questions please use the MindFusion discussion board:

Custom Diagram Nodes With Clipped Images

In this blog post we will create an org chart diagram that uses custom nodes for each employee. The diagram will be created with the Diagramming for JavaScript library. For the nodes we use the CompositeNode class, which enables us to create diagram nodes whose appearance can be defined via composition of components and layout containers.

Click on the image below to run the sample:

Custom Composite Nodes with Clipped Images

I. References and HTML Settings

The first thing that we’ll do is create a web page for the sample and add the references to the necessary JavaScript files. In the section of the page we provide a reference to the following jQuery files:

<a href="http://common/jquery.min.js">http://common/jquery.min.js</a>
<a href="http://common/jquery-ui.min.js">http://common/jquery-ui.min.js</a>

At the end of the HTML page, just before the closing tag we place references to the two JavaScript files used by the Diagramming library:

<a href="http://MindFusion.Common.js">http://MindFusion.Common.js</a>
<a href="http://MindFusion.Diagramming.js">http://MindFusion.Diagramming.js</a>

Our sample has its JS code in a separate file called Script.js. We place a reference to it as well:

<a href="http://Script.js">http://Script.js</a>

The diagram library needs an HTML Canvas to draw itself onto. We add one in the middle of the web page:

<div style="width: 100%; height: 100%; overflow: auto;">
	<canvas id="diagram" width="2100" height="2100">
		This page requires a browser that supports HTML 5 Canvas element.

II. The OrgChartNode

In the Script.js file we first add mappings to some enums and classes that we’ll use from the diagram library:

var Diagram = MindFusion.Diagramming.Diagram;
var CompositeNode = MindFusion.Diagramming.CompositeNode;
var Behavior = MindFusion.Diagramming.Behavior;

var Alignment = MindFusion.Drawing.Alignment;
var Rect = MindFusion.Drawing.Rect;

Now we call the classFromTemplate method of CompositeNode that generates a node class using a JSON template that we’ll provide:

var OrgChartNode = CompositeNode.classFromTemplate("OrgChartNode",
component: "GridPanel",
rowDefinitions: ["*"],
columnDefinitions: ["22", "*"],

In this code we indicate the panel that will be used by the CompositeNode is a GridPanel. Then we declare two lists that set the width and height of the grid rows and columns. The number of members in each array indicate how many rows/columns the grid has. In our case we have one row that takes all place and two columns: one is with fixed with of 22 pixels, the other takes the rest of the available space.

The JSON definition of the CompositeNode continues with an array with the children:

component: "Rect",
name: "Background",
pen: "black",
brush: "white",
columnSpan: 2
component: "Image",
name: "Image",
autoProperty: true,
location: "ceo.png",
margin: "1",
imageAlign: "Fit"

The first child uses a Rect component that we call “Background”. It is rendered with a white brush, has a black outline and spans on two columns e.g. it fills all available space or each node.

The second child is an image. Note the row:

autoProperty: true

That means that we want to be able to access this component as a property. In such cases the library generates automatic set/get methods using the name of the component. In our sample they will be setImage / getImage.

The third child is a StackPanel component. This is the container for the text labels next to the node. This child has its own collection of children nodes:

component: "StackPanel",
orientation: "Vertical",
gridColumn: 1,
margin: "1",
verticalAlignment: "Near",
component: "Text",
name: "Title",
autoProperty: true,
text: "title",
font: "Arial bold"
component: "Text",
name: "FullName",
autoProperty: true,
text: "full name",
pen: "blue",
padding: "1,0,1,0"
component: "Text",
name: "Details",
autoProperty: true,
text: "details",
font: "Arial 3"

The children of this new StackPanel are text components, which are called Title, FullName and Details. They have their autoProperty set to true, which means we can access their value through automatic setter and getter methods.

III. The Diagram and the Nodes

in the read() function of the document we create an instance of the Diagram class using a reference to the canvas we’ve created in section I.

// create a Diagram component that wraps the "diagram" canvas
diagram = Diagram.create($("#diagram")[0]);

Then we enable interactive drawing of custom nodes by calling setCustomNodeType and Then we enable interactive drawing of custom nodes by calling setCustomNodeType and setBehavior:

// enable drawing of custom nodes interactively

The behavior o the diagram is set to Custom, which means that when the user starts drawing nodes the library shall draw nodes specified by CustomNodeType. The setCustomNodeType method tells the diagram that these custom nodes are of type OrgChartNode.

Now it is really easy and intuitive to create nodes:

var node1 = new OrgChartNode(diagram);
node1.setBounds(new Rect(25, 15, 60, 25));
node1.setFullName("John Smith");
"Our beloved leader. \r\n" +
"The CEO of this great corporation.");

We create a few more nodes using the same code and we bind them in a hierarchy. The links among the nodes are created by calling the Diagram Factory createDiagramLink method of the diagram Factory class:

diagram.getFactory().createDiagramLink(node1, node2);
diagram.getFactory().createDiagramLink(node1, node3);
diagram.getFactory().createDiagramLink(node1, node4);
diagram.getFactory().createDiagramLink(node4, node5);

IV. Rounded Images

We want to add now a custom feature to the node – instead of drawing the image as a rectangle we want to clip it and show it as an ellipse. We’ll do this by using a method that replaces the standard setImage method.

The new method is called createImageClip and takes as parameters two objects: one is the image URL and the other is the node that uses this image.

function createImageClip(path, node)
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
img = document.createElement('img');

We create two HTMLElements – canvas and image, and we get the 2D context of the Canvas. Then, in an event handler of the onload event of the image we clip the canvas to an area defined by a Path. The path reads the size of the image and creates a full arc e.g. a circle inside that rectangle. Then the context draws the image and the new canvas is set as an image to the node using the setImage method:

img.src = path;
img.onload = function ()
canvas.width = img.width;
canvas.height = img.height;
var halfSize = img.width / 2;;
ctx.arc(halfSize, halfSize, halfSize, 0, Math.PI * 2, true);

ctx.drawImage(img, 0, 0, img.width, img.height);


You can use this approach to create clippings of images with variable shape.

Now instead of calling:


we call our custom method this way:

createImageClip("ceo.png", node1);

We do this for all nodes in the org chart.

That’s the end of this tutorial. You can download the sample together with all JavaScript libraries used from this link:

Custom Nodes With Image Clipping in JavaScript: Sample Download

Find out more about Diagramming for JavaScript at

Interactive Event Timetable in JavaScript

This blog post describes the main steps on how to create a schedule table, which shows the allocation of college rooms to different courses. Users can filter the courses by lecturer(s).

I. Initial Setup

We start by copying the JavaScript scheduler files that we’ll use in the directory of our project. These are:

  • MindFusion.Scheduling.js – represents the Js Scheduler library
  • MindFusion.Scheduling-vsdoc.js – provides Intellisense support
    standard.css – in a subdirectory “themes”, this is the CSS theme styling of the resource table
  • planner_lic.txt – paste your license key here to disable the trial version label.

We create then 2 more files specifically for our application:

  • ResourceView.html – the web page of the application
  • ResourceView.js – the JavaScript code that implements the dynamic features of our application.

II. The HTML Page

In the head section of our web page we first create a reference to the theme file:

 	 	<link rel="stylesheet" type="text/css" href="themes/standard.css">

At the end of the web page, just before the closing </body> tag we add a reference to the Scheduling.js file that contains the scheduling features and the ResourceView.js files that we’ll write for the application:

<script src="MindFusion.Scheduling.js" type="text/javascript"></script>
<script src="ResourceView.js" type="text/javascript"></script>

The calendar library requires an HTML <div> element, which is used to render it. We add one:

<div id="calendar" style="height: 100%; width: 100%;"></div>

It is important that you add an id to this <div> because we need to reference it in the JS code behind file.

III. Basic JavaScript Settings

At the top of the JavaScript code-behind file we add a reference to the Intellisense file. We also create a mapping to MindFusion.Scheduling namespace:

/// <reference path="MindFusion.Scheduling-vsdoc.js"></reference>
var p = MindFusion.Scheduling

Then we create the calendar object. We need a reference to the <div> element that will render it:

// create a new instance of the calendar
calendar = new p.Calendar(document.getElementById("calendar"));

For this sample we will use the ResourceView The currentView property specifies that. In addition, we set the count of visible cells in the calendar to 7. That is done through the resourceViewSettings property of the calendar

// set the view to ResourceView, which displays the distribution of resources over a period of time
calendar.currentView = p.CalendarView.ResourceView;

// set the number of visible cells to 7
calendar.resourceViewSettings.visibleCells = 7;

The itemSettings proeprty lets us customize the items in the schedule We use titleFormat and tooltipFormat to specify how the title and tooltip of each item will be rendered. Both properties use special format strings:

  • %s – the start date will be rendered
  • %e – the end date of the item will be rendered
  • %d – the details of the item will be rendered.

You can specify the way dates and time are formatted by adding the desired format in brackets:

// show hours on items
calendar.itemSettings.titleFormat = "%s[HH:mm] - %e[HH:mm] %h";
calendar.itemSettings.tooltipFormat = "%d";

Then we set the theme of the calendar to standard, whose css file we referenced in the web page:

calendar.theme = "standard";

and we make one more adjustment – the name of contacts will be taken from the last name of the person. Possible valies are “F”, “M” and “L” – for first, middle and last name.

calendar.contactNameFormat = "L";

IV. Resources

When the calendar initially loads there are several contacts and locations available. The objects that represent them are instances of the Contact and Location classes. After we create them we add them to the contacts and locations collections of the calendar schedule.

var resource;

// Add professor names to the schedule.contacts collection.
resource = new p.Contact();
resource.firstName = "Prof. William";
resource.lastName = "Dyer";

resource = new p.Location(); = "Room D";

Now, when the user creates a new course they will see the Contact and Location in the Options pane of the “Create Item” form:

V. Items

The items are instances of the Item class. They represent the classes of the different lecturers. We use the startTime and endTime properties of Item to specify when the class takes place. The subject property gives the name of the class:

//always start with the current date
var date =;

item = new p.Item();
item.startTime = p.DateTime.addHours(date.addDays(1), 14);
item.endTime = p.DateTime.addHours(item.startTime, 1);
item.subject = "Classical Mechanics";

We use the location and contacts properties to set where the lecture takes place and who teaches it. Note that the contacts property is of type collection and we can assign several lecturers to one class:

item.location = calendar.schedule.locations.items()[0];

We get the location and the contact from the schedule’s lists with locations and contacts We must also set the details of the item – they will be rendered as a tooltip, if you remember. We want the tooltip to show the two names of the lecturer and the location. Here is how we must define it:

item.details = item.contacts.items()[0].firstName + " " +
item.contacts.items()[0].lastName + " - " +;

We must add the item to the items collection of the schedule we render the calendar render the calendar


VI. Events

When users create new items we must set their details to tell the name and the location of the new class. We handle the itemCreating event to do this:

// attach handler - creating an item

function handleItemCreating(sender, args) {
    handleItemModified(sender, args);
    if (args.item.contacts.count() &gt; 0) {
        //the details field is used by the tooltip
        args.item.details = args.item.contacts.items()[0].firstName + " " +

        if (args.item.location != null)
            args.item.details += " - " +;


The itemCreating event provides an instance of the ItemModifyingEventArgs class as a second argument to the handler method. There we use the item property that tells us which item is being modified. We then take the desired contact and Location information from the contacts and location properties of the item.

When a new course item is dragged to another location we must change its color accordingly. We do this by handling the itemModified event.

// attach handler - modifying an item

The diferent background color of the items is achieved by custom CSS classes. We use the cssClass property of the Item class. The CSS styles are defined in the <HEAD> section of the web page:

 .mfp-planner.standard .itemClass1 .mfp-item {
            background-color: 	#0c71af;

.mfp-planner.standard .itemClass2 .mfp-item {
            background-color: #f81e1e;

The handler method checks the new location and assigns the appropriate CSS style:

function handleItemModified(sender, args)
    // you don't have to check any other conditions like dragging to another room, 
    // as it will stay the same color if you make other changes (other than dragging to a different room)
    if (args.item != null){
        switch ( {
            case "Room A":  //we can also implement it with for
                args.item.cssClass = 'itemClass1';
            case "Room B":
                args.item.cssClass = 'itemClass2';
            case "Room C":
                args.item.cssClass = 'itemClass3';
            case "Room D":
                args.item.cssClass = 'itemClass1';
            case "Room E":
                args.item.cssClass = 'itemClass2';
            case "Room F":
                args.item.cssClass = 'itemClass3';
                args.item.cssClass = 'itemClass1';

The item property of the args parameter of the handler method provides access to the item that was modified.

VII. Filtering Professors

We want to add one last feature to our application. We want the user to be able to render courses only by a given professor.

We first add checkboxes with the names of the lecturers. Each checkbox has the same handler method for the click event:

<input id="dyer" checked="checked" name="subscribe" type="checkbox" value="Dyer>
<label for=">Prof. William Dyer

<input id="fletcher" checked="checked" name="subscribe" type="checkbox" value="Fletcher">
<label for="fletcher">Prof. Ann Fletcher</label>

The handler method needs to look at two cases. The first case is when the class is taught by a single professor. In this case we cycle through all items and make the item visible or not depending on whether the check box with the name of the professor is checked:

// if there is at least one present professor from the lecture professors, the lecture will not disappear
function handleClick(cb) {
for (var i = 0; i &lt; calendar.schedule.items.count(); i++) {
        var item = calendar.schedule.items.items()[i]; //we iterate through every element
        if (item.contacts.count() == 1) {
            if (item.contacts.items()[0].lastName == cb.value)
                item.visible = cb.checked;

In the second case we look at courses that are taught by more than one lecturer. In this case we show the item if the checkbox with the name of at least one of the lecturers is selected:

else if (item.contacts.count() &gt; 1) {
for (var j = 0; j &lt; item.contacts.count() ; j++) {
                if (item.contacts.items()[j].lastName == cb.value) { // the checked/unchecked professor is in the contacts of this item
                    if (cb.checked == true) item.visible = true; // if there is a check, the item must be visible
                    else { // if there is no check, we see if there is at least one professor in the list of contacts of the item
                        item.visible = professorPresent(item);


Finally we repaint the calendar:

// repaint the calendar

Here the professorPresent method checks if at least one of the check boxes with professors that are present as lecturers in the item that we provide as argument are selected:

// return true if even 1 professor from the item's contacts is present, false otherwise
function professorPresent(item) {
    for (var j = 0; j &lt; item.contacts.count() ; j++) {
        var checkBoxId = item.contacts.items()[j].lastName.toLowerCase();
        var checkBox = document.getElementById(checkBoxId);
        if (checkBox!= null &amp;&amp; checkBox.checked == true) {
            return true;
    return false;

And that’s the end of this blog post. Here is a link to download the complete source code of this application:

Download The Sample Resource View Application

About MindFusion JavaScript Scheduler: MindFusion Js Scheduler is the complete solution for all applications that need to render interactive timetables, event schedules or appointment calendars. Fully responsive, highly customizable and easy to integrate, you can quickly program the JavaScript scheduling library according to your needs. Find out more at

Negative Bar Stack in WinForms

Thia post will demonstrate how to create a horizontal stacked bar chart with negative values. We will use the Charting for WinForms component and the final chart looks like this:

Negative Stacked Bar Chart in WinForms with the Chart Control

Negative Stacked Bar Chart in WinForms with the Chart Control

I. Data

The chart will use four series. The first two series are the ones that you clearly see – the red and blue one. We initialize two data arrays with random values that represent the data:

var firstBarX = new List<double>(11);
var secondBarX = new List<double>(11);

Random r = new Random();
for(int i = 0; i < 11; i++)
       firstBarX.Add(2.2 + r.NextDouble());
       secondBarX.Add(2.4 + r.NextDouble());

We need a list with data values that are exactly the same as the first series, but are negative. They will provide a transparent initial series, whose bars will offset the first, red, series as much as the value of the red bar should be:

//generate data for the transparent series
var transparentBarX = new List<double>(firstBarX.Count);

for (var i = 0; i < firstBarX.Count; i++)			
    transparentBarX.Add(0 - firstBarX[i]);

The data for the Y-axis is very simple. We just need a list with the numbers from 1 to 12:

//data for the Y-axis
var barY = new List<double>();
for (int i = 1; i < 12; i++)			

II. Labels
We will create two lists with the labels that we will show – for the two axis. The labels for the Y-axis will be used as tooltips as well. We just initialize two string lists:

//initialize labels for the X axis
var ageLabels = new List<string>() { "0-5", "6-11", "12-17", "18-23", "24-29", "30-35",
		   "36-41", "42-47", "48-53", "54-59", "60-65" };

//initialize labels for the Y axis.
var percentageLabels = new List<string> { "5%", "4%", "3%", "2%", "1%", "0%", 				"1%", "2%", "3%", "4%", "5%", };

We will use this label lists in the next section, when we create the series.

III. Series

We will use 4 series, of type Series2D. This series is useful for its SupportedLabels property – it allows us to specify what the labels of the series would be used for. We start with the transparent series. Its labels will be used for custom labels at the Y-axis:

var seriesTransparent = new MindFusion.Charting.Series2D(transparentBarX, barY, ageLabels);
seriesTransparent.SupportedLabels = MindFusion.Charting.LabelKinds.YAxisLabel;
seriesTransparent.Title = "";

We use for X-data the negative values you remember from the previous paragraph. The age labels are those that provide the data for the axis.

Then we initialize the two series for the chart data:

var seriesFirst = new MindFusion.Charting.Series2D(firstBarX, barY, ageLabels);
seriesFirst.SupportedLabels = MindFusion.Charting.LabelKinds.ToolTip;
seriesFirst.Title = "Female";

var seriesSecond = new MindFusion.Charting.Series2D(secondBarX, barY, ageLabels);
seriesSecond.SupportedLabels = MindFusion.Charting.LabelKinds.ToolTip;
seriesSecond.Title = "Male";

The last series that we create is just to provide data for the X-axis and we set its SupportedLabels property to MindFusion.Charting.LabelKinds.XAxisLabel. The X-data for this series corresponds to the coordinates of the X-labels, that’s why set the numbers from -5 to 5 as X-data:

var firstParamList = new List<double>();
      for (int i = -5; i < 6; i++)			

The Y-data could be all zeros, we won’t use them anyway.

var secondParamList = new List<double>();
    for (int i = 0; i < 12; i++)			

And we create the series this way:

//the purpose of this series is to only supply the Xaxis labels, it is transparent.	
var seriesThird = new MindFusion.Charting.Series2D(firstParamList, secondParamList, percentageLabels);           	
seriesThird.SupportedLabels = MindFusion.Charting.LabelKinds.XAxisLabel;
seriesThird.Title = "";

After you have created all series, you should add them to the Series collection of the BarChart:

barChart.Series = new ObservableCollection<Series>
	{ seriesTransparent, seriesFirst, seriesSecond, seriesThird };

IV. Axes and Grid

We need to fix the divisions of the X-axis if we want to show a grid and the grid to be neatly aligned with the axes. We will set the min value to be -6, the interval 1 and the max value to be 6:

barChart.XAxis.Interval = 1;
barChart.XAxis.MinValue = -6;
barChart.XAxis.MaxValue = 6;		

We will use three more properties to hide the interval labels at both axes, show ticks on them and set a title for each axis:

barChart.XAxis.Title = "Percentage of the Population";
barChart.YAxis.Title = "Ages";
barChart.ShowYCoordinates = false;
barChart.ShowXCoordinates = false;

barChart.ShowXTicks = true;
barChart.ShowYTicks = true;

Finally, we have to set the grid and specify that the bars are horizontal:

barChart.GridType = GridType.Vertical;
barChart.HorizontalBars = true;

V. Styling

Styling the chart is done though the SeriesSyle property of the Plot. You can assign to it different series types, you can check the list at the ISeriesStyle interface page in the documentation:

barChart.Plot.SeriesStyle = new PerSeriesStyle()
	Strokes = new List<MindFusion.Drawing.Brush> {
		firstBrush, new SolidBrush(Color.FromArgb(179, 0, 0)), 
                new SolidBrush(Color.FromArgb(0, 0, 102)), firstBrush
		StrokeThicknesses = new List<double> {
		Fills = new List<MindFusion.Drawing.Brush>()
			firstBrush, secondBrush, thirdBrush, firstBrush

This style indicates that each brush from its collection will be used for one series in the chart. We assign to it 4 brushes and 4 strokes. The first brush is transparent, the second one is red, the other is blue and the last one is black – we won’t draw with it anyway.

The Theme property of the chart holds a lot of options for customizing the appearance. Here are just a few of them:

barChart.Theme.LegendBorderStrokeThickness = 1;
barChart.Theme.LegendBorderStroke = new SolidBrush(Color.Black);
barChart.Theme.GridColor2 = Color.White;
barChart.Theme.GridColor1 = Color.FromArgb(250, 250, 250);
barChart.Theme.GridLineColor = Color.FromArgb(153, 153, 153);
barChart.Theme.PlotBackground = new SolidBrush(Color.FloralWhite);

And that’s the end of this step-by-step guide. You can download the sample together will all necessary libraries from this link:

Download Negative Stack Bar Chart in CS Sample

About MindFusion Charting for WinForms: A versatile dashboard component that provides your WinForms application with the ability to create fascinating charts, interactive dashboards and practical gauges. The component combines a flexible API that allows custom combination of chart components to build any type of chart you want. You can add as many axes of any type you want, combine various chart series into a single chart with different data providers each. The control also supports pan and zoom, scroll, unlimited number of legends, grid and a dashboard panel. Linear and oval gauges complete the tool set and guarantee every feature you might need to build the perfect gauge, chart of any type or dashboard in WinForms is right at your fingertips. Learn more at

A JavaScript Keyboard With Special Language Symbols That Appears When The User Starts Typing

This blog post will demonstrate how to create a keyboard that renders only when the user starts typing in a text box. When the user clicks outside the text box, the virtual keyboard disappears. There is another extra – a selection of languages to the right. When a language is selected, the keyboard renders only the special symbols from the selected language.

You can test the JS Hidden Keyboard sample online from this link.

The application uses MindFusion Virtual Keyboard for JavaScript. Here is a screenshot of the application:

Invisible keyboard in JavaScript

Virtual keyboard in JavaScript that renders only when the user starts typing. The keyboard renders special symbols for several languages.

I. The Keyboards for Spanish, German and French

The three keyboard layouts with special symbols for the three languages are created with the Virtual Keyboard Layout Creator tool, that is packed with the JavaScript Keyboard library. We create a new compact keyboard and delete most of the keys. We type the desired key as character for the rest and use the Properties tab to set the size of the keyboard, as well the layout and the key alignment. Finally, we export the new keyboard layout as a json file (File → Export JavaScript. It is a good idea to save the keyboard layout as xml as well (File → Save As). This way you can load the keyboard gain, when you need to create another layout based on it or correct this one.

We have created now three json files:

  • french-symbols.js
  • german-symbols.js
  • spanish-symbols.js

Let’s look at the contents of one of the json files:

var layoutDef =
	width: 565,
	height: 115,
[	{	
		code: 162,
		type: "regular",
		content: "ù",
		left: 9,
		top: 10,
		width: 40,
		height: 40
		code: 162,
		type: "regular",
		content: "û",
		left: 56,
		top: 10,
		width: 40,
		height: 40
		code: 162,
		type: "regular",
		content: "œ",
		left: 507,
		top: 58,
		width: 40,
		height: 40

Each file contains an array named “numpadDef”. We need to change the name, because we will load each list when a certain language is selected, which means we must be able to differentiate among the languages. We rename the lists to layoutDefFr, layoutDefDe and layoutDefEs.

Here is what the Virtual Keyboard Layout Creator Tool looks like:

Keyboard layout creator tool

The virtual keyboard layout creator tool that is part of the JavaScript Keyboard library by MindFusion

II. The HTML Web Page

We create a simple web page, where we add a reference to the JavaScript file of the Virtual Keyboard library:

<a href="http://Keyboard.js">http://Keyboard.js</a>

Note that we place this reference at the end of the file, after the closing tag. The we need reference to the JavaScript files with the definitions of the virtual keyboards that we created in step I.

<script src="french-symbols.js" type="text/javascript"></script>
<script src="spanish-symbols.js" type="text/javascript"></script>
<script src="german-symbols.js" type="text/javascript"></script>

Finally, we add a reference to a JavaScript file that will hold the code for our sample. It will be empty for now.

<script src="HiddenKeyboard.js" type="text/javascript"></script>

The next step is to load the CSS file with the styling for the JS keyboard. We have chosen the Silver theme, you can choose whichever theme you want or create a custom one.

<link href="css/VirtualKeyboard.Silver.css" rel="Stylesheet" />

We have added also a reference to a a stylesheet that aligns correctly the

elements with the keyboard, the text area and the select list.

<link href="style.css" rel="Stylesheet">

It contains code purely to align correctly the elements and we will not examine its contents.

Now, let’s create the text area:

<form id="f1">
<textarea id="text" rows="15" cols="55"></textarea>

We create a form, called f1 and there we create the HTML textarea element. It handles to events: onfocus and onblur.

Next, the form contains a select with the three languages, whose keyboards with special symbols we have prepared:

<select id="selectedLang" size="3">
<option value="Fr">French</option>
<option value="De">German</option>
<option value="Es">Spanish</option>


Outside the form, we place a dive with the keyboard:

<div id="keyboard" style="width: 565px;height: 115px" />

The virtual keyboard will be rendered with fixed size and by default is not rendered e.g. it’s display is set to “none”.

III. The JavaScript Code-Behind File

First, we add two namespace mappings:

var VirtualKeyboard = MindFusion.VirtualKeyboard;
var KeyboardLayout = MindFusion.KeyboardLayout;

Then we handle the DOMContentLoaded event to create the Virtual Keyboard object. We use the div element that represents the keyboard as a parameter to the VirtualKeyboard constructor. We have provided the div element with an id in the HTML page.

We also set the selected index of the elements in the language list to -1 e.g. by default no language is selected and the keyboard will show the standard English typing keyboard.

document.addEventListener("DOMContentLoaded", function (event)
	document.getElementById("selectedLang").selectedIndex = -1;
	var vk = VirtualKeyboard.create(



Then we handle changes in the selection of the language:


f1.selectedLang.onchange = function (event)
	switch ( {
  case 'Fr':
  case 'De':
  case 'Es':

When the user chooses one of our custom layouts we create a keyboard layout with the appropriate layoutDef object.

Next we handle the onfocus and onblur events with the methods showKeyboard() and hideKeyboard(). They just make the div with the keyboard visible or invisible:

function showKeyboard() { 
	var x = document.getElementById("keyboard"); = "block";			
	function hideKeyboard() {
    var x = document.getElementById("keyboard");    = "none";

And that’s all. As you can see creating and loading a custom keyboard with MindFusion JS library is really as easy as 1, 2 3. You can download the complete source code of the sample from this link:

Download the Hidden Keyboard With Special Language Symbols JavaScript Sample

About MindFusion Virtual Keyboard for JavaScript: A highly interactive, highly customizable library written in pure JavaScript that provides your web application with screen typing capabilities similar to those on mobile devices. The keyboard supports three predefined layouts: compact, default and extended. You can also use the keyboard layout creator tool that provides a convenient GUI to create and arrange your own keyboards. The library offers a well documented API with self-explanatory API members and tutorials that guarantee flat learning curve. You can choose among 8 predefined keyboard styles or customize them to create your own styles. Licenses are royalty-free, perpetual with discounts for freelancers, startups, academic institutions to name just a few. Learn more at