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 implementationnetsuite consultation , netsuite customizationnetsuite 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. 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. 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

Understand Core Technology behind SuiteScript 2.0

HOW TO SET SUBLIST SUB RECORD VALUES IN SUITE SCRIPT 1.0 AND 2.0