I’m using vanilla-calendar.pro and here is my simple code below:
document.addEventListener('DOMContentLoaded', () => {
const calendar = new VanillaCalendar('#calendar', {
// Settings
input: true,
actions: {
changeToInput(e, self) {
if (!self.HTMLInputElement) return;
if (self.selectedDates[0]) {
self.HTMLInputElement.innerHTML = self.selectedDates[0];
// if you want to hide the calendar after picking a date
self.hide();
} else {
self.HTMLInputElement.textContent = '';
}
},
},
settings: {
visibility: {
positionToInput: 'center',
},
},
});
calendar.init();
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/vanilla-calendar-pro/build/vanilla-calendar.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vanilla-calendar-pro/build/vanilla-calendar.min.js" defer></script>
<title>test page</title>
</head>
<body>
<h1 style =" font-size: 40px;" >Test Project</h1>
<div style="height: 50rem; background-color: rgb(182, 142, 215); overflow-y: scroll; display: flex; justify-content: center; flex-direction: column;">
<div style="margin-bottom: 90rem;" > some components 1</div>
<input id="calendar" type="text" placeholder="Choose date" readonly />
<div style="margin-bottom: 90rem;" > some components 2</div>
</div>
</body>
</html>My problem is that when you click the input to choose a date and the calendar popup shows up, then when you try to scroll the inner div the popup calendar dose not scroll properly with it!.
I tried to contain it inside a div to see if it works but its not, also tried to set style
position: absolute/ relative or z-index here and there also its not working..
Any help with that please?