How to Build a JavaScript Eisenhower Matrix with DHTMLX

Introduction

What is Eisenhower Matrix and How it Works

  • Important and urgent — tasks with known deadlines that have to be timely completed to avoid any repercussions;
  • Important but not urgent — tasks without a clear due date that should be scheduled for attaining your objectives in the future;
  • Not important but urgent — tasks that must be done but do not require your personal attention and it is possible to delegate them to your colleagues;
  • Not important and not urgent — time-wasting activities that can be neglected or even excluded from your workflow.

JavaScript Eisenhower Matrix Example by DHTMLX

JavaScript Eisenhower Matrix Example by DHTMLX

Creating a JavaScript Eisenhower Matrix with DHTMLX Diagram Editor

const editor = new dhx.DiagramEditor(document.body, {    type: "default"});
  • Adding and manipulating matrix elements
  • Fine-tuning the appearance of matrix elements
  • Exporting and importing in JSON

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
JavaScript UI Libraries — DHTMLX

Here we post news about our JavaScript UI libraries. In addition to this, we also share useful tips, news and articles about JavaScript.