# Date Cell

[component-header:sl-date-cell]

Date Cells are used in timelines and large calendar views as cells for headers of dates with events.

## Simple right-aligned description cell
```html preview
<div>
<sl-date-cell style="border: 1px solid var(--sl-color-gray-400); max-width:200px">
  <sl-label slot="end">Employee A</sl-label>
</sl-date-cell>
</div>
```

## Simple centered description cell
```html preview
<div>
<sl-date-cell style="border: 1px solid var(--sl-color-gray-400); max-width:200px">
  <sl-label>Mon</sl-label>
</sl-date-cell>
</div>
```

## Simple left aligned description cell
```html preview
<div>
<sl-date-cell style="border: 1px solid var(--sl-color-gray-400); max-width:200px">
  <sl-label size="x-small" slot="start" style="color:var(--sl-color-gray-500)">12</sl-label>
</sl-date-cell>
</div>
```

## Both left and right aligned description cell
```html preview
<div>
<sl-date-cell style="border: 1px solid var(--sl-color-gray-400); max-width:200px">
  <sl-label size="x-small" slot="start" style="color:var(--sl-color-gray-500)">12</sl-label>
  <sl-label slot="end" size="small" line-height="x-small">25.</sl-label>
</sl-date-cell>
</div>
```

## Events only
```html preview
<div>
<sl-date-cell style="border: 1px solid var(--sl-color-gray-400); max-width:200px">
  <sl-badge slot="events">Slagelse</sl-badge>
  <sl-badge slot="events">Køge</sl-badge>
</sl-date-cell>
</div>

```

## With left and right aligned description cell and events
```html preview
<div id="demo-1">
<sl-date-cell style="border: 1px solid var(--sl-color-gray-400); max-width:200px">
  <sl-label size="x-small" slot="start" style="color:var(--sl-color-gray-500)">12</sl-label>
  <sl-label slot="end" size="small" line-height="x-small">25.</sl-label>
  <sl-badge slot="events">Slagelse</sl-badge>
  </sl-date-cell>
</div>

<script>
  const dc = document.getElementById('demo-1').querySelector('sl-date-cell');
  dc.events = [
    {id:'ev-1', title:'Slagelse'}
  ];
</script>
```

## With left and right aligned description cell and events
```html preview
<div id="demo-2">
<sl-date-cell background-color="blue" style="border: 1px solid var(--sl-color-gray-400); max-width:200px">
  <sl-label size="x-small" slot="start" style="color:var(--sl-color-gray-500)">12</sl-label>
  <sl-label slot="end" size="small" line-height="x-small">25.</sl-label>
  <sl-badge slot="events">Slagelse</sl-badge>
  </sl-date-cell>
</div>

<script>
  const dc = document.getElementById('demo-2').querySelector('sl-date-cell');
  dc.events = [
    {id:'ev-1', title:'Slagelse'}
  ];
</script>
```

[component-metadata:sl-date-cell]