@iamproperty/components 7.3.0 → 7.5.0

package/assets/ts/components/calendar/calendar.component.ts

@@ -0,0 +1,1330 @@
+import { trackComponent, trackComponentRegistered } from '../_global';
+import { uniqueID } from '../../modules/helpers';
+
+trackComponentRegistered('iam-calendar');
+
+class iamCalendar extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
+
+    const loadCSS = `@import "${assetLocation}/css/components/calendar.component.css";`;
+
+    const weekViewOnly = `<table class="table--day" role="presentation"><tbody>
+      <tr class="allday"><th>All day</th></tr>
+      <tr><th data-hour="0">00</th></tr>
+      <tr><th data-hour="1">01</th></tr>
+      <tr><th data-hour="2">02</th></tr>
+      <tr><th data-hour="3">03</th></tr>
+      <tr><th data-hour="4">04</th></tr>
+      <tr><th data-hour="5">05</th></tr>
+      <tr><th data-hour="6">06</th></tr>
+      <tr><th data-hour="7">07</th></tr>
+      <tr><th data-hour="8">08</th></tr>
+      <tr><th data-hour="9">09</th></tr>
+      <tr><th data-hour="10">10</th></tr>
+      <tr><th data-hour="11">11</th></tr>
+      <tr><th data-hour="12">12</th></tr>
+      <tr><th data-hour="13">13</th></tr>
+      <tr><th data-hour="14">14</th></tr>
+      <tr><th data-hour="15">15</th></tr>
+      <tr><th data-hour="16">16</th></tr>
+      <tr><th data-hour="17">17</th></tr>
+      <tr><th data-hour="18">18</th></tr>
+      <tr><th data-hour="19">19</th></tr>
+      <tr><th data-hour="20">20</th></tr>
+      <tr><th data-hour="21">21</th></tr>
+      <tr><th data-hour="22">22</th></tr>
+      <tr><th data-hour="23">23</th></tr>
+      </tbody></table>`;
+
+    const template = document.createElement('template');
+
+    template.innerHTML = `
+    <style>
+    ${loadCSS}
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    </style>
+    <div class="calendar__container">
+
+      <div class="calendar__controls">
+        <button id="today-button" class="btn btn-action">Today</button>
+
+
+        <button id="prev-button" class="btn btn-action fa-chevron-left border-0"><span class="visually-hidden">previous</span></button>
+        <div class="calendar__datepicker">
+          <span class="calendar__title"></span>
+          <input type="date" id="date" name="date" />
+        </div>
+        <button id="next-button" class="btn btn-action fa-chevron-right border-0"><span class="visually-hidden">Next</span></button>
+      
+        <hr/>
+  
+
+        <select name="view" id="view" class="btn btn-action">
+
+          <button>
+            <selectedcontent></selectedcontent> <i class="fa-regular fa-chevron-down"></i>
+          </button>
+
+          <option value="month"><i class="fa-light fa-calendar-days"></i>Month</option>
+          <option value="week"><i class="fa-light fa-calendar-week"></i>Week</option>
+          <option value="day"><i class="fa-light fa-calendar-day"></i>Day</option>
+          <option value="list"><i class="fa-light fa-list"></i>List</option>
+          <option value="year"><i class="fa-light fa-calendars"></i>Year</option>
+        </select>
+
+        <label class="tag tag--toggle"><input type="checkbox" name="split" value="true">Split view</label>
+
+        <button id="filters-button" class="btn btn-action"><i class="fa-light fa-sliders"></i><span class="visually-hidden">Filters</span></button>
+
+        <button id="settings-button" class="btn btn-action"><i class="fa-light fa-gear"></i><span class="visually-hidden">Settings</span></button>
+        
+      </div>
+
+      <dialog id="settings">
+        <button class="dialog__close">Close</button>
+        <span class="h3">Calendar settings</span>
+
+        <fieldset id="workday" class="mb-5">
+        <label>Start time <span><input type="time" id="start-time" name="start-time" step="3600" value="08:00" /><span class="suffix fa-regular fa-clock" aria-hidden="true"></span></span></label>
+        <label>End time <span><input type="time" id="end-time" name="end-time" step="3600" value="18:00" /><span class="suffix fa-regular fa-clock" aria-hidden="true"></span></span></label>
+
+        </fieldset>
+
+        <hr/>
+        <fieldset>
+          <span class="label">Show weekends</span>
+          <input type="radio" name="weekends" id="weekends-yes" tabindex="-1">
+          <label for="weekends-yes" class="d-inline-block">Yes</label>
+          <input type="radio" name="weekends" id="weekends-no" tabindex="-1">
+          <label for="weekends-no" class="d-inline-block">No</label>
+        </fieldset>
+        <hr/>
+        <button class="btn btn-primary">Save settings</button>
+        <button class="btn btn-secondary">Cancel</button>
+
+      </dialog>
+
+    
+      <div class="calendar__wrapper">
+        
+        <div id="week-view-corner" class="calendar">
+          <table>
+            <thead>
+            <tr>
+              <th class="column-header">Empty</th>
+            </tr>
+            </thead>
+            <tbody>
+              <tr class="allday">
+                <th>All day</th>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div id="week-view-header" class="calendar">
+          <table>
+            <thead>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+        </div>
+
+        <div id="week-view-side">${weekViewOnly}</div>
+
+        <div class="calendar month-wrapper" id="calendar" part="calendar">
+          <table>
+            <thead>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+        </div>
+
+        <div id="year-view">
+        </div>
+      </div>
+
+
+      <slot></slot>
+
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+    this.monthArray = [
+      'January',
+      'February',
+      'March',
+      'April',
+      'May',
+      'June',
+      'July',
+      'August',
+      'September',
+      'October',
+      'November',
+      'December',
+    ];
+    this.dayArray = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+
+    this.english_ordinal_rules = new Intl.PluralRules('en', { type: 'ordinal' });
+    this.suffixes = {
+      one: 'st',
+      two: 'nd',
+      few: 'rd',
+      other: 'th',
+    };
+
+    this.calendars = ['Default']; // TO DO allow for these to be set via the component data attributes
+    this.eventTypes = []; // TO DO allow for these to be set via the component data attributes
+
+    this.pauseObserver = false;
+  }
+
+  createThead(sundayFirst: false): string {
+    if (sundayFirst)
+      return `<tr>
+    <th class="column-header sunday"><span class="long-day-name">Sunday</span><span class="short-day-name" role="presentation">Sun</span></th>
+    <th class="column-header monday"><span class="long-day-name">Monday</span><span class="short-day-name" role="presentation">Mon</span></th>
+    <th class="column-header tuesday"><span class="long-day-name">Tuesday</span><span class="short-day-name" role="presentation">Tues</span></th>
+    <th class="column-header wednesday"><span class="long-day-name">Wednesday</span><span class="short-day-name" role="presentation">Wed</span></th>
+    <th class="column-header thursday"><span class="long-day-name">Thursday</span><span class="short-day-name" role="presentation">Thurs</span></th>
+    <th class="column-header friday"><span class="long-day-name">Friday</span><span class="short-day-name" role="presentation">Fri</span></th>
+    <th class="column-header saturday"><span class="long-day-name">Saturday</span><span class="short-day-name" role="presentation">Sat</span></th>
+  </tr>`;
+
+    return `<tr>
+    <th class="column-header monday"><span class="long-day-name">Monday</span><span class="short-day-name" role="presentation">Mon</span></th>
+    <th class="column-header tuesday"><span class="long-day-name">Tuesday</span><span class="short-day-name" role="presentation">Tues</span></th>
+    <th class="column-header wednesday"><span class="long-day-name">Wednesday</span><span class="short-day-name" role="presentation">Wed</span></th>
+    <th class="column-header thursday"><span class="long-day-name">Thursday</span><span class="short-day-name" role="presentation">Thurs</span></th>
+    <th class="column-header friday"><span class="long-day-name">Friday</span><span class="short-day-name" role="presentation">Fri</span></th>
+    <th class="column-header saturday"><span class="long-day-name">Saturday</span><span class="short-day-name" role="presentation">Sat</span></th>
+    <th class="column-header sunday"><span class="long-day-name">Sunday</span><span class="short-day-name" role="presentation">Sun</span></th>
+</tr>`;
+  }
+
+  numberDaysInMonth(year, month): Date {
+    return new Date(year, month, 0).getDate();
+  }
+
+  getOrdinalNumber(number): string {
+    const category = this.english_ordinal_rules.select(number);
+    const suffix = this.suffixes[category];
+    return number + suffix;
+  }
+
+  setToMonday(date): Date {
+    const day = date.getDay() || 7;
+    if (day !== 1) date.setHours(-24 * (day - 1));
+    return date;
+  }
+
+  setToSunday(date): Date {
+    const monday = this.setToMonday(date);
+    const sunday = new Date(monday);
+
+    sunday.setDate(sunday.getDate() + 6);
+    return sunday;
+  }
+
+  getTitle(dateStr, view): string {
+    const date = new Date(dateStr);
+    const month = date.getMonth();
+    const year = date.getFullYear();
+    const day = date.getDate();
+    const dayOfWeek = date.getDay() ? date.getDay() : 7;
+
+    if (view == 'week') {
+      const monday = this.setToMonday(new Date(dateStr));
+      const sunday = this.setToSunday(new Date(dateStr));
+
+      const mondayMonth = monday.getMonth();
+      const mondayYear = monday.getFullYear();
+      const mondayDay = monday.getDate();
+
+      const sundayMonth = sunday.getMonth();
+      const sundayYear = sunday.getFullYear();
+      const sundayDay = sunday.getDate();
+
+      return `${this.getOrdinalNumber(mondayDay)} ${mondayMonth != sundayMonth ? this.monthArray[sundayMonth] : ''} ${mondayYear != sundayYear ? mondayYear : ''} - ${this.getOrdinalNumber(sundayDay)} ${this.monthArray[sundayMonth]} ${sundayYear}`;
+    } else if (view == 'day') {
+      return `${this.dayArray[dayOfWeek]} ${this.getOrdinalNumber(day)} ${this.monthArray[month]} ${year}`;
+    } else if (view == 'year') {
+      return `${year}`;
+    }
+
+    return `${this.monthArray[month]} ${year}`;
+  }
+
+  createCalendar(selectedDate, today, sundayFirst: false): string {
+    const date = new Date(selectedDate);
+    const month = date.getMonth();
+    const year = date.getFullYear();
+    const day = date.getDate();
+    const selectedDateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+    const daysThisMonth = this.numberDaysInMonth(year, month + 1);
+    const startOfMonth = new Date(`${year}-${String(month + 1).padStart(2, '0')}-01`);
+    const endOfMonth = new Date(`${year}-${String(month + 1).padStart(2, '0')}-${daysThisMonth}`);
+    const startDay = startOfMonth.getDay() != 0 ? startOfMonth.getDay() : 7;
+    const endDay = endOfMonth.getDay() != 0 ? endOfMonth.getDay() : 7;
+    const loopDays = daysThisMonth + startDay + (7 - endDay - 1);
+
+    // Get the previous month
+    const prevMonthDate = new Date(selectedDate);
+    prevMonthDate.setMonth(prevMonthDate.getMonth() - 1);
+    const prevMonth = prevMonthDate.getMonth();
+    const prevMonthYear = prevMonthDate.getFullYear();
+    const daysPrevMonth = this.numberDaysInMonth(year, month);
+
+    // Get the next month
+    const nextMonthDate = new Date(selectedDate);
+    nextMonthDate.setMonth(nextMonthDate.getMonth() + 1);
+    const nextMonth = nextMonthDate.getMonth();
+    const nextMonthYear = nextMonthDate.getFullYear();
+
+    // Get calendars
+
+    if (!this.hasAttribute('data-calendars')) {
+      Array.from(this.querySelectorAll('button[data-calendar]')).forEach((element) => {
+        // Scan through the buttons and look forunique calendar names
+        if (!this.calendars.includes(element.getAttribute('data-calendar')))
+          this.calendars.push(element.getAttribute('data-calendar'));
+      });
+    }
+
+    // Create tbody string by looping through the number of days in month plus some days before and after
+    let tbodyContent = `<tr>`;
+
+    for (let i = sundayFirst ? 0 : 1; i <= loopDays; i++) {
+      const loopDay = i - (startDay - 1);
+      const loopDate = `${year}-${String(month + 1).padStart(2, '0')}-${String(loopDay).padStart(2, '0')}`;
+      const dayOfWeek = i % 7;
+
+      tbodyContent += `<td class="day--${this.dayArray[dayOfWeek].toLowerCase()} ${loopDate == today ? 'today' : ''} ${loopDate == selectedDateStr ? 'selected' : ''} ${i < startDay ? 'prev-month' : ''} ${loopDay > daysThisMonth ? 'next-month' : ''}">`;
+
+      // prev month days
+      if (i < startDay) {
+        const adjustedLoopDay = daysPrevMonth - (startDay - 1 - i);
+        const adjustedLoopDate = `${prevMonthYear}-${String(prevMonth + 1).padStart(2, '0')}-${String(adjustedLoopDay).padStart(2, '0')}`;
+
+        tbodyContent += `<time class="column-header" datetime="${adjustedLoopDate}" title="${this.dayArray[dayOfWeek]} ${loopDay} ${this.monthArray[prevMonth]} ${year}"><span class="day-of-week">${this.dayArray[dayOfWeek]} </span><span class="day">${adjustedLoopDay}</span> <span class="month">${this.monthArray[prevMonth]}</span></time>`;
+        tbodyContent += this.addDay(adjustedLoopDate, this.calendars);
+      }
+
+      if (i >= startDay && loopDay <= daysThisMonth) {
+        tbodyContent += `<time class="column-header" datetime="${loopDate}" title="${this.dayArray[dayOfWeek]} ${loopDay} ${this.monthArray[month]} ${year}"><span class="day-of-week">${this.dayArray[dayOfWeek]} </span><span class="day">${loopDay}</span> <span class="month">${this.monthArray[month]}</span></time>`;
+        tbodyContent += this.addDay(loopDate, this.calendars);
+      }
+
+      // next month days
+      if (loopDay > daysThisMonth) {
+        const adjustedLoopDay = i - (startDay - 1) - daysThisMonth;
+        const adjustedLoopDate = `${nextMonthYear}-${String(nextMonth + 1).padStart(2, '0')}-${String(adjustedLoopDay).padStart(2, '0')}`;
+
+        tbodyContent += `<time class="column-header" datetime="${adjustedLoopDate}" title="${this.dayArray[dayOfWeek]} ${loopDay} ${this.monthArray[nextMonth]} ${year}"><span class="day-of-week">${this.dayArray[dayOfWeek]} </span><span class="day">${adjustedLoopDay}</span> <span class="month">${this.monthArray[nextMonth]}</span></time>`;
+        tbodyContent += this.addDay(adjustedLoopDate, this.calendars);
+      }
+
+      tbodyContent += '</td>';
+
+      // Close row and start a new one
+      if ((sundayFirst ? i + 1 : i) % 7 === 0 && i != loopDays) {
+        tbodyContent += `</tr><tr>`;
+      }
+    }
+    tbodyContent += '</tr>';
+
+    return tbodyContent;
+  }
+
+  addDay(day, calendars: []): string {
+    let htmlTable = '<table class="table--day">';
+    htmlTable += `<thead><tr><th>time</th>`;
+    calendars.forEach((calendarTitle) => {
+      htmlTable += `<th class="column-header">${calendarTitle}</th>`;
+    });
+    htmlTable += `</tr></thead>`;
+
+    htmlTable += `<tbody>`;
+    htmlTable += `<tr class="allday"><th>All day</th>`;
+    calendars.forEach((calendarTitle) => {
+      htmlTable += `<td datetime="${day}" data-calendar="${calendarTitle}"><span datetime="${day}"></span></td>`;
+    });
+    htmlTable += `</tr>`;
+
+    for (let i = 0; i < 24; i++) {
+      htmlTable += `<tr class="hour${i}"><th data-hour="${i}">${i}${i < 12 ? 'am' : 'pm'}</th>`;
+      calendars.forEach((calendarTitle) => {
+        htmlTable += `<td datetime="${day}T${String(i).padStart(2, '0')}:00" data-calendar="${calendarTitle}"><span datetime="${day}T${String(i).padStart(2, '0')}:00"></span><span datetime="${day}T${String(i).padStart(2, '0')}:15"></span><span datetime="${day}T${String(i).padStart(2, '0')}:30"></span><span datetime="${day}T${String(i).padStart(2, '0')}:45"></span></td>`;
+      });
+      htmlTable += `</tr>`;
+    }
+    htmlTable += `</tbody>`;
+    htmlTable += '</table>';
+
+    return htmlTable;
+  }
+
+  addEvents(): void {
+    function setDefaultEventValues(component, element, index): void {
+      const datetime = element.getAttribute('datetime');
+      const datetimeArr = datetime.split('T');
+      let id = element.getAttribute('id');
+
+      // Add ID
+      if (!element.hasAttribute('id')) {
+        id = `event${uniqueID(index)}`;
+        element.setAttribute('id', id);
+      }
+
+      // Wrap content in span for formatting in week/day view
+      if (!element.querySelector('span:not(.tooltip__content')) {
+        element.innerHTML = `<span>${element.innerHTML}</span>`;
+      }
+
+      // Add event type enum so we can set the correct colours
+      //if(!element.hasAttribute('data-event-type-enum') && element.hasAttribute('data-event-type')){
+
+      const eventType = element.getAttribute('data-event-type');
+
+      if (!component.eventTypes.includes(eventType)) component.eventTypes.push(eventType);
+
+      element.setAttribute('data-event-type-enum', component.eventTypes.indexOf(eventType) + 1);
+      //}
+
+      // Add calendar enum so we can set the correct colours
+      if (element.hasAttribute('data-calendar')) {
+        const calendar = element.getAttribute('data-calendar');
+
+        if (!component.calendars.includes(calendar)) component.calendars.push(calendar);
+
+        element.setAttribute('data-calendar-enum', component.calendars.indexOf(calendar) + 1);
+      }
+
+      if (!element.hasAttribute('data-calendar-enum')) {
+        element.setAttribute('data-calendar-enum', 1);
+      }
+
+      if (!element.hasAttribute('data-hours') && !element.hasAttribute('data-days')) {
+        if (datetimeArr[1]) {
+          element.setAttribute('data-hours', 1);
+        } else {
+          element.setAttribute('data-days', 1);
+        }
+      }
+
+      const getRoundedDate = (minutes, d = new Date()): void => {
+        const ms = 1000 * 60 * minutes; // convert minutes to ms
+        const roundedDate = new Date(Math.round(d.getTime() / ms) * ms);
+
+        const newMonth = roundedDate.getMonth();
+        const newYear = roundedDate.getFullYear();
+        const newDay = roundedDate.getDate();
+        const newMinutes = roundedDate.getMinutes();
+        const newHour = roundedDate.getHours();
+
+        const strRoundedDate = `${newYear}-${String(newMonth + 1).padStart(2, '0')}-${String(newDay).padStart(2, '0')}T${String(newHour).padStart(2, '0')}:${String(newMinutes).padStart(2, '0')}`;
+
+        return strRoundedDate;
+      };
+
+      if (datetimeArr[1]) {
+        element.setAttribute('data-start', datetimeArr[1]);
+        element.querySelector(':scope > span').setAttribute('data-start', datetimeArr[1]);
+
+        const roundedDatetime = getRoundedDate(15, new Date(datetime));
+        element.setAttribute('datetime', roundedDatetime);
+      }
+
+      if (element.querySelector('.tooltip__content')) {
+        const tooltip = element.querySelector('.tooltip__content');
+
+        tooltip.style.positionAnchor = `--${id}`;
+
+        element.style.anchorName = `--${id}`;
+      }
+
+      element.classList.add('defaults-added');
+    }
+
+    function adjustEvent(component, element, continued: false): void {
+      const datetime = element.getAttribute('datetime');
+
+      const date = new Date(datetime);
+      const dayOfWeek = date.getDay() ? date.getDay() : 7;
+
+      // Locate where we need to add slots for the buttons to go - We need duplicate slots for the split view and fixed header
+      const timeTd = component.shadowRoot.querySelector(
+        `.month-wrapper .table--day td:has(span[datetime="${datetime}"])${element.hasAttribute('data-calendar') ? `[data-calendar="${element.getAttribute('data-calendar').replace('_', '')}"]` : ''}`
+      );
+      const timeTdHeader = component.shadowRoot.querySelector(
+        `#week-view-header .table--day td:has(span[datetime="${datetime}"])${element.hasAttribute('data-calendar') ? `[data-calendar="${element.getAttribute('data-calendar').replace('_', '')}"]` : ''}`
+      );
+
+      if (timeTdHeader && timeTdHeader.closest('tr').classList.contains('allday')) {
+        // Add the alldays slot for the fixed header
+        if (
+          !timeTdHeader.querySelector(
+            `slot[name="${datetime}${element.hasAttribute('data-calendar') ? `-${element.getAttribute('data-calendar').replace('_', '')}` : ''}-header]"`
+          )
+        ) {
+          timeTdHeader
+            .querySelector(`span[datetime="${datetime}"]`)
+            .insertAdjacentHTML(
+              'beforeEnd',
+              `<slot name="${datetime}${element.hasAttribute('data-calendar') ? `-${element.getAttribute('data-calendar').replace('_', '')}` : ''}-header" class="${continued ? 'continued' : ''}"></slot>`
+            );
+        }
+      }
+
+      const dateTd = timeTd?.parentElement?.closest('td');
+
+      // original event needs a slot name adding
+      element.setAttribute(
+        'slot',
+        `${datetime}${element.hasAttribute('data-calendar') ? `-${element.getAttribute('data-calendar').replace('_', '')}` : ''}`
+      );
+
+      // Add matching slot to the event element to have it show in the correct place on the calendar
+      if (timeTd) {
+        // Add the default slot
+        if (
+          !timeTd.querySelector(
+            `slot[name="${datetime}${element.hasAttribute('data-calendar') ? `-${element.getAttribute('data-calendar').replace('_', '')}` : ''}"]`
+          )
+        ) {
+          timeTd
+            .querySelector(`span[datetime="${datetime}"]`)
+            .insertAdjacentHTML(
+              'beforeEnd',
+              `<slot name="${datetime}${element.hasAttribute('data-calendar') ? `-${element.getAttribute('data-calendar').replace('_', '')}` : ''}" class="${continued ? 'continued' : ''}"></slot>`
+            );
+        }
+
+        // Set the classes need to create the grey bars in the mobile month view
+        const events = dateTd.hasAttribute('data-events') ? parseInt(dateTd.getAttribute('data-events')) : 0;
+        let hours = dateTd.hasAttribute('data-hours') ? parseFloat(dateTd.getAttribute('data-hours')) : 0;
+        hours += element.hasAttribute('data-hours') ? parseFloat(element.getAttribute('data-hours')) : 0;
+
+        dateTd.setAttribute('data-events', parseInt(events) + 1);
+
+        if (events + 1 > 2) dateTd.setAttribute('data-more', parseInt(events) + 1 - 2);
+
+        dateTd.setAttribute('data-hours', hours);
+
+        dateTd.classList.add('has-event');
+
+        if (timeTd.closest('tr').classList.contains('has-event')) timeTd.closest('tr').classList.add('multiple-event');
+        else timeTd.closest('tr').classList.add('has-event');
+
+        if (hours > 2) dateTd.classList.add('multi-events');
+
+        if (hours > 4) dateTd.classList.add('busy-day');
+
+        if (element.hasAttribute('data-days')) dateTd.classList.add('all-day');
+
+        if (element.classList.contains('continued')) dateTd.classList.add('continued-day');
+      }
+
+      // Add CSS properties so we can control the size of the event elements for day and week view
+      if (element.hasAttribute('data-hours'))
+        element.style.setProperty(
+          '--event-height',
+          `${parseInt(element.getAttribute('data-hours')) * (1.09375 * 4)}rem`
+        );
+
+      if (element.hasAttribute('data-days') && !element.classList.contains('processed')) {
+        const eventDayTotal = element.getAttribute('data-days');
+
+        element.style.setProperty('--event-width', `${eventDayTotal * 100}%`);
+        element.style.setProperty('--event-max-width', `${(8 - dayOfWeek) * 100}%`);
+        element.classList.add('allday-event');
+
+        // Create a duplicate event for each day the orginal
+        for (let i = 1; i < eventDayTotal; i++) {
+          const cloneElement = element.cloneNode(true);
+          cloneElement.removeAttribute('data-days');
+          cloneElement.removeAttribute('style');
+          cloneElement.classList.add('continued');
+          cloneElement.classList.add('allday-event');
+
+          const id = `event${uniqueID(i)}`;
+          cloneElement.setAttribute('id', id);
+
+          if (cloneElement.querySelector('.tooltip__content')) {
+            const tooltip = cloneElement.querySelector('.tooltip__content');
+            tooltip.style.positionAnchor = `--${id}`;
+            cloneElement.style.anchorName = `--${id}`;
+          }
+
+          const newDate = new Date(datetime);
+          newDate.setDate(newDate.getDate() + i);
+
+          const newMonth = newDate.getMonth();
+          const newYear = newDate.getFullYear();
+          const newDay = newDate.getDate();
+          const newDayOfWeek = newDate.getDay() ? newDate.getDay() : 7;
+
+          const strCloneEvent = `${newYear}-${String(newMonth + 1).padStart(2, '0')}-${String(newDay).padStart(2, '0')}`;
+
+          cloneElement.setAttribute('data-original-datetime', element.getAttribute('datetime'));
+          cloneElement.setAttribute('datetime', strCloneEvent);
+
+          element.after(cloneElement); // Add after original
+          adjustEvent(component, cloneElement, true);
+
+          if (newDayOfWeek == 1) {
+            // Monday
+
+            cloneElement.style.setProperty('--event-width', `${(eventDayTotal - i) * 100}%`);
+            cloneElement.style.setProperty('--event-max-width', `${(8 - newDayOfWeek) * 100}%`);
+
+            cloneElement.classList.remove('continued');
+          }
+        }
+      }
+
+      // Add flag so we dont have to re-do the above
+      element.classList.add('processed');
+    }
+
+    this.pauseObserver = true;
+
+    Array.from(this.querySelectorAll('button[datetime]')).forEach((element, index) => {
+      setDefaultEventValues(this, element, index);
+      adjustEvent(this, element);
+    });
+
+    setTimeout(() => {
+      this.pauseObserver = false;
+    }, '500');
+  }
+
+  addJSEvents(component): void {
+    // Add events to the newly created calendar
+    const title = component.shadowRoot?.querySelector('.calendar__title');
+    const datePicker = component.shadowRoot?.querySelector(`#date`);
+    const viewPicker = component.shadowRoot?.querySelector(`#view`);
+    const yearView = this.shadowRoot?.querySelector('#year-view');
+
+    const today = new Date();
+    const date = today.getDate();
+    const month = today.getMonth();
+    const year = today.getFullYear();
+    const strToday = `${year}-${String(month + 1).padStart(2, '0')}-${String(date).padStart(2, '0')}`;
+
+    const tbody = component.shadowRoot?.querySelector('#calendar > table > tbody');
+
+    // clicking on the day istelf
+    Array.from(component.shadowRoot.querySelectorAll('.month-wrapper > table > tbody > tr > td:has(slot)')).forEach(
+      (element) => {
+        element.addEventListener('click', (event) => {
+          if (!event.target.matches('button')) {
+            const elementDate = element.querySelector('time').getAttribute('datetime');
+            datePicker.value = elementDate;
+
+            Array.from(tbody.querySelectorAll(':scope > tr > td')).forEach((innerelement) => {
+              innerelement.classList.remove('selected');
+            });
+
+            element.classList.add('selected');
+
+            // Go to day if the in month view with out split view enabled
+
+            if (component.shadowRoot.querySelector('[name="split"]:checked') && viewPicker.value == 'month') {
+              Array.from(component.querySelectorAll(`[data-slot]`)).forEach((button) => {
+                button.setAttribute('slot', button.getAttribute('data-slot'));
+              });
+
+              Array.from(component.querySelectorAll(`[slot^="${datePicker.value}"]`)).forEach((button) => {
+                button.setAttribute('data-slot', button.getAttribute('slot'));
+                button.removeAttribute('slot');
+              });
+            } else if (!component.shadowRoot.querySelector('[name="split"]:checked') && viewPicker.value == 'month') {
+              viewPicker.value = 'day';
+              title?.innerHTML = this.getTitle(datePicker.value, viewPicker.value);
+              component.scrollIntoPlace();
+            }
+            if (viewPicker.value == 'year') {
+              viewPicker.value = 'month';
+              yearView?.innerHTML = '';
+              tbody?.innerHTML = component.createCalendar(datePicker.value, strToday);
+              component.addEvents();
+            }
+          }
+        });
+      }
+    );
+
+    // Drag and drop
+    component.shadowRoot?.querySelectorAll(`#calendar .table--day td span`).forEach((element) => {
+      element.addEventListener('dragover', (ev) => {
+        ev.preventDefault();
+        return false;
+      });
+
+      element.addEventListener('dragenter', (ev) => {
+        ev.preventDefault();
+        element.classList.add('dragover');
+      });
+
+      element.addEventListener('dragleave', (ev) => {
+        ev.preventDefault();
+        element.classList.remove('dragover');
+      });
+
+      element.addEventListener('drop', (ev) => {
+        ev.preventDefault();
+
+        const droppedElement = component.querySelector(`#${ev.dataTransfer.getData('text')}`);
+        const td = element.closest('td');
+        const datetime = element.getAttribute('datetime');
+
+        element.classList.remove('dragover');
+
+        // Add a new slot to te span if needed
+        if (
+          !element.querySelector(
+            `slot[name="${datetime}${td.hasAttribute('data-calendar') ? `-${td.getAttribute('data-calendar').replace('_', '')}]` : ''}]"`
+          )
+        ) {
+          element.insertAdjacentHTML(
+            'beforeEnd',
+            `<slot name="${datetime}${td.hasAttribute('data-calendar') ? `-${td.getAttribute('data-calendar').replace('_', '')}` : ''}" class=""></slot>`
+          );
+        }
+
+        // Update the slot attribute to match the slot the event has been dropped on
+        droppedElement?.setAttribute(
+          'slot',
+          `${datetime}${td.hasAttribute('data-calendar') ? `-${td.getAttribute('data-calendar').replace('_', '')}` : ''}`
+        );
+      });
+    });
+
+    // Watch for the event being resized
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.target.classList.contains('mousedown')) entry.target.classList.add('resizing');
+      }
+    });
+
+    if (component.hasAttribute('data-drag')) {
+      component.querySelectorAll(`button:not([draggable])`).forEach((element) => {
+        element.setAttribute('draggable', 'true');
+        element.addEventListener('dragstart', (ev) => {
+          ev.dataTransfer.setData('text', ev.target.id); // save the id for when dropped
+        });
+
+        // set onbserver
+        resizeObserver.observe(element);
+
+        element.addEventListener('mousedown', (ev) => {
+          element.classList.add('mousedown');
+        });
+
+        element.addEventListener('click', (ev) => {
+          if (element.classList.contains('resizing')) {
+            ev.stopPropagation();
+            ev.stopImmediatePropagation();
+
+            element.classList.remove('mousedown');
+            element.classList.remove('resizing');
+
+            // Work out the evnt length in hours and set the height
+            const span = this.shadowRoot.querySelector(`span[datetime="${element.getAttribute('datetime')}"]`);
+            const spanStyles = window.getComputedStyle(span);
+            const hours =
+              Math.round(parseInt(element.style.height) / parseInt(spanStyles.getPropertyValue('height'))) / 4;
+
+            element.setAttribute('data-hours', hours);
+            element.style.setProperty('--event-height', `${hours * (1.09375 * 4)}rem`);
+
+            element.style.height = '';
+
+            // to do dispatch event
+          }
+        });
+      });
+    }
+
+    component.querySelectorAll(`button`).forEach((element) => {
+      element.addEventListener('contextmenu', (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+      });
+    });
+
+    component.shadowRoot?.querySelectorAll(`.month-wrapper > table > tbody > tr > td`).forEach((element) => {
+      element.addEventListener('contextmenu', (event) => {
+        event.preventDefault();
+
+        const customEvent = new CustomEvent('right-click', {
+          detail: {
+            clientX: event.clientX,
+            clientY: event.clientY,
+            element: element,
+            datetime: element.querySelector('time').getAttribute('datetime'),
+          },
+        });
+
+        console.log(element);
+        this.dispatchEvent(customEvent);
+      });
+    });
+  }
+
+  paginateDate(direction, view, currentDate): string {
+    if (view == 'month' || view == 'list') {
+      const selectedDate = new Date(currentDate);
+
+      if (direction == 'next') selectedDate.setMonth(selectedDate.getMonth() + 1);
+      else selectedDate.setMonth(selectedDate.getMonth() - 1);
+
+      const month = selectedDate.getMonth() + 1;
+      const year = selectedDate.getFullYear();
+
+      const strNextMonth = `${year}-${String(month).padStart(2, '0')}-01`;
+
+      return strNextMonth;
+    } else if (view == 'week') {
+      //const selectedDate = new Date(currentDate);
+      const monday = this.setToMonday(new Date(currentDate));
+
+      if (direction == 'next') monday.setDate(monday.getDate() + 7);
+      else monday.setDate(monday.getDate() - 7);
+
+      const date = monday.getDate();
+      const month = monday.getMonth() + 1;
+      const year = monday.getFullYear();
+      const strNextWeek = `${year}-${String(month).padStart(2, '0')}-${String(date).padStart(2, '0')}`;
+
+      return strNextWeek;
+    } else if (view == 'year') {
+      const selectedDate = new Date(currentDate);
+
+      if (direction == 'next') selectedDate.setYear(selectedDate.getFullYear() + 1);
+      else selectedDate.setYear(selectedDate.getFullYear() - 1);
+
+      const year = selectedDate.getFullYear();
+      const month = selectedDate.getMonth() + 1;
+
+      const strNextMonth = `${year}-${String(month).padStart(2, '0')}-01`;
+
+      return strNextMonth;
+    }
+
+    const nextDay = new Date(currentDate);
+
+    if (direction == 'next') nextDay.setDate(nextDay.getDate() + 1);
+    else nextDay.setDate(nextDay.getDate() - 1);
+
+    const date = nextDay.getDate();
+    const month = nextDay.getMonth() + 1;
+    const year = nextDay.getFullYear();
+    const strNextDay = `${year}-${String(month).padStart(2, '0')}-${String(date).padStart(2, '0')}`;
+
+    return strNextDay;
+  }
+
+  setWeekDay(): void {
+    this.shadowRoot?.querySelectorAll('.out-of-hours').forEach((element) => {
+      element.classList.remove('out-of-hours');
+    });
+
+    const startTime = parseInt(this.shadowRoot?.querySelector('#start-time').value.split(':')[0]);
+    const endTime = parseInt(this.shadowRoot?.querySelector('#end-time').value.split(':')[0]);
+
+    this.shadowRoot?.querySelectorAll('[data-hour]').forEach((element) => {
+      const hour = parseInt(element.getAttribute('data-hour'));
+
+      if (hour < startTime) element.classList.add('out-of-hours');
+
+      if (hour >= endTime) element.classList.add('out-of-hours');
+    });
+  }
+
+  scrollIntoPlace(): void {
+    const fs = parseInt(window.getComputedStyle(document.body).getPropertyValue('font-size'));
+    const startTime = parseInt(this.shadowRoot?.querySelector('#start-time').value.split(':')[0]);
+    const scrollPos = startTime * (4.5 * fs);
+    const viewPicker = this.shadowRoot?.querySelector(`#view`);
+    const wrapper = this.shadowRoot.querySelector('.calendar__wrapper');
+
+    // scroll
+    if (viewPicker.value == 'week')
+      wrapper.scrollTo(0, scrollPos); // TO DO work out how much to scroll by
+    else if (viewPicker.value == 'day') {
+      wrapper.scrollTo(0, scrollPos); // TO DO work out how much to scroll by
+    }
+  }
+
+  setupSettings(): void {
+    const settingsButton = this.shadowRoot?.querySelector('#settings-button');
+    const settingsDialog = this.shadowRoot?.querySelector('#settings');
+
+    // Setup the pre-defined attributes and display the form elements to match
+    if (this.hasAttribute('data-hide-weekends')) settingsDialog.querySelector('#weekends-no').checked = true;
+    else settingsDialog.querySelector('#weekends-yes').checked = true;
+
+    if (this.hasAttribute('data-start-time'))
+      settingsDialog.querySelector('#start-time').value = this.getAttribute('data-start-time');
+    else this.setAttribute('data-start-time', settingsDialog.querySelector('#start-time').value);
+
+    if (this.hasAttribute('data-end-time'))
+      settingsDialog.querySelector('#end-time').value = this.getAttribute('data-end-time');
+    else this.setAttribute('data-end-time', settingsDialog.querySelector('#end-time').value);
+
+    // open dialog
+    settingsButton?.addEventListener('click', () => {
+      settingsDialog.showModal();
+      settingsDialog.focus();
+
+      const customEvent = new CustomEvent('open-settings');
+
+      this.dispatchEvent(customEvent);
+    });
+
+    // On clicking the save button, adjust the data attributes
+    settingsDialog?.addEventListener('click', (event) => {
+      if (event && event.target.matches('button')) {
+        if (event.target.matches('.btn-primary')) {
+          if (settingsDialog.querySelector('#weekends-no:checked')) this.setAttribute('data-hide-weekends', 'true');
+          else this.removeAttribute('data-hide-weekends');
+
+          this.setAttribute('data-start-time', settingsDialog.querySelector('#start-time').value);
+          this.setAttribute('data-end-time', settingsDialog.querySelector('#end-time').value);
+
+          this.setWeekDay();
+
+          const customEvent = new CustomEvent('save-settings');
+          this.dispatchEvent(customEvent);
+        }
+
+        const customEvent = new CustomEvent('close-settings');
+        this.dispatchEvent(customEvent);
+
+        settingsDialog.close();
+      }
+    });
+  }
+
+  setTime(): void {
+    if (!this.hasAttribute('data-time')) {
+      const today = new Date();
+
+      const hour = today.getHours();
+      const minute = today.getMinutes();
+      const time = `${hour}:${minute}`;
+
+      this.setAttribute('data-time', time);
+    }
+
+    if (this.hasAttribute('data-time')) {
+      const time = this.getAttribute('data-time');
+      const hour = parseInt(time.split(':')[0]);
+      const minute = parseInt(time.split(':')[1]);
+
+      this.shadowRoot?.querySelectorAll(`[data-hour="${hour}"]`).forEach((element) => {
+        element.setAttribute('data-time', time);
+        element.classList.add('column-header');
+        element.closest('tr')?.style.setProperty('--minute-pos', (minute / 60) * 100 + '%');
+      });
+    }
+  }
+
+  getYearView(selectedDate, today, sundayFirst: false): string {
+    let yearViewStr = '';
+
+    for (let i = 0; i < 12; i++) {
+      console.log(selectedDate);
+      const selectedDateObj = new Date(selectedDate);
+      const selectedYear = selectedDateObj.getFullYear();
+      const selectedFormattedDate = `${selectedYear}-${String(i + 1).padStart(2, '0')}-01`;
+
+      yearViewStr += `<div class='month-wrapper'>
+        <time class="column-header">${this.monthArray[i]}</time>
+        <table>
+          <thead>
+            ${this.createThead(sundayFirst)}
+          </thead>
+          <tbody>
+            ${this.createCalendar(selectedFormattedDate, today, sundayFirst)}
+          </tbody>
+        </table>
+      </div>`;
+    }
+
+    return yearViewStr;
+  }
+
+  connectedCallback(): void {
+    // To to transform the below into variables of component to make more re-usable
+    const title = this.shadowRoot?.querySelector('.calendar__title');
+    const tbody = this.shadowRoot?.querySelector('#calendar > table > tbody');
+    const thead = this.shadowRoot?.querySelector('#calendar > table > thead');
+    //const tbodySplit = this.shadowRoot?.querySelector('#split > table > tbody');
+    //const theadSplit = this.shadowRoot?.querySelector('#split > table > thead');
+    const weekViewHeader = this.shadowRoot?.querySelector('#week-view-header > table > tbody');
+    const yearView = this.shadowRoot?.querySelector('#year-view');
+    const datePicker = this.shadowRoot?.querySelector(`#date`);
+    const viewPicker = this.shadowRoot?.querySelector(`#view`);
+    const todayButton = this.shadowRoot?.querySelector('#today-button');
+    const filtersButton = this.shadowRoot?.querySelector('#filters-button');
+    const prevButton = this.shadowRoot?.querySelector('#prev-button');
+    const nextButton = this.shadowRoot?.querySelector('#next-button');
+    const sundayFirst = this.hasAttribute('data-sunday-first');
+
+    const splitButton = this.shadowRoot?.querySelector(`[name="split"]`);
+
+    // set the table head - starting by monday by default but can be changed to sunday
+    thead?.innerHTML = this.createThead(sundayFirst);
+    //theadSplit?.innerHTML = this.createThead(sundayFirst);
+
+    // Get a formatted version of todays date
+    const today = new Date();
+    const date = today.getDate();
+    const month = today.getMonth();
+    const year = today.getFullYear();
+    const strToday = `${year}-${String(month + 1).padStart(2, '0')}-${String(date).padStart(2, '0')}`;
+
+    datePicker.value = strToday;
+
+    // Setup the view, month being default
+    if (this.hasAttribute('data-view')) viewPicker.value = this.getAttribute('data-view');
+    else {
+      this.setAttribute('data-view', 'month');
+      viewPicker.value = 'month';
+    }
+
+    if (this.hasAttribute('data-views')) viewPicker?.setAttribute('data-views', this.getAttribute('data-views'));
+
+    // Create the calendars
+    if (this.hasAttribute('data-calendars')) {
+      this.calendars = this.getAttribute('data-calendars').split(',');
+
+      this.calendars.forEach((item, index) => {
+        this.calendars[index] = item.trim();
+      });
+    }
+
+    // Setup the settings dialog
+    this.setupSettings();
+
+    // Setup the calendar then adjust and add events
+    title?.innerHTML = this.getTitle(strToday, viewPicker.value);
+
+    const calendarHtml = this.createCalendar(strToday, strToday, sundayFirst);
+    tbody?.innerHTML = calendarHtml;
+    //tbodySplit?.innerHTML = calendarHtml;
+    weekViewHeader?.innerHTML = calendarHtml;
+
+    if (viewPicker.value == 'year') {
+      yearView?.innerHTML = this.getYearView(datePicker.value, strToday, sundayFirst);
+      tbody?.innerHTML = '';
+    }
+
+    this.addEvents();
+    this.addJSEvents(this);
+    this.setWeekDay(); // Working hours
+    this.setTime(); // Month and day view has a current time indicator
+    this.scrollIntoPlace(); // Scroll into place - month and day view needs have the weekday hours in place
+
+    // #region Add events for the basic top controls
+
+    // Remove the slot attribute on selected days when in split mode
+    splitButton?.addEventListener('change', () => {
+      if (splitButton.checked) {
+        Array.from(this.querySelectorAll(`[slot^="${datePicker.value}"]`)).forEach((button) => {
+          button.setAttribute('data-slot', button.getAttribute('slot'));
+          button.removeAttribute('slot');
+        });
+      } else {
+        Array.from(this.querySelectorAll(`[data-slot]`)).forEach((button) => {
+          button.setAttribute('slot', button.getAttribute('data-slot'));
+        });
+      }
+    });
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      const splitButtonDisplayed = window.getComputedStyle(splitButton?.parentElement, null).display;
+      if (splitButtonDisplayed == 'none') {
+        Array.from(this.querySelectorAll(`[data-slot]`)).forEach((button) => {
+          button.setAttribute('slot', button.getAttribute('data-slot'));
+        });
+        splitButton.checked = false;
+      }
+    });
+
+    resizeObserver.observe(this);
+
+    viewPicker?.addEventListener('change', () => {
+      title?.innerHTML = this.getTitle(datePicker.value, viewPicker.value);
+      this.setAttribute('data-view', viewPicker.value);
+
+      if (viewPicker.value == 'week') {
+        Array.from(this.querySelectorAll(`.allday-event`)).forEach((button) => {
+          button.setAttribute('slot', button.getAttribute('slot') + '-header');
+        });
+      } else {
+        Array.from(this.querySelectorAll(`.allday-event`)).forEach((button) => {
+          button.setAttribute('slot', button.getAttribute('slot')?.replace('-header', ''));
+        });
+      }
+
+      if (viewPicker.value == 'week' || viewPicker.value == 'day') this.scrollIntoPlace();
+
+      if (viewPicker.value != 'month') {
+        Array.from(this.querySelectorAll(`[data-slot^="${datePicker.value}"]`)).forEach((button) => {
+          button.setAttribute('slot', button.getAttribute('data-slot'));
+        });
+      }
+
+      if (viewPicker.value == 'year') {
+        yearView?.innerHTML = this.getYearView(datePicker.value, strToday, sundayFirst);
+        tbody?.innerHTML = '';
+        this.addEvents();
+        this.addJSEvents(this);
+        this.setWeekDay(); // Working hours
+        this.setTime(); // Month and day view has a current time indicator
+        this.scrollIntoPlace();
+      } else if (tbody?.innerHTML == '') {
+        yearView?.innerHTML = '';
+        tbody?.innerHTML = this.createCalendar(datePicker.value, strToday);
+        this.addEvents();
+        this.addJSEvents(this);
+        this.setWeekDay(); // Working hours
+        this.setTime(); // Month and day view has a current time indicator
+        this.scrollIntoPlace();
+      }
+
+      const customEvent = new CustomEvent('change-view', {
+        detail: {
+          view: viewPicker.value,
+          date: datePicker.value,
+        },
+      });
+
+      this.dispatchEvent(customEvent);
+    });
+
+    function resetCalendar(component): void {
+      if (viewPicker.value == 'year') {
+        yearView?.innerHTML = component.getYearView(datePicker.value, strToday, sundayFirst);
+        tbody?.innerHTML = '';
+        component.addEvents();
+        component.addJSEvents(component);
+        component.setWeekDay(); // Working hours
+        component.setTime(); // Month and day view has a current time indicator
+      } else {
+        const calendarHtml = component.createCalendar(datePicker.value, strToday);
+        tbody?.innerHTML = calendarHtml;
+        //tbodySplit?.innerHTML = calendarHtml;
+        weekViewHeader?.innerHTML = calendarHtml;
+
+        component.addEvents();
+        component.addJSEvents(component);
+        component.setWeekDay();
+        component.setTime();
+      }
+    }
+
+    function updateCalendar(component): void {
+      Array.from(component.shadowRoot.querySelectorAll('.selected')).forEach((element) => {
+        element.classList.remove('selected');
+      });
+
+      Array.from(
+        component.shadowRoot.querySelectorAll(
+          `td:has(time[datetime="${datePicker.value}"]):not(.prev-month, .next-month)`
+        )
+      ).forEach((element) => {
+        element.classList.add('selected');
+      });
+    }
+
+    datePicker?.addEventListener('change', () => {
+      title?.innerHTML = this.getTitle(datePicker.value, viewPicker.value);
+
+      if (this.shadowRoot.querySelector(`td:has(time[datetime="${datePicker.value}"]):not(.prev-month, .next-month)`))
+        updateCalendar(this);
+      else resetCalendar(this);
+
+      const customEvent = new CustomEvent('change-date', {
+        detail: {
+          view: viewPicker.value,
+          date: datePicker.value,
+        },
+      });
+
+      this.dispatchEvent(customEvent);
+    });
+
+    filtersButton?.addEventListener('click', () => {
+      const customEvent = new CustomEvent('open-filters');
+      this.dispatchEvent(customEvent);
+    });
+
+    // HTML Observer
+    const htmlUpdated = (mutationList: any, observer: any): void => {
+      observer.disconnect();
+
+      console.log(this.pauseObserver);
+
+      if (this.pauseObserver == false) {
+        for (const mutation of mutationList) {
+          if (
+            mutation.type == 'characterData' ||
+            (mutation.type == 'childList' && mutation.addedNodes.length) ||
+            mutation.type === 'attributes'
+          ) {
+            //resetCalendar(this);
+            this.addEvents();
+          }
+        }
+      }
+
+      observer.observe(this, { childList: true, characterData: true, subtree: true, attributes: true });
+    };
+
+    const observer = new MutationObserver(htmlUpdated);
+    observer.observe(this, { childList: true, characterData: true, subtree: true, attributes: true });
+
+    todayButton?.addEventListener('click', () => {
+      datePicker.value = strToday;
+      title?.innerHTML = this.getTitle(datePicker.value, viewPicker.value);
+
+      if (this.shadowRoot.querySelector(`td:has(time[datetime="${datePicker.value}"]):not(.prev-month, .next-month)`))
+        updateCalendar(this);
+      else resetCalendar(this);
+
+      const customEvent = new CustomEvent('change-date-today', {
+        detail: {
+          view: viewPicker.value,
+          date: datePicker.value,
+        },
+      });
+
+      this.dispatchEvent(customEvent);
+    });
+
+    prevButton?.addEventListener('click', () => {
+      datePicker.value = this.paginateDate('prev', viewPicker.value, datePicker.value);
+      title?.innerHTML = this.getTitle(datePicker.value, viewPicker.value);
+
+      if (this.shadowRoot.querySelector(`td:has(time[datetime="${datePicker.value}"]):not(.prev-month, .next-month)`))
+        updateCalendar(this);
+      else resetCalendar(this);
+
+      const customEvent = new CustomEvent('change-date-previous', {
+        detail: {
+          view: viewPicker.value,
+          date: datePicker.value,
+        },
+      });
+
+      this.dispatchEvent(customEvent);
+    });
+
+    nextButton?.addEventListener('click', () => {
+      datePicker.value = this.paginateDate('next', viewPicker.value, datePicker.value);
+      title?.innerHTML = this.getTitle(datePicker.value, viewPicker.value);
+
+      console.log(datePicker.value);
+
+      if (this.shadowRoot.querySelector(`td:has(time[datetime="${datePicker.value}"]):not(.prev-month, .next-month)`))
+        updateCalendar(this);
+      else resetCalendar(this);
+
+      const customEvent = new CustomEvent('change-date-next', {
+        detail: {
+          view: viewPicker.value,
+          date: datePicker.value,
+        },
+      });
+
+      this.dispatchEvent(customEvent);
+    });
+    // #endregion
+
+    // TODO
+    trackComponent(this, 'iam-calendar', [
+      'open-filters',
+      'change-view',
+      'change-date',
+      'change-date-today',
+      'change-date-previous',
+      'change-date-next',
+      'open-settings',
+      'close-settings',
+      'save-settings',
+    ]);
+  }
+
+  static get observedAttributes(): any {
+    return ['data-calendars', 'data-view'];
+  }
+
+  attributeChangedCallback(attrName, oldVal, newVal): void {
+    this.pauseObserver = true;
+
+    switch (attrName) {
+      case 'data-calendars': {
+        if (oldVal != newVal) {
+          const tbody = this.shadowRoot?.querySelector('#calendar > table > tbody');
+          const weekViewHeader = this.shadowRoot?.querySelector('#week-view-header > table > tbody');
+          const datePicker = this.shadowRoot?.querySelector(`#date`);
+
+          // Get a formatted version of todays date
+          const today = new Date();
+          const date = today.getDate();
+          const month = today.getMonth();
+          const year = today.getFullYear();
+          const strToday = `${year}-${String(month + 1).padStart(2, '0')}-${String(date).padStart(2, '0')}`;
+
+          if (this.hasAttribute('data-calendars')) {
+            this.calendars = this.getAttribute('data-calendars').split(',');
+
+            this.calendars.forEach((item, index) => {
+              this.calendars[index] = item.trim();
+            });
+          }
+
+          const calendarHtml = this.createCalendar(datePicker.value, strToday);
+          tbody?.innerHTML = calendarHtml;
+          weekViewHeader?.innerHTML = calendarHtml;
+
+          this.addEvents();
+          this.addJSEvents(this);
+          this.setWeekDay();
+          this.setTime();
+        }
+        break;
+      }
+      case 'data-view': {
+        if (oldVal != newVal) {
+          const viewPicker = this.shadowRoot?.querySelector(`#view`);
+
+          viewPicker.value = newVal;
+          viewPicker.dispatchEvent(new Event('change'));
+        }
+        break;
+      }
+    }
+
+    setTimeout(() => {
+      this.pauseObserver = false;
+    }, '500');
+  }
+}
+
+export default iamCalendar;