HOW TO CREATE A FULL CALENDAR IN NETSUITE USING SUITELET?

A full calendar can be built in netsuite using suitelet script. This would require you to first download the zip file from https://fullcalendar.io/download.

Feel free to reach your NetSuite Solution Provider , TheSmilingCoders for proper netsuite implementation, netsuite consultation , netsuite customization, netsuite Support,netsuite Training, contact us at: Email : info@smilingcoders.com
Place this file at file cabinet and note down the url of fullcalendar.min.css, fullcalendar.print.min.css, /lib/moment.min.js, /lib/jquery.min.js, fullcalendar.min.js.

You can also create a client script and refer that url in html link ref, so that it can be triggered when user selects a date.

Below is the sample code: replcae the link url with your url

 var html = '<!DOCTYPE html>\n'
+'<html>\n'
+'<head>\n'
+'<meta charset="utf-8" />\n'
+'<link href="https://system.netsuite.com/core/media/media.nl?id=1234&c=4318&h=7264c1d&_xt=.css" rel="stylesheet" />\n' //fullcalendar.min.css
+'<link href="https://system.netsuite.com/core/media/media.nl?id=4523&c=4318&h=695a0109b&_xt=.css" rel="stylesheet" media="print" />\n'//fullcalendar.print.min.css
+'<script src="https://system.netsuite.com/core/media/media.nl?id=9999&c=4318&h=c4eee7ce6c9&_xt=.js"></script>\n'// /lib/moment.min.js,
+'<script src="https://system.netsuite.com/core/media/media.nl?id=8888&c=4318&h=aa5de54c&_xt=.js"></script>\n' ///lib/jquery.min.js
+'<script src="https://system.netsuite.com/core/media/media.nl?id=5555&c=4318&h=6096c&_xt=.js"></script>\n' // client script
+'<script>\n'

+' $(document).ready(function() {\n'

+' $("#calendar").fullCalendar({\n'
+' header: {\n'
+'left: "prev,next today",\n'
+'center: "title",\n'
+'right: "month,basicWeek,basicDay"\n'
+'},\n'
+' defaultDate: "'5/20/2018'",\n'
+' navLinks: true, // can click day/week names to navigate views\n'
+'editable: true,\n'
+'eventLimit: true, // allow "more" link when too many events\n'
+ 'displayEventTime : false,\n'
+'selectable: true,\n'
+'select: function(start, end, jsEvent, view) {\n' // This function will be triggered                                                                                                               //  on click of date
         // start contains the date you have selected
         // end contains the end date.
                                // you can also call a client function by calling the function name declared in                                      //client script
         // Caution: the end date is exclusive (new since v2).
+'var allDay = !start.hasTime() && !end.hasTime();\n'
+' alert(["Event Start date: " + moment(start).format(),"Event End date: " + moment(end).format(),"AllDay: " + allDay].join(" "));\n'
+'},\n'
+'events: [\n';


html = html +'{\n'
+'title: "'+i+'",\n'
+'start: "'5/22/2018"\n'

+'},\n';


html = html   +']\n'
          +'});\n'

          +'});\n'

          +'</script>\n'
          +'<style>\n'

          +'body {\n'
          +'margin: 40px 10px;\n'
          +'padding: 0;\n'
   // font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
          +'font-size: 14px;\n'
          +'}\n'

          +'#calendar {\n'
          +'max-width: 900px;\n'
          +'margin: 0 auto;\n'
          +'}\n'

          +'</style>\n'
          +'</head>\n'
          +'<body>\n'

          +'<div id="calendar"></div>\n'

          +'</body>\n'
          +'</html>\n';

response.write(html);


// You can alternatively create a inline type field and assign the variable html as default value.


The output will be a calendar like https://fullcalendar.io/.
Email : info@smilingcoders.com


Comments

  1. UnknownJuly 25, 2018 at 3:43 AM

    Hi,

    How can i show full calendar in a sub tab with some details from another record. can you help me in integrating this

    ReplyDelete
  2. SCApril 30, 2020 at 4:31 AM

    We are NetSuite Solution Provider with vast experience in NetSuite Implementation, netsuite customization including netsuite training & netsuite integration.
    NetSuite Solution Provider
    NetSuite Training
    NetSuite Implementation
    NetSuite Customization
    NetSuite Integration

    ReplyDelete

Post a Comment

Popular posts from this blog

Work Around the 1000 Row Limit Returned by Saved Searches in Netsuite

nlapiSearchRecord can return only upto 1000 rows. But there is a work around to retrieve more than 1000 rows. This can be done by first sorting the result based on internal id and then using while loop and use concat method to get all results by internalid number as a filter inside the while loop. The sample code is given below: var filters = new Array(); filters[1] = new nlobjSearchFilter('mainline',null,'is','T'); var columns = new Array(); columns[0] = new nlobjSearchColumn('internalid').setSort();  //sort the result based on internalid var results = nlapiSearchRecord('transaction',null,filters,columns);  //search record var completeResultSet = results;  //copy the result while(results.length == 1000){  //if there are more than 1000 records      var lastId = results[999].getValue('internalid');  //note the last record retrieved      filters[2] = new nlobjSearchFilter('internalidnumber',null,'greaterthan',lastId);  //cre
Read more

USING CASE (IF AND ELSE) IN NETSUITE SAVED SEARCH- NETSUITE ACADEMY

While creating a saved search in Netsuite, you want encounter a situation where you want have to display a value depending on some conditions. Such scenarios can be implemented by using sql CASE syntax in the formula field. For eg, in a transaction search, if you want to display a value depending on the transaction type, then you can add a formula text field in coulmn and use CASE as given below: CASE WHEN {type}='Invoice' THEN '0' WHEN {type}='Journal' THEN {status}  ELSE '' END The above field will display 0 when type is Invoice. It will display status of the transaction when type is Journal and for other transaction type, it will be blank. NETSUITE ACADEMY Feel free to reach out TheSmilingCoders for proper  netsuite implementation ,  netsuite consultation  ,  netsuite customization ,  netsuite Support , netsuite Training    contact us at: Email : info@smilingcoders.com Facebook :  https://www.facebook.com/Smiling-Coders-Netsuite-Tra
Read more

Understand Core Technology behind SuiteScript 2.0

As a netsuite solution provider we want to share, The core of  SuiteScript 2.0 came from the RequireJs and CommonJs background. RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environment. Using a modular script loader like RequireJS will improve the speed and quality of your code. Commonjs  defines a module format. Unfortunately, it was defined without giving browsers equal footing to other JavaScript environments. Because of that, there are CommonJS specification proposals for Transport formats and an asynchronous require. In NetSuite Customization and netsuite implementation    RequireJS tries to keep with the spirit of CommonJS, with using string names to refer to dependencies, and to avoid modules defining global objects, but still allow coding a module format that works well natively in the browser. RequireJS implements the Asynchronous Module Definition (formerly Transport/C) proposal. D
Read more