Estoy usando un calendario de selección de fechas de Bootstrap y quiero mostrar algunos eventos especiales en una fecha específica. Puedo resaltar las fechas que quiero, pero en esa fecha, quiero mostrar un botón colapsado en el que se mostrará el nombre del evento y cuando expandas ese div o botón colapsado obtendrás los detalles de ese evento ( no evento js).

 //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}; } } }