In this blog post we are going to look at the way you can build the ToolStrip that you see at the image below. We use the ToolStrip control, which is part of MindFusion Pack for JavaScript. Here is the final result:
We will go through the process of creating the toolstrip step-by-step, from scratch, clarifying the most important details.
You can run the sample online at https://mindfusion.eu/samples/javascript/grid/TrainSchedule.html
In this blog post we will look in short at the steps to build this JavaScript area chart with custom grid:
The line chart uses DateTimeSeries for the data and a standard GridType for the major grid lines. The auxiliary grid lines among them are made with custom drawing: we will discuss in details the code for that.
The sample uses MindFusion Charting library for JavaScript, which also supports TypeScript.
You can see the sample online at https://mindfusion.eu/samples/javascript/chart/CustomGrid/DateTimeSeries.html
In this blog post we will demonstrate how to setup a Unix/Linux system to run a sample JavaScript diagram application under Electron.js. We use a Raspberry Pi computer which runs Raspberry Pi OS – the Debian-based OS optimized for the Raspberry Pi hardware.
Here is how our test application looks like:
We will build a diagram where we will arrange the nodes in a hierarchical manner to visualize the chain of responsibility in a company. We use the JavaScript Diagramming library, the TreeLayout and custom AnchorPattern definitions for nodes. Here is the final result:
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.
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:
Use the <HTML> widget of Elementor to insert code for the <div> element required by MindFusion JS Scheduler
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:
http://www.yoursite.any/wp-content/themes/your-theme/calendar-themes/first-theme.css
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:
http://www.yoursite.any/wp-content/themes/your-theme/js/FirstSchedule.js http://www.yoursite.any/wp-content/themes/your-theme/js/MindFusion.Scheduling.js
The directory structure of a WordPress blog with the newly created “js” and “calendar-themes” folders.
Here is a list of the available options:
https://www.cminds.com/best-5-wordpress-header-footer-management-plugins/
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="http://ubydesign.net/wp-content/themes/twentyseventeen/calendar-themes/first-theme.css" rel="stylesheet">
And in the “Scripts in Footer” textbox:
<script src="http://ubydesign.net/wp-content/themes/twentyseventeen/js/MindFusion.Scheduling.js" type="text/javascript"></script> <script src="http://ubydesign.net/wp-content/themes/twentyseventeen/js/FirstSchedule.js" type="text/javascript"></script>
On our test blog we use the twentyseventeen theme. That’s how the Header/Footer settings look like:
The header references the CSS theme of the calendar, the footer adds references to the required JavaScript files.
Learn more about MindFusion JavaScript components at: https://mindfusion.eu/products.html#javascript
For technical questions please use the MindFusion discussion board: https://mindfusion.eu/Forum/YaBB.pl