Hi, I implemented a custom tabs feature using the code below, which resulted in an in-page tab. However, I’ve encountered an issue with my calendar. It used to display colored deadlines directly (see the first image below), but now I need to refresh the entire page or toggle between ‘Week’ and ‘Day’ views before returning to ‘Month’ to see the deadlines in color. If I don’t do this, the calendar only shows a grey tag with text ‘1 more’ on the dates(see the second image below).
And here is my code for the custom tabs. I think it has something to do with the tab. Because the calendar worked just fine before that. Please help me out.
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
.button-group {
display: flex;
justify-content: center;
}
.button {
background-color: #182939;
color: white;
font-family: 'Inter', sans-serif;
font-size: 16px;
padding: 10px 20px;
margin-right: 30px;
padding-top: 9px;
padding-bottom: 9px;
border-radius: 14px;
border: none;
cursor: pointer;
}
.button:active, .active {
background-color: #f5e507;
color: #182939;
outline: none;
}
</style>
</head>
<body>
<div class="button-group">
<button class="button active" onclick="runButton1Script()">Button 1</button>
<button class="button" onclick="runButton2Script()">Button 2</button>
<button class="button" onclick="runButton3Script()">Button 3</button>
</div>
<script>
const buttons = document.querySelectorAll('.button');
buttons.forEach(button => {
button.addEventListener('click', function() {
buttons.forEach(b => b.classList.remove('active'));
this.classList.add('active');
});
});
</script>
</body>
<script>
// hide blocks
window.addEventListener('DOMContentLoaded', (event) => {
document.getElementById("list1").style.display = "block";
document.getElementById("list2").style.display = "none";
document.getElementById("list3").style.display = "none"
});
function runButton1Script() {
document.getElementById("list1").style.display = "block";
document.getElementById("list2").style.display = "none";
document.getElementById("list3").style.display = "none";
document.getElementById("list1").scrollIntoView("list1");
console.log("Button 1 clicked");
}
function runButton2Script() {
document.getElementById("list2").style.display = "block";
document.getElementById("list1").style.display = "none";
document.getElementById("list3").style.display = "none";
document.getElementById("list2").scrollIntoView("list2");
console.log("Button 2 clicked");
}
function runButton3Script() {
document.getElementById("list3").style.display = "block";
document.getElementById("list1").style.display = "none";
document.getElementById("list2").style.display = "none";
document.getElementById("list3").scrollIntoView("list3");
console.log("Button 3 clicked");
}
</script>
</html>