HOW TO CREATE A FULL CALENDAR IN NETSUITE USING SUITELET?
Category : NetSuite suitecommerce advanced suitescript
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/.