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.

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/.



Comments

Popular posts from this blog

ALERT IN NETSUITE USING USER EVENT BEFORE LOAD SCRIPT

HOW TO CREATE SUITELET ASSISTANT IN NETSUITE?

USER EVENT SCRIPT 2.0 TO LOAD A RECORD, READ IT'S VALUE AND SET A FIELD VALUE