Scheduler - How to add active areas to cells

The following code shows a small red circle in the lower left corner of a cell (see please the attached image)

onBeforeCellRender: (args) => {
      args.cell.areas = [
        {          
          action: 'Bubble',
          bubble: new DayPilot.Bubble({
            zIndex: 500,
            onLoad: function(args) { args.html = 'test' }
          }),
          height: 6,
          width: 6,
          visibility: "Visible",
          bottom: 1,
          left: 1,
          style: "border: 1px solid red; border-radius: 5px; box-sizing: border-box; background-color: red;"
        }];
    },

I have therfore two issues:
1) How can I set a space between this active acrea and the event above?
2) How can I show a bubble? My code above doesn't seem to work