QuickInfo and Editor not working in mobile browser.
In mobile devices, QuickInfo and Editor don't appear when I click an event, a cell, or the + button.
<ScheduleComponent
width="100%"
height="100%"
selectedDate={new Date()}
ref={(t) => (ref.current = t)}
firstDayOfWeek={1}
actionBegin={actionBeginHandler}
created={() => ref.current.scrollTo(scrollTime)}
popupOpen={popupOpenHandler}
views={['Day', 'Week', 'Month', 'Year', 'Agenda']}
currentView={'Month'}
>
<Inject services={[Day, Week, Month, Agenda, Year, Resize, DragAndDrop]} />
</ScheduleComponent>
Here is my popupOpen
const popupOpenHandler = (args) => {
if (args.type === 'QuickInfo') {
if (!args.data.DocumentId) {
args.cancel = true;
}
if (!args.element.querySelector('.e-recordatorio')) {
const insertAfter = (newNode, existingNode) => {
existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
};
let row = createElement('div', { className: 'e-recordatorio' });
let icon = createElement('div', { className: 'e-recordatorio-icon e-icons' });
let textWrapper = createElement('div', { className: 'e-recordatorio-wrapper e-text-ellipsis' });
let text = createElement('div', { className: 'e-recordatorio-details e-text-ellipsis' });
text.textContent = `Recordatorio: ${
args.data.Recordatorio ? diasRecordatorio(args.data.Recordatorio) + ' y ' : ''
}mismo día`;
textWrapper.appendChild(text);
row.appendChild(icon);
row.appendChild(textWrapper);
let parentDiv = args.element.querySelector('.e-popup-content');
insertAfter(row, parentDiv.lastChild);
}
}
if (args.type === 'Editor') {
if (ref.current.currentView === 'Month' && !args?.target?.classList.contains('e-appointment')) {
args.element.querySelectorAll('.e-time-icon')[1].classList.remove('e-icon-disable');
args.element.querySelectorAll('.e-time-icon')[0].classList.remove('e-icon-disable');
args.element.querySelector('.e-time-zone-container').classList.remove('e-disable');
args.element.querySelector('.e-start').ej2_instances[0].format = 'M/d/yy h:mm a';
args.element.querySelector('.e-end').ej2_instances[0].format = 'M/d/yy h:mm a';
args.element.querySelector('.e-start').ej2_instances[0].value.setHours(9, 0, 0);
args.element.querySelector('.e-end').ej2_instances[0].value.setHours(9, 30, 0);
args.element.querySelector('.e-start').ej2_instances[0].dataBind();
args.element.querySelector('.e-all-day.e-checkbox').ej2_instances[0].checked = false;
}
if (!args.element.querySelector('.custom-field-row')) {
let row = createElement('div', { className: 'custom-field-row' });
let formElement = args.element.querySelector('.e-schedule-form');
formElement.firstChild.insertBefore(row, formElement.firstChild.firstChild);
let container = createElement('div', { className: 'custom-field-container' });
let inputEle = createElement('input', {
className: 'e-field',
attrs: { name: 'Recordatorio' },
});
container.appendChild(inputEle);
row.appendChild(container);
let dropDownList = new DropDownList({
dataSource: [
{ text: '3 días', value: 3 * 24 * 60 * 60 },
{ text: '1 semana', value: 7 * 24 * 60 * 60 },
{ text: '2 semanas', value: 14 * 24 * 60 * 60 },
{ text: '1 mes', value: 30 * 24 * 60 * 60 },
],
fields: { text: 'text', value: 'value' },
value: args.data.Recordatorio,
floatLabelType: 'Always',
placeholder: 'Recordatorio',
});
dropDownList.appendTo(inputEle);
inputEle.setAttribute('name', 'Recordatorio');
}
}
};
My actionBegin function
const actionBeginHandler = async (args) => {
try {
if (args.requestType === 'eventChange') {
//write to server
} else if (args.requestType === 'eventCreate') {
//write to server
} else if (args.requestType === 'eventRemove') {
//write to server
}
} catch (err) {
console.log(err);
}
};
My css
.e-time-zone-container {
display: none;
}
.e-control .e-lib .e-recurrenceeditor {
display: none
}
.custom-field-row {
margin-bottom: 20px;
}
.e-recordatorio {
display: flex;
padding-top: 16px;
}
.e-recordatorio-icon:before {
content: '\e20c'
}
.e-recordatorio-icon {
color: rgba(0,0,0,0.54);
font-size: 18px;
padding-right: 13px;
}
.e-recordatorio-wrapper{
color: rgba(0,0,0,0.87);
cursor: default;
font-size: 14px;
}
.e-toolbar .e-toolbar-pop {
overflow: auto;
}
Here images from desktop working as expected.
Here images from safari mobile (iPhone 13), before selecting and the after selecting (please notice that the whole screen darkens a bit)
Please your help.
SIGN IN To post a reply.
1 Reply
SIGN IN To post a reply.
