Add Event on Hover

mobiscroll.setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
});

var hoveredDate;

function updateRenderDayContent() {
  if (calendar) {
    calendar.setOptions({
      renderCalendarDayContent: function (args) {
        // Only render the button on the hovered day
        if (hoveredDate && hoveredDate.getTime() === args.date.getTime()) {
          return '<button class="mds-cell-summary-btn">Add event</button>';
        }
        return '';
      },
    });
  }
}

// Event delegation for dynamic button
document.getElementById('demo-show-cell-summary-on-hover').addEventListener('click', function (event) {
  if (event.target.closest('.mds-cell-summary-btn') && hoveredDate) {
    calendar.addEvent({
      start: hoveredDate,
      title: 'New Event',
    });
    mobiscroll.toast({
      message: 'Event added on ' + mobiscroll.formatDate('YYYY-MM-DD', hoveredDate),
    });
  }
});

var calendar = mobiscroll.eventcalendar('#demo-show-cell-summary-on-hover', {
  view: {
    calendar: {
      labels: 2,
    },
  },
  data: [
    {
      start: '2026-10-02T12:00',
      end: '2026-10-02T16:00',
      title: 'Company Strategy Offsite',
      color: '#90bcff',
    },
    {
      start: '2026-10-07T09:00',
      end: '2026-10-07T17:00',
      title: 'R&D Innovation Workshop',
      color: '#ffdfaf',
    },
    {
      start: '2026-10-15T10:00',
      end: '2026-10-15T15:00',
      title: 'Client Feedback Review',
      color: '#ffb9ad',
    },
    {
      start: '2026-10-19T09:00',
      end: '2026-10-19T19:00',
      title: 'Team Building Adventure',
      color: '#f3c1ff',
    },
    {
      start: '2026-10-23T11:00',
      end: '2026-10-23T15:00',
      title: 'Sales Summit & Training',
      color: '#b5eff8',
    },
    {
      start: '2026-10-25T10:00',
      end: '2026-10-25T15:00',
      title: 'Executive Planning Retreat',
      color: '#c7ffbb',
    },
    {
      start: '2026-10-29T14:00',
      end: '2026-10-29T17:00',
      title: 'Marketing Team Conference',
      color: '#ffeeb6',
    },
  ],
  onCellHoverIn: function (args) {
    hoveredDate = args.date;
    updateRenderDayContent();
  },
  onCellHoverOut: function () {
    hoveredDate = null;
    updateRenderDayContent();
  },
});
  

<div id="demo-show-cell-summary-on-hover" class="mds-cell-summary"></div>
  

.mds-cell-summary .mbsc-calendar-cell {
  min-height: 145px;
}
.mds-cell-summary-btn {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  z-index: 3;
  font-size: 10px;
  padding: 8px;
  background: transparent;
  border-radius: 4px;
  border: 1px solid #5584b5;
  color: #5584b5;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.1s ease-out;
}
.mds-cell-summary-btn:hover {
  background: #5584b5;
  color: white;
  box-shadow: 0 2px 8px rgba(85, 132, 181, 0.3);
}
.mds-cell-summary-btn:active {
  box-shadow: 0 1px 4px rgba(85, 132, 181, 0.3);
}