Try to embedd fullcalendar into my thymeleaf template. fullcalendar works fine if i use it with direct data like that:
<head>
<script src='.global.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const calendarEl = document.getElementById('calendar')
const calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
events: [
{
title: 'event1',
start: '2025-03-13'
},
{
title: 'event2',
start: '2025-03-09',
end: '2025-03-11'
},
{
title: 'event3',
start: '2025-03-15T12:30:00',
allDay: false // will make the time show
}
]
,
eventClick: function (info) {
alert('Event: ' + info.event.title + ' - ' + info.event.link);
// change the border color just for fun
info.el.style.borderColor = 'red';
}
})
calendar.render()
})
</script>
</head>
But if i replace the hardcoded data with a json stream, nothing is shown:
<head>
<script src='.global.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const calendarEl = document.getElementById('calendar')
const calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
events: '/cal/stream',
eventClick: function(info) {
alert('Event: ' + info.event.title + ' - ' + info.event.link);
// change the border color just for fun
info.el.style.borderColor = 'red';
}
})
calendar.render()
})
</script>
</head>
The controller (/cal/stream) is returning:
[
{
title : 'event2',
start : '2025-03-15T12:30:00'
}
]
Can anybody see an error in my process ?
Try to embedd fullcalendar into my thymeleaf template. fullcalendar works fine if i use it with direct data like that:
<head>
<script src='https://cdn.jsdelivr/npm/fullcalendar/index.global.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const calendarEl = document.getElementById('calendar')
const calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
events: [
{
title: 'event1',
start: '2025-03-13'
},
{
title: 'event2',
start: '2025-03-09',
end: '2025-03-11'
},
{
title: 'event3',
start: '2025-03-15T12:30:00',
allDay: false // will make the time show
}
]
,
eventClick: function (info) {
alert('Event: ' + info.event.title + ' - ' + info.event.link);
// change the border color just for fun
info.el.style.borderColor = 'red';
}
})
calendar.render()
})
</script>
</head>
But if i replace the hardcoded data with a json stream, nothing is shown:
<head>
<script src='https://cdn.jsdelivr/npm/fullcalendar/index.global.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const calendarEl = document.getElementById('calendar')
const calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
events: '/cal/stream',
eventClick: function(info) {
alert('Event: ' + info.event.title + ' - ' + info.event.link);
// change the border color just for fun
info.el.style.borderColor = 'red';
}
})
calendar.render()
})
</script>
</head>
The controller (/cal/stream) is returning:
[
{
title : 'event2',
start : '2025-03-15T12:30:00'
}
]
Can anybody see an error in my process ?
Share Improve this question asked Mar 11 at 5:51 naturzukunftnaturzukunft 1432 silver badges12 bronze badges1 Answer
Reset to default 0Haha....
The json was wrong:
{ title: "event2", start: "2025-03-15" }