HOW TO CREATE A FULL CALENDAR IN NETSUITE USING SUITELET?

HOW TO CREATE A FULL CALENDAR IN NETSUITE USING SUITELET?

Category : Uncategorized

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 viewsn’
+’editable: true,n’
+’eventLimit: true, // allow “more” link when too many eventsn’
+ ‘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/.


1 Comment

Nidhin Mohanan

July 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

Leave a Reply

Reach Us @

Linkedin
Facebook
info@smilingcoders.com
+91 7306857196