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.
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/.
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/.
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
Hi,
ReplyDeleteHow can i show full calendar in a sub tab with some details from another record. can you help me in integrating this
We are NetSuite Solution Provider with vast experience in NetSuite Implementation, netsuite customization including netsuite training & netsuite integration.
ReplyDeleteNetSuite Solution Provider
NetSuite Training
NetSuite Implementation
NetSuite Customization
NetSuite Integration