Calendar

  <wc-calendar id="week-calendar" view="week" style="height: 700px; width: 100%"></wc-calendar>
  <script>
    (function() {
      const $calendar = document.getElementById('week-calendar');

      const today = new Date();
      today.setHours(0, 0, 0, 0);

      function addDays(date, days) {
        var result = new Date(date);
        result.setDate(result.getDate() + days);
        return result;
      }

      function addHours(date, hours) {
        var result = new Date(date);
        result.setHours(result.getHours() + hours);
        return result;
      }

      $calendar.events = [
        {
          start: addHours(today, 9),
          end: addHours(today, 11),
          title: 'Team Standup',
        },
        {
          start: addHours(today, 10),
          end: addHours(today, 12),
          title: 'Design Review',
          color: 'red'
        },
        {
          start: addHours(today, 14),
          end: addHours(today, 15),
          title: 'Sprint Planning',
          color: 'green'
        },
        {
          start: addHours(addDays(today, 1), 8),
          end: addHours(addDays(today, 1), 10),
          title: 'Code Review',
        },
        {
          start: addHours(addDays(today, 1), 13),
          end: addHours(addDays(today, 1), 16),
          title: 'Workshop',
          color: 'orange'
        },
        {
          start: addHours(addDays(today, -1), 10),
          end: addHours(addDays(today, -1), 11),
          title: 'Retrospective',
        },
        {
          start: addDays(today, -1),
          end: addDays(today, 2),
          title: 'Conference (multi-day)',
          color: 'blue'
        },
      ];

      $calendar.addEventListener('event-click', function(evt) {
        console.log('Event clicked:', evt.detail);
      });
    })();
  </script>

  <wc-calendar id="month-calendar" view="month" style="height: 700px; width: 100%"></wc-calendar>
  <script>
    (function() {
      const $calendar = document.getElementById('month-calendar');

      const today = new Date();
      today.setHours(0, 0, 0, 0);

      function addDays(date, days) {
        var result = new Date(date);
        result.setDate(result.getDate() + days);
        return result;
      }

      function addHours(date, hours) {
        var result = new Date(date);
        result.setHours(result.getHours() + hours);
        return result;
      }

      $calendar.events = [
        {
          start: addHours(today, 9),
          end: addHours(today, 11),
          title: 'Team Standup',
        },
        {
          start: addDays(today, 2),
          end: addDays(today, 5),
          title: 'Sprint Week',
          color: 'green'
        },
        {
          start: addDays(today, -3),
          end: addDays(today, -1),
          title: 'Training',
          color: 'blue'
        },
        {
          start: addHours(addDays(today, 7), 14),
          end: addHours(addDays(today, 7), 16),
          title: 'All Hands Meeting',
          color: 'red'
        },
        {
          start: addDays(today, 10),
          end: addDays(today, 12),
          title: 'Hackathon',
          color: 'orange'
        },
      ];

      $calendar.addEventListener('event-click', function(evt) {
        console.log('Event clicked:', evt.detail);
      });
    })();
  </script>

  <wc-calendar id="day-calendar" view="day" style="height: 700px; width: 100%"></wc-calendar>
  <script>
    (function() {
      const $calendar = document.getElementById('day-calendar');

      const today = new Date();
      today.setHours(0, 0, 0, 0);

      function addHours(date, hours) {
        var result = new Date(date);
        result.setHours(result.getHours() + hours);
        return result;
      }

      $calendar.events = [
        {
          start: addHours(today, 8),
          end: addHours(today, 9),
          title: 'Morning Standup',
        },
        {
          start: addHours(today, 10),
          end: addHours(today, 12),
          title: 'Focus Time',
          color: 'blue'
        },
        {
          start: addHours(today, 10),
          end: addHours(today, 11),
          title: 'Quick Sync',
          color: 'green'
        },
        {
          start: addHours(today, 13),
          end: addHours(today, 14),
          title: 'Lunch & Learn',
          color: 'orange'
        },
        {
          start: addHours(today, 15),
          end: addHours(today, 17),
          title: 'Code Review Session',
          color: 'red'
        },
      ];

      $calendar.addEventListener('event-click', function(evt) {
        console.log('Event clicked:', evt.detail);
      });
    })();
  </script>