Skip to main content
Nintex Community Menu Bar

Hi, I'm using Literal to make a fullcalendar.
When I run it at my chorm (file:///D:/K2Five/Pramool/fullcalendar-6.1.9/examples/month-view-k2.html) It works.


 

But when I put the script in the Data Label and select Literal, nothing happened. The screen is white.

I have verified that the src path is correct. I have placed the library in server (C:\Program Files\K2\K2 smartforms Runtime\Styles\Themes)

download fullcalendar → https://fullcalendar.io/docs/initialize-globals

1. create DataLabel and Add Expression Script


2.This is the code in the Datalabel


<script src='/Runtime/Styles/Themes/fullcalendar-6.1.9/dist/index.global.js'></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      initialDate: '2023-01-12',
      editable: true,
      selectable: true,
      businessHours: true,
      dayMaxEvents: true,
      locale: 'th',
      events: e
        {
          title: 'All Day Event',
          start: '2023-01-01'
        }
      ]
    });

    calendar.render();
  });

</script>
<style>

  body {
    margin: 40px 10px;
    padding: 0;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
  }

  #calendar {
    max-width: 1100px;
    margin: 0 auto;
  }

</style>
<div id='calendar'></div>


The screen is white. and no error


 

I want to see JavaScript errors.
In order to solve the problem

Please tell me if you know.

 

Hello @HarumiSysyem ,

 

Please try the following:
Add 3 datalabels and a timer control (timer control about 5 seconds).

On the view initialise method, transfer the expression: 
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.9/index.global.min.js'></script>
into data label
then, transfer the expression:
<div id='calendar'></div>

in data label 1

then, start the time control

When the timer control ticks, transfer the expression:
<script>var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { initialView: 'dayGridMonth' }); calendar.render();</script>

into the data label 2

Make sure the data labels have the literal ticked and prevent XSS unticked.

 

I think the main issue you had is the div needs to be added to the page via html injection and the “document.addEventListener('DOMContentLoaded', function() {“ event didn’t seem to execute.

 

I got the following to load:
 

You will need to tweak the timer control to make the control load faster etc. 

 

Hope this helps.

Anthony
 

Hello @HarumiSysyem ,

 

Please try the following:
Add 3 datalabels and a timer control (timer control about 5 seconds).

On the view initialise method, transfer the expression: 
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.9/index.global.min.js'></script>
into data label
then, transfer the expression:
<div id='calendar'></div>

in data label 1

then, start the time control

When the timer control ticks, transfer the expression:
<script>var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { initialView: 'dayGridMonth' }); calendar.render();</script>

into the data label 2

Make sure the data labels have the literal ticked and prevent XSS unticked.

 

I think the main issue you had is the div needs to be added to the page via html injection and the “document.addEventListener('DOMContentLoaded', function() {“ event didn’t seem to execute.

 

I got the following to load:
 

You will need to tweak the timer control to make the control load faster etc. 

 

Hope this helps.

Anthony
 

Oh thank you very much, it worked.

But I divided the script into two parts.

DataLabel 1 (I used executed Initialize)

<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.9/index.global.min.js'></script><div id='calendar'></div>

 

DataLabel 2 (I used executed Initialized)

<script>var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { initialView: 'dayGridMonth' }); calendar.render();</script>

 

Thank you very much for wasting your time. 😍
 

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings