After I implement the Tabs Feature, Calendar Block doesn't work properly

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>
        @import url('');
         .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;
    <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>
    const buttons = document.querySelectorAll('.button');
        buttons.forEach(button => {
        button.addEventListener('click', function() {
            buttons.forEach(b => b.classList.remove('active'));
    // 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";
        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";
        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";
        console.log("Button 3 clicked");



You need to refer to this part of the thread:

Thank you so much Matthieu! That perfectly solved my issue. The tag feature you created is awesome.

1 Like