- mouse over the event
- Move the mouse gently to position the tooltip correctly.
How can I set the initial position of the tooltip?
Or can I fix this error?
PS. I try this code but It does not work.
scheduler.config.tooltip_offset_x = 30; scheduler.config.tooltip_offset_y = 40;
here is my code
// https://docs.dhtmlx.com/scheduler/tooltips.html
// import 'codebase/ext/dhtmlxscheduler_tooltip.js';
import { Scheduler } from './Scheduler';
import _ from 'lodash';
import API from 'api';
const localeMessage = window.__localeMessage;
let currentEvent = {
eventId: null,
tooltip: null
};
/**
* @description 주간/월간에서는 API에서 상세 데이터를 받아와야 하기 때문에 debounce를 써서 API 호출 최소화
*/
let debounce = _.debounce((eventId) => {
let tooltip = '';
async function getEvent(id) {
if (scheduler.dhtmlXTooltip.isTooltip()) scheduler.dhtmlXTooltip.hide();
try {
await API.local.schedule.get(id).then((res) => {
if(res.isMemo) { // NOTE: 메모
tooltip = (res.memo) ? `<b>${localeMessage.popup.schedule.memo}</b>:<br> ${res.memo.replace(/(?:\r\n|\r|\n)/g, '<br />')}<br>` : '';
currentEvent.id = res.id;
currentEvent.tooltip = tooltip;
// return tooltip;
} else { // NOTE: 예약
tooltip += (res.customer.name) ? `<b>${localeMessage.popup.schedule.name}</b>: ${res.customer.name}<br>` : '';
tooltip += (res.customer.uniqueNumber) ? `<b>${localeMessage.popup.schedule.uniqueNumber}</b>: ${res.customer.uniqueNumber}<br>` : '';
tooltip += (res.customer.birthDate) ? `<b>${localeMessage.popup.schedule.birthDate}</b>: ${res.customer.birthDate}<br>` : '';
tooltip += (res.customer.telNumbers) ? `<b>${localeMessage.popup.schedule.primaryTel}</b>: ${res.customer.telNumbers.filter(item => item.isPrimary === true)[0].number}<br>` : '';
tooltip += (res.staffs) ? `<b>${localeMessage.popup.schedule.scheduleStaff}</b>:
${res.staffs.
filter(item => item.activated === true).
map(item => item.path).toString()}<br>` : '';
tooltip += (res.scheduleItems) ? `<b>${localeMessage.popup.schedule.scheduleItem}</b>:
${res.scheduleItems.
filter(item => item.activated === true).
map(item => item.path).toString()}<br>` : '';
tooltip += (res.serviceItems) ? `<b>${localeMessage.popup.schedule.serviceItem}</b>:
${res.serviceItems.
filter(item => item.activated === true).
map(item => item.path).toString()}<br>` : '';
tooltip += (res.memo) ? `<b>${localeMessage.popup.schedule.memo}</b>:<br> ${res.memo.replace(/(?:\r\n|\r|\n)/g, '<br />')}<br>` : '';
currentEvent.id = res.id;
currentEvent.tooltip = tooltip;
// return tooltip;
}
// return tooltip;
// console.log('tooltip', scheduler.dhtmlXTooltip.isTooltip());
});
if (!scheduler.dhtmlXTooltip.isTooltip()) scheduler.dhtmlXTooltip.show('mouseover', tooltip);
} catch (err) {
console.log('err', err);
}
};
getEvent(eventId);
}, 100, { leading: false, trailing: true });
/**
* @description 값이 존재하는 항목에 대해서만 표시
*/
scheduler.templates.tooltip_text = (start, end, event) => {
if (event.createTime) {
if (currentEvent.id === event.id) {
return currentEvent.tooltip;
} else {
scheduler.dhtmlXTooltip.config.delta_x = 10;
scheduler.dhtmlXTooltip.config.delta_y = 60;
return debounce(event.id);
}
}
}
// TODO: 툴팁오픈시(예약)
scheduler.attachEvent("onBeforeTooltip", (id) => {
if (id && Scheduler.getIsOpenContextMenu()) { // NOTE: 이벤트 아이디와 컨텍스트 메뉴가 오픈된 상황
return false;
} else {
return true;
}
// 대한민국 휴일 부분에서 노출 시키지 않도록 처리
// if(scheduler.getEvent(id).class) {
// return false;
// } else {
// return true;
// }
});
// TODO: 이벤트가 수정될 경우 툴팁 초기화 필요
scheduler.attachEvent('updateCurrentEvent', () => {
console.log('updateCurrentEventupdateCurrentEventupdateCurrentEventupdateCurrentEvent')
currentEvent.eventId = null;
currentEvent.tooltip = null;
});
