digital-card/resources/views/modals/calendar-modal.blade.php

<dialog id="calendar" class="modal">
    <div class="modal-box w-11/12 max-w-5xl">
      <h3 class="text-lg font-bold">Kalendar</h3>
      <div class="flex items-center justify-center py-8 px-4">
          <div class="max-w-sm w-full shadow-lg">
              <div class="md:p-8 p-5 bg-babyblue rounded-t">
                  <div class="flex items-center justify-center">
                      <span  tabindex="0" class="focus:outline-none  text-base font-bold text-gray-800">August 2024</span>
                  </div>
                  <div class="flex items-center justify-between pt-12 overflow-x-auto">
                      <table class="w-full">
                          <thead>
                              <tr>
                                  <th>
                                      <div class="w-full flex justify-center">
                                          <p class="text-base font-medium text-center text-gray-800">Mo</p>
                                      </div>
                                  </th>
                                  <th>
                                      <div class="w-full flex justify-center">
                                          <p class="text-base font-medium text-center text-gray-800">Tu</p>
                                      </div>
                                  </th>
                                  <th>
                                      <div class="w-full flex justify-center">
                                          <p class="text-base font-medium text-center text-gray-800">We</p>
                                      </div>
                                  </th>
                                  <th>
                                      <div class="w-full flex justify-center">
                                          <p class="text-base font-medium text-center text-gray-800">Th</p>
                                      </div>
                                  </th>
                                  <th>
                                      <div class="w-full flex justify-center">
                                          <p class="text-base font-medium text-center text-gray-800">Fr</p>
                                      </div>
                                  </th>
                                  <th>
                                      <div class="w-full flex justify-center">
                                          <p class="text-base font-medium text-center text-gray-800">Sa</p>
                                      </div>
                                  </th>
                                  <th>
                                      <div class="w-full flex justify-center">
                                          <p class="text-base font-medium text-center text-gray-800">Su</p>
                                      </div>
                                  </th>
                              </tr>
                          </thead>
                          <tbody>
                              <tr>
                                  <td class="pt-6">
                                      <div class="px-2 py-2 cursor-pointer flex w-full justify-center"></div>
                                  </td>
                                  <td class="pt-6">
                                      <div class="px-2 py-2 cursor-pointer flex w-full justify-center"></div>
                                  </td>
                                  <td>
                                      <div class="px-2 py-2 cursor-pointer flex w-full justify-center"></div>
                                  </td>
                                  <td class="pt-6">
                                      <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                          <p class="text-base text-gray-500 font-medium">1</p>
                                      </div>
                                  </td>
                                  <td class="pt-6">
                                      <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                          <p class="text-base text-gray-500 font-medium">2</p>
                                      </div>
                                  </td>
                                  <td class="pt-6">
                                      <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                          <p class="text-base text-gray-500">3</p>
                                      </div>
                                  </td>
                                  <td class="pt-6">
                                      <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                          <p class="text-base text-gray-500">4</p>
                                      </div>
                                  </td>
                              </tr>
                              <tr>
                                  <td>
                                      <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                          <p class="text-base text-gray-500 font-medium">5</p>
                                      </div>
                                  </td>
                                  <td>
                                      <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                          <p class="text-base text-gray-500 font-medium">6</p>
                                      </div>
                                  </td>
                                  <td>
                                      <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                          <p class="text-base text-gray-500 font-medium">7</p>
                                      </div>
                                  </td>
                                  <td>
                                    <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                        <p class="text-base text-gray-500 font-medium">8</p>
                                    </div>
                                  </td>
                                  <td>
                                      <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                          <p class="text-base text-gray-500 font-medium">9</p>
                                      </div>
                                  </td>
                                  <td>
                                      <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                          <p class="text-base text-gray-500">10</p>
                                      </div>
                                  </td>
                                  <td>
                                      <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                          <p class="text-base text-gray-500">11</p>
                                      </div>
                                  </td>
                              </tr>
                              <tr>
                                  <td>
                                      <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                          <p class="text-base text-gray-500 font-medium">12</p>
                                      </div>
                                  </td>
                                  <td>
                                      <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                          <p class="text-base text-gray-500 font-medium">13</p>
                                      </div>
                                  </td>
                                  <td>
                                      <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                          <p class="text-base text-gray-500 font-medium">14</p>
                                      </div>
                                  </td>
                                  <td>
                                      <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                          <p class="text-base text-gray-500 font-medium">15</p>
                                      </div>
                                  </td>
                                  <td>
                                      <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                          <p class="text-base text-gray-500 font-medium">16</p>
                                      </div>
                                  </td>
                                  <td>
                                    <div class="w-full h-full">
                                        <div class="flex items-center justify-center w-full rounded-full cursor-pointer">
                                            <a  role="link" tabindex="0" class="focus:outline-none  focus:ring-2 focus:ring-offset-2 focus:ring-indigo-700 focus:bg-indigo-500 hover:bg-indigo-500 text-base w-8 h-8 flex items-center justify-center font-medium text-white bg-indigo-700 rounded-full">17</a>
                                        </div>
                                    </div>
                                  </td>
                                  <td>
                                      <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                          <p class="text-base text-gray-500">18</p>
                                      </div>
                                  </td>
                              </tr>
                              <tr>
                                  <td>
                                      <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                          <p class="text-base text-gray-500 font-medium">19</p>
                                      </div>
                                  </td>
                                  <td>
                                      <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                          <p class="text-base text-gray-500 font-medium">20</p>
                                      </div>
                                  </td>
                                  <td>
                                      <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                          <p class="text-base text-gray-500 font-medium">21</p>
                                      </div>
                                  </td>
                                  <td>
                                      <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                          <p class="text-base text-gray-500 font-medium">22</p>
                                      </div>
                                  </td>
                                  <td>
                                      <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                          <p class="text-base text-gray-500 font-medium">23</p>
                                      </div>
                                  </td>
                                  <td>
                                      <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                          <p class="text-base text-gray-500">24</p>
                                      </div>
                                  </td>
                                  <td>
                                      <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                          <p class="text-base text-gray-500">25</p>
                                      </div>
                                  </td>
                              </tr>
                              <tr>
                                  <td>
                                      <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                          <p class="text-base text-gray-500 font-medium">26</p>
                                      </div>
                                  </td>
                                  <td>
                                      <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                          <p class="text-base text-gray-500 font-medium">27</p>
                                      </div>
                                  </td>
                                  <td>
                                      <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                          <p class="text-base text-gray-500 font-medium">28</p>
                                      </div>
                                  </td>
                                  <td>
                                      <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                          <p class="text-base text-gray-500 font-medium">29</p>
                                      </div>
                                  </td>
                                  <td>
                                      <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                          <p class="text-base text-gray-500 font-medium">30</p>
                                      </div>
                                  </td>
                                  <td>
                                    <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                        <p class="text-base text-gray-500">31</p>
                                    </div>
                                </td>
                              </tr>
                          </tbody>
                      </table>
                  </div>
              </div>
          </div>
      </div>
      <div class="modal-action">
        <form method="dialog" id="closeCalendarForm"></form>
        <button type="button" class="btn bg-babybluedark" id="saveDate">Simpan</button>
        <button type="button" class="btn" id="submitCloseCalendarForm">Tutup</button>
      </div>
    </div>
  </dialog>

  @push('script')
      <script>
        $(document).ready(function() {
            $('#submitCloseCalendarForm').click(function(e) {
                $('#closeCalendarForm').submit();
            });
        });
      </script>

<script>
    function getMobileOperatingSystem() {
        var userAgent = navigator.userAgent || navigator.vendor || window.opera;

        if (/windows phone/i.test(userAgent)) {
            return "Windows Phone";
        }

        if (/android/i.test(userAgent)) {
            return "Android";
        }

        if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
            return "iOS";
        }

        return "unknown";
    }

    document.getElementById('saveDate').addEventListener('click', function () {
        const os = getMobileOperatingSystem();
        console.log("Operating System: " + os);

        const title = 'Majlis Perkahwinan Aliff & Ayuna';
        const startDate = '20240817T110000';
        const endDate = '20240817T160000';
        const details = 'Majlis Resepsi Perkawinan Aliff & Ayuna';
        const location = 'Dewan Jubli Perak Sultan Haji Ahmad Shah, Jalan Teluk Sisek, Kuantan, Pahang';

        if (os === 'iOS') {
            const icsContent = `BEGIN:VCALENDAR
VERSION:2.0
BEGIN:VEVENT
SUMMARY:${title}
DTSTART:${startDate}
DTEND:${endDate}
DESCRIPTION:${details}
LOCATION:${location}
END:VEVENT
END:VCALENDAR`;

            const dataURI = 'data:text/calendar;charset=utf-8,' + encodeURIComponent(icsContent);
            const a = document.createElement('a');
            a.href = dataURI;
            a.download = 'event.ics';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        } else if (os === 'Android') {
            const googleCalendarUrl = `https://calendar.google.com/calendar/render?action=TEMPLATE&text=${encodeURIComponent(title)}&dates=${startDate}/${endDate}&details=${encodeURIComponent(details)}&location=${encodeURIComponent(location)}`;
            window.open(googleCalendarUrl, '_blank');
        } else {
            alert('Your device is not supported for this feature.');
        }
    });

</script>
  @endpush