# Scheduler

[component-header:sl-scheduler]

Scheduler collects multiple schedule views(timeline, month-view etc.) in one view

In order to load events, an eventLoader needs to be set when the component is ready.


```html preview
<sl-scheduler id="scheduler-el" style="max-height:600px"></sl-scheduler>
<sl-badge draggable="true" id="draggable">Drag this</sl-badge>
<sl-button size="small" id="btn-timeline">Timeline</sl-button>
<sl-button size="small" id="btn-calendar">Calendar</sl-button>
<script>

(async () => {
  await customElements.whenDefined('sl-scheduler');
  const noOfResources = 100;
  const scheduler = document.getElementById('scheduler-el');
  const btnTimeline = document.getElementById('btn-timeline');
  const btnCalendar = document.getElementById('btn-calendar');
  const hourInMillis = 1000 * 60 * 60;
  const dayInMillis = hourInMillis * 24;
  const monthInMillis = dayInMillis * 30;
  const names = ['Karl Hansen', 'Hannah Krog', 'Thorkild Kat', 'Michael Krog', 'Børge Lundgren', 'Holger Danske']
  const cities = ['Slagelse', 'Næstved', 'Sorø', 'Skælskør', 'Korsør', 'Høng', 'Køge', 'København', 'Roskilde'];
  let now = new Date();
  now.setHours(0);
  now.setMinutes(0);
  now.setSeconds(0);
  let dataStart = new Date(now.getTime() - monthInMillis);
  let dataEnd = new Date(now.getTime() + monthInMillis);

  btnTimeline.addEventListener('click', ev => scheduler.view = 'timeline');
  btnCalendar.addEventListener('click', ev => scheduler.view = 'calendar');
  

  scheduler.eventElementDecorator = (eventEl) => {
    console.log(eventEl);
  }

  scheduler.addEventListener('slSelect', event => console.log(event));
  scheduler.addEventListener('slMove', event => console.log(event));
  scheduler.addEventListener('click', event => {
    scheduler.getEventProperties(event).then(p => console.log(p))
  });
  scheduler.addEventListener('drop', event => {
    scheduler.getEventProperties(event).then(p => console.log(p))
  });

  const data = [];
  currentDate = dataStart;
  while(currentDate.getTime() < dataEnd.getTime()) {
    for(var i=1;i<=noOfResources;i++) {
      const start = currentDate;
      const end = new Date(start.getTime() + dayInMillis - 10000000);
      const title = cities[parseInt(Math.random() * cities.length)];
      const resourceId = ''+i;
      if(Math.random() <= 0.2) {
        data.push({id:start.toISOString() + '-' + i, title, start: start, end: end, resourceId: resourceId, type: Math.random() <0.2 ? 'success' : 'info'});
      }
    }
    currentDate = new Date(currentDate.getTime() + dayInMillis);
  }
  const vacationStart = new Date(dataStart.getTime() + (dayInMillis * 5));
  const vacationEnd = new Date(dataStart.getTime() + (dayInMillis * 40));
  data.push({id:'vacation', title: 'Vacation', start: vacationStart, end: vacationEnd, resourceId:'1', shape: 'Background', type: 'success'});
  
  console.log(data);

  scheduler.dataSource = {
    loadResources: () => {
      const resources = [];
      for(let i=1;i<=noOfResources;i++) {
        resources.push({id: ''+i, title: names[i % names.length]});
      }
      return Promise.resolve(resources);
    },
    loadDateEvents: (resourceIds, from, to) => {
      console.log('loading events: ', resourceIds);
      const p = new Promise(resolve => {
        const result = data.filter(e => e.start.getTime() >= from.getTime() && e.start.getTime() < to.getTime() && resourceIds.indexOf(e.resourceId) >= 0);
        console.log(result);
        setTimeout(() => resolve(result), 40);
      });
      
      return p;
    },
    onEventsChanged: (callback) => {},
    onResourcesChanged: (callback) => {}
  };

  document.getElementById('draggable').addEventListener('dragstart', (event) => {
    console.log('drag start');
    var dragSrcEl = event.target;

    const now = new Date();
    event.dataTransfer.effectAllowed = 'move';
    var item = {
      id: 'evt-1',
      groupId: '',
      start: now,
      end: now,
      title: 'test'
    };
    event.dataTransfer.setData("application/event.json", JSON.stringify(item));
    const dragData = event.dataTransfer.getData("application/event.json");
  });


})();
  
</script>
```
[component-metadata:sl-scheduler]