# Calendar

[component-header:sl-calendar]

Timelines are chronological overviews of events.

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

```html preview
<sl-calendar id="timeline-el" style="max-height:500px"></sl-calendar>
<sl-select id="select-el" size="small">
  <sl-menu-item value="1">1 week</sl-menu-item>
  <sl-menu-item value="2">2 weeks</sl-menu-item>
  <sl-menu-item value="3">3 weeks</sl-menu-item>
  <sl-menu-item value="4">4 weeks</sl-menu-item>
</sl-select>
<sl-badge draggable="true" id="draggable">Drag this</sl-badge>
<script>

(async () => {
  await customElements.whenDefined('sl-calendar');
  const noOfResources = 10;
  const timeline = document.getElementById('timeline-el');
  const select = document.getElementById('select-el');
  const hourInMillis = 1000 * 60 * 60;
  const dayInMillis = hourInMillis * 24;
  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);

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

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

  select.addEventListener('valueChange', event => {
    timeline.weeks = parseInt(event.detail);
  });
  
  const from = new Date(now.getTime() - (86400000 * (now.getDay() - 1)));
  const to = new Date(from.getTime() + (86400000 * 14));
  const data = [];
  let currentDate = new Date();
  while(currentDate.getTime() < to.getTime()) {
      const start = currentDate;
      const end = new Date(start.getTime() + dayInMillis - 1000000);
      const title = cities[parseInt(Math.random() * cities.length)];
      
      if(Math.random() <= 0.5) {
        let type = 'info';
        const rand = Math.random();
        if(rand < 0.2) { type = 'success';}
        else if(rand >= 0.2 && rand < 0.4) { type = 'danger';}
        else if(rand >= 0.4 && rand < 0.6) { type = 'warning';}
        data.push({id:start.toISOString(), title, start: start, end: end, type: type});
      }

      currentDate = new Date(currentDate.getTime() + dayInMillis);
  }

  const date1 = new Date(from.getTime());
  data.push({id: date1.toISOString(), title: 'Påske', start: date1, end: date1, shape: 'Background', type: 'info'});

  const date2 = new Date(from.getTime());
  date2.setDate(date2.getDate() + 1);
  data.push({id: date2.toISOString(), title: 'Syg', start: date2, end: date2, shape: 'Background'});
  timeline.events = data;

  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>
```

### Theme

Use `sl-theme` for theming the calendar, fx. dark mode as shown here.

```html preview
<div style="background:black; padding: var(--sl-spacing-medium)" >
<sl-theme name="dark">
<sl-calendar></sl-calendar>

</sl-theme>
</div>
```

[component-metadata:sl-calendar]