Create a Drag & Drop Calendar JavaScript Add-in for Dynamics NAV 2017

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 NAV\100\RoleTailored Client.


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.


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:

Creating a JavaScript Scheduler Application
1. Download the following libraries:
- bootstrap.min.js
- fullcalendar.min.js
- jquery-1.11.2.min.js
- jquery-ui.min.js
- moment.min.js
- jquery.xml2json.min.js
- bootstrap.min.css
- fullcalendar.min.css
2. Open your favorite IDE (Notepad ++ for example) and create three files
o DragDropCalendar.js
o DragDropCalendar.css
o Manifest.xml


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


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 NAV\100\RoleTailored Client\Add-ins


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 tpd7pqkaty4m.png

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 ( file.


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


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.




4. Create a Page Drag & Drop Calendar


Set the property of Field as below:


To Add the C/AL Code triggers, locate the DragDropCalendar::ControlAddInReady() and add the following line.


Download File:

Run the page and Enjoy.



  • aabbccaabbcc Member Posts: 2

    From the picture to the page. What is the cause?
  • oldmatoldmat Member Posts: 1
    Same problem for me.
    Inside the manifest file I can see the reference to "ResourceScheduleMain.js" and ResourceSchedule.css", but I can't find links to those files in your post. Maybe this is the problem.
    Where can I find "ResourceScheduleMain.js" and ResourceSchedule.css" files ?
  • MMEDDAHMMEDDAH Member Posts: 5
    Sorry i mad a mistake.

    This is the right Manifest file.

    <?xml version="1.0" encoding="utf-8"?>
    			Microsoft.Dynamics.NAV.InvokeExtensibilityMethod('ControlAddInReady', null);
  • aabbccaabbcc Member Posts: 2
    edited 2018-03-21
    I have edited as you said. The result is this.

    This is Manifest.xml.

    All file in project.

    For jquery.xml2json.min.js file I downloaded it and got it. xml2json.min.js I'm not sure if this is relevant to the results. But I fixed it. jquery.xml2json.min.js Then follow the picture I sent.

    How do I fix a problem? To display the calendar.
    If possible, I would like to request a file. DragDropCalendar.csproj obtained at sign assembly.
    Thank you.
  • samausdensamausden Member Posts: 4
    Would love to try this out...
    Have you managed to get round the issue you are having?
  • JorgeJigsawJorgeJigsaw Member Posts: 1
    Thanks to this walktrough. It works for me in NAV 2015.
    However, I would like to show some information about the events when the mouse is over it. The eventMouseover and eventRender callbacks don't seem to work in my case.
  • ZIIZII Member Posts: 1
    @MMEDDAH hello mahdi I tried your solution and I get this result ez34j0fj1zfh.png can you help me thanks.
    PS: I am using NAV 2018
  • RickTweedleRickTweedle Member Posts: 2
    I am using 2018 as well and have the same issue ZII, any help getting this working would be great!
  • RickTweedleRickTweedle Member Posts: 2
    I got the issues resolved with making the sales people appear - just need to make it useful now (i.e. triggering events in NAV to says "appointment X for start datetime Y end datetime Z has changed"... and to add a way of populating the calendar with appointments.
    Excellent starting point / proof though
  • jony1833jony1833 Member Posts: 1
    Did someone make it works in 2018¿? Is the full project finished¿? Thanks
Sign In or Register to comment.