This document provides a comprehensive walkthrough for creating a drag & drop calendar JavaScript control add-in for Microsoft Dynamics NAV 2017. It outlines the process of creating an assembly file, implementing necessary JavaScript libraries, and packaging resources for registration in Dynamics NAV. Step-by-step instructions are given for creating files, building the solution, and registering the control add-in effectively.

1. Create a Drag & Drop Calendar JavaScript Add-in for Dynamics NAV 2017
This walkthrough demonstrates how to create a Drag & Drop Calendar JavaScript control add-in and use it on
a Microsoft Dynamics NAV page.
Creating a control add-in assembly file (.dll) with Visual Studio
1. In Visual studio, create a new Project (Class Library)
2. Add a Reference to the following assembly: Microsoft.Dynamics.Framework.UI.Extensibility.dll
By Default the path of the assembly is
C:Program Files (x86)Microsoft Dynamics NAV100RoleTailored Client.

2. 3. Declare a new Interface named IDragDropCalendar and add the following code.
4. Sign the assembly
a. In Visual Studio, on the project menu, choose DragDropCalendar solution properties
b. Within the windows that appears, select the Signing tab
c. Tick the “Sign the assembly” checkbox.

3. d. In the Choose a strong name key file drop-down list, select New
e. The Create Strong Name Key dialog box will be displayed and you can specify a name for key file.
You can specify a password to protect the file.
5. Build the solution
You can download the file from: https://drive.google.com/open?id=1uBoZRGVhsY7mJmSzKkAvUfqkjWNCpTx9

4. Creating a JavaScript Scheduler Application
1. Download the following libraries:
- bootstrap.min.js https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js
- fullcalendar.min.js https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.js
- jquery-1.11.2.min.js https://code.jquery.com/jquery-1.11.2.min.js
- jquery-ui.min.js https://code.jquery.com/ui/1.11.2/jquery-ui.min.js
- moment.min.js https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js
- jquery.xml2json.min.js https://cdnjs.cloudflare.com/ajax/libs/x2js/1.2.0/xml2json.min.js
- bootstrap.min.css https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css
- fullcalendar.min.css https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.css
2. Open your favorite IDE (Notepad ++ for example) and create three files
o DragDropCalendar.js https://drive.google.com/open?id=1vqofLGhsu2Q2JmkuWBlKNx5tTJTRlkJj
o DragDropCalendar.css https://drive.google.com/open?id=1o8MNyjDQdGnrK0eQNuaIhrIjrZMq1udi
o Manifest.xml https://drive.google.com/open?id=1o2INN7AHbjN6N4AloRioYf8QIHdIPCes

5. Creating a Resource .Zip File
Before registering the control add-in in Microsoft Dynamics NAV, you must create a .Zip file containing the Manifest
and any resource files.
1. On your computer, in a folder of your choice, create the following structure
Image, Script and StyleSheet
2. Locate the Manifest.xml that you created in the previous steps, and copy this to the same folder structure.
3. Place images, scripts and stylesheet in the right folders.
In this walkthrough, we will leave the Image folder empty.
4. Select File and Folders, then right click the highlighted area
5. In the WinZip sub-menu, choose add to Zip File
6. Rename the .Zip File to DragDropCalendar.zip
Copy the Control Add-in Assembly and Resource .Zip to the MS Dynamics NAV
Development Environment
By default, this folder is C:Program Files (x86)Microsoft Dynamics NAV100RoleTailored ClientAdd-ins

6. Registering the Control Add-in in Microsoft Dynamics NAV
To register the control Add-In, we must provide the following information:
Control Add-in name
The name of the control add-in, is determined by the
The name in this walkthrough is DragDropCalendar.
Public key token
To determinate the public key token for the control Add-In:
a. Open Developer Command prompt for VS2017
b. At the command prompt, change to directory that contain the assembly
c. Type the following command: sn -T DragDropCalendarAddIn.dll
Include the control add-in in the control add-in page
In the Search box, enter Control Add-in and then choose related link.
Chose New, and then fill the column with the appropriate value.
With the Control add-in page still open, you import the resource
(DragDropCalendar.zip) file.

7. Create a Page to Display the Control Add-in
Before creating the page, you need to recover the list of resource, for this:
1. Create a new XmlPort called Export Resource List and set the properties like below:
For this purpose, you will recover only the name of our resource:
The property Temporary of the Element SalesPerson must be set to Yes

8. 2. Add code to initialize our Temporary record.
o Add Global function: SetResource
3. Create a Codeunit: Drag&Drop Calendar Management and add the following function.

9. 4. Create a Page Drag & Drop Calendar
Set the property of Field as below:

10. To Add the C/AL Code triggers, locate the DragDropCalendar::ControlAddInReady() and add the
following line.
Download File: https://drive.google.com/open?id=1hZs2isJydxDMvXOiBJ0Zs6Rfqsigkx4h
Run the page
Best Regards,
MEDDAH MEHDI