英文:
Show event description in FullCalendar(v6)
问题
Sure, here's the translation of the non-code part:
目前正在使用FullCalendar与来自Google日历的事件源，效果很好。我想要将事件描述添加为工具提示或在事件标题旁边的列表视图中显示。我已经在鼠标进入时弹出了一个窗口，但无法弄清楚如何包含描述。
以下是一些建议：
这个 2017年的问题建议如下：
eventRender: function(event, element) {
element.description = event.description;
},
还有这个 问题建议如下：
events: myevents,
eventRender: function (event, element) {
element.attr('href', 'javascript:void(0);');
element.click(function() {
bootbox.alert({
message: 'Description : '+event.description,
title: event.title,
});
});
}
这些想法可能有效，但我不知道如何将它们集成到解决方案中。
这是我的当前脚本，仅用于测试项目ID的弹出窗口：
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,listMonth'
},
eventMouseEnter: function (event) {
alert('Event: ' + event.item.id);
},
googleCalendarApiKey: '你的Google Calendar API密钥',
eventSources: [
{
googleCalendarId: '你的Google日历ID',
color: 'rgb(246, 191, 38)', // 一个选项！
}
],
initialView: 'listMonth'
});
calendar.render();
});
</script>
希望这可以帮助你！
英文:
Currently using full calendar with event sources from google calendar which is working great. I would like to add the event description either as a tooltip or in the list view beside the event title. I've got a popup on mouse enter working but can't figure how to include the description.
This question from 2017 suggests something like this:
eventRender: function(event, element) {
element.description = event.description;
},
and also this question suggests this:
events: myevents,
eventRender: function (event, element) {
element.attr('href', 'javascript:void(0);');
element.click(function() {
bootbox.alert({
message: 'Description : '+event.description,
title: event.title,
});
});
}
These ideas might work but I don't know how to integrate them into a solution.
Here is my current script with a popup of itemID just for testing:
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,listMonth'
},
eventMouseEnter: function (event) {
alert('Event: ' + event.item.id);
},
googleCalendarApiKey: 'A*******************************o',
eventSources: [
{
googleCalendarId: 'k**************************o@group.calendar.google.com',
color: 'rgb(246, 191, 38)', // an option!
}
],
initialView: 'listMonth'
});
calendar.render();
});
</script>
Any help would be appreciated!
答案1
得分: 1
我在看了更多问题后解决了它：
我将这个部分替换为：
eventMouseEnter: function (info) {
alert('描述：' + info.event.extendedProps.description);
}
英文:
Well I've solved it after looking at a few more questions:
I replaced this:
eventMouseEnter: function (event) {
alert('Event: ' + event.item.id);
}
with this:
eventMouseEnter: function (info) {
alert('Description: ' + info.event.extendedProps.description);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论