Create event popup in wrong place #1301
Replies: 1 comment 4 replies
-
|
@squatman86 |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for your response. Do you know what I can do to get rid of the odd ghosting effect of the bottom section. I'm guessing a CSS issue perhaps? |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, that's odd. Can you upload an example code to reproduce the problem? |
Beta Was this translation helpful? Give feedback.
-
|
adhrinae, thanks again for the response appreciate your help. Code as follows: index.html <html>
<head>
<link rel="stylesheet" href="./node_modules/tui-time-picker/dist/tui-time-picker.css" />
<link rel="stylesheet" href="./node_modules/tui-date-picker/dist/tui-date-picker.css" />
<link rel="stylesheet" href="./node_modules/@toast-ui/calendar/dist/toastui-calendar.min.css" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<button id="prevBtn">Prev</button>
<button id="nextBtn">Next</button>
<div id="calendar" style="height: 100%"></div>
<script src="./node_modules/tui-time-picker/dist/tui-time-picker.min.js"></script>
<script src="./node_modules/tui-date-picker/dist/tui-date-picker.min.js"></script>
<script src="./node_modules/@toast-ui/calendar/dist/toastui-calendar.min.js"></script>
<script src="calendar.js"></script>
</body>
</html>calendar.js const Calendar = tui.Calendar;
const container = document.getElementById('calendar');
const prevBtn = document.getElementById("prevBtn");
const nextBtn = document.getElementById("nextBtn");
const options = {
useFormPopup: true,
useDetailPopup: true,
defaultView: 'month',
usageStatistics: false,
calendars: [
{
id: 'cal1',
name: 'Personal',
backgroundColor: '#03bd9e',
},
{
id: 'cal2',
name: 'Work',
backgroundColor: '#00a9ff',
},
],
};
const calendar = new Calendar(container, options);
calendar.createEvents([
{
id: 'event1',
calendarId: 'cal2',
title: 'Weekly meeting',
start: '2022-10-07T09:00:00',
end: '2022-10-07T10:00:00',
},
{
id: 'event2',
calendarId: 'cal1',
title: 'Lunch appointment',
start: '2022-10-08T12:00:00',
end: '2022-10-08T13:00:00',
},
{
id: 'event3',
calendarId: 'cal2',
title: 'Vacation',
start: '2022-10-08',
end: '2022-10-10',
isAllday: true,
category: 'allday',
},
]);
calendar.setTheme({
/*common: {
gridSelection: {
backgroundColor: 'rgba(81, 230, 92, 0.05)',
border: '1px dotted #515ce6',
},
},*/
});
function formatTime(time) {
const hours = `${time.getHours()}`.padStart(2, '0');
const minutes = `${time.getMinutes()}`.padStart(2, '0');
return `${hours}:${minutes}`;
}
calendar.setOptions({
template: {
time(event) {
const { start, end, title } = event;
return `<span style="color: 000000;">${formatTime(start)}~${formatTime(end)} ${title}</span>`;
},
allday(event) {
return `<span style="color: 000000;">${event.title}</span>`;
},
},
});
///////////// ??how to get this to show
calendar.on('clickEvent', ({ event }) => {
//const el = document.getElementById('clicked-event');
//el.innerText = event.title;
//const firstEvent = calendar.getEvent(event.id, event.calendarId);
//console.log(firstEvent.title); // 'Weekly Meeting'
});
// Registering an instance event
calendar.on('beforeCreateEvent', (eventObj) => {
// Calling the instance method when the instance event is invoked
calendar.createEvents([
{
id: eventObj.id,
calendarId: eventObj.calendarId,
title: eventObj.title,
start: eventObj.start,
end: eventObj.end,
},
]);
});
prevBtn.addEventListener("click", (e) => {
calendar.prev();
});
nextBtn.addEventListener("click", (e) => {
calendar.next();
});style.css body {
font-family: segoe-ui, sans-serif;
}Let me know if there is anything I've missed that would be beneficial, thank you. (Comment modified by the maintainer for fixing code blocks) |
Beta Was this translation helpful? Give feedback.
-
|
I looked up your example code but It looks normal. Also tried to reproduce the problem in the sandbox like this. https://codesandbox.io/s/popup-ghost-reproduction-test-grov3b?file=/src/index.js If you find the same problem in the sandbox, perhaps your environment(mostly your browser) cause the problem. |
Beta Was this translation helpful? Give feedback.
-
Hi there,
I'm just working through getting the tui calendar implemented and I noticing that unlike the demo when I click a day to add an event the popup box isn't appearing on the outside of the days boundary, it seems to always be a fixed distance from where I click.
Please see attached image.
Thank you in advance.
Beta Was this translation helpful? Give feedback.
All reactions