I'm using a Bootstrap-date picker calendar and want to show some special events on some specific date. I'm able to highlight the dates which I want but on that date, I want to show a collapse button in which it will show the event name and when you expand that collapse div or button you'll get the details of that event(not js event).

//set the event inside a collapse container but it's not working
let eventname='<div class="special-event-f7e6c1" data-toggle="collapse" data-target="#mydiv" aria-expanded="true" aria-controls="mydiv">Grade1'+
            '</div><span class="text-secondary">4PM-5PM</span><div class="text-dark collapse" id="mydiv">Instructor Name1</div>';

//set some events on specific dates and its works fine

    special_event.forEach(obj=>{
                    obj.date=new Date(obj.date).toDateString();
                    obj.name=eventname;
                    eventObj.push(obj);
                })

//show the events on specific dates and its also working fine
beforeShowDay: function(date){
            
              for(let i=0;i<eventObj.length;i++){
                        let con="&bull;"+eventObj[i].name;
                        if(date.toDateString()==eventObj[i].date){
                            return {classes: "highlight", tooltip:"Title",content:date.getDate()+'<br/>'+con};
                        }
                    }
                    
                }