Generated by XState Viz: https://xstate.js.org/viz

machine.js

  const queueMachine = Machine({
    id: 'queue',
    initial: '',
    context: {
      queue: []
    }
  })  
  
  const calendarMachine = Machine({
    id: 'calendar',
    initial: 'initializing',
    context: {
      initialValues: [],
      activities: [],
      morning: [],
      afternoon: [],
      selected: {}
    },
    states: {
      initializing: {
        entry: assign({
          morning: (ctx, e) => spawn(queueMachine.withContext(ctx.initialValues))
        }),
        on: {
          SELECT: 'selecting',
          ADD: 'idle'
        }
      },
      idle: {
        on: {
          '': 'selecting'
        }
      },
      selecting: {
        on: {
          '': 'idle'
        }
      }
    }
  });
  
  const initialSchedule = [...Array(30)].map( (_,i) => ({'id': i, 'name': 'EMPTY'}) );

  calendarMachine.withContext((initialSchedule))