Solved

Error logs in console

  • 4 October 2023
  • 2 replies
  • 73 views

Badge +2

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: [
{
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.

 

icon

Best answer by AnthonyD 6 October 2023, 06:27

View original

2 replies

Userlevel 2
Badge +6

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
 

Badge +2

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