@copoko/space/src/Space/Renderers/Pages/dash/calendar/bodyend.html

CoPoKo Space

<script src="::CDN_NPM::/jquery-ui-dist@1.13.1/jquery-ui.min.js"></script>
<script src="::CDN_NPM::/fullcalendar@5.11.0/main.min.js"></script>
<script>
  $(function () {
    function ini_events(ele) {
      ele.each(function () {
        var eventObject = {
          title: $.trim($(this).text())
        }
        $(this).data('eventObject', eventObject)
        $(this).draggable({
          zIndex: 1070,
          revert: true,
          revertDuration: 0
        })

      })
    }
    ini_events($('#external-events div.external-event'))
    var date = new Date()
    var d = date.getDate(),
      m = date.getMonth(),
      y = date.getFullYear()
    var Calendar = FullCalendar.Calendar;
    var Draggable = FullCalendar.Draggable;
    var containerEl = document.getElementById('external-events');
    var checkbox = document.getElementById('drop-remove');
    var calendarEl = document.getElementById('calendar');
    new Draggable(containerEl, {
      itemSelector: '.external-event',
      eventData: function (eventEl) {
        return {
          title: eventEl.innerText,
          backgroundColor: window.getComputedStyle(eventEl, null).getPropertyValue('background-color'),
          borderColor: window.getComputedStyle(eventEl, null).getPropertyValue('background-color'),
          textColor: window.getComputedStyle(eventEl, null).getPropertyValue('color'),
        };
      }
    });
    window.calendar = new Calendar(calendarEl, {
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
      },
      themeSystem: 'bootstrap',
      events: [],
      editable: true,
      selectable: true,
      droppable: true,
      drop: function (info) {
        console.log("drop", info);
        if (checkbox.checked) {
          info.draggedEl.parentNode.removeChild(info.draggedEl);
          saveDraggableEvent();
        }
      },
      eventDragStop: function (info) {
        console.log("eventDragStop", info);
        saveEventSource();
      },
      eventResizeStop: function (info) {
        console.log("eventResizeStop", info);
        saveEventSource();
      },
      eventReceive: function (info) {
        console.log("eventReceive", info);
        saveEventSource();
      },
      eventClick: function (info) {
        console.log("eventClick", info);
        deleteEvent(info)
      },
      select: function (info) {
        console.log("select", info);
        addSelectEvent(info)
      },
    });
    calendar.render();
    var currColor = '#3c8dbc'
    $('#color-chooser > li > a').click(function (e) {
      e.preventDefault()
      currColor = $(this).css('color')
      $('#add-new-event').css({
        'background-color': currColor,
        'border-color': currColor
      })
    })
    $('#add-new-event').click(function (e) {
      e.preventDefault()
      var val = $('#new-event').val()
      if (val.length == 0) {
        return
      }
      var event = $('<div />')
      event.css({
        'background-color': currColor,
        'border-color': currColor,
        'color': '#fff'
      }).addClass('external-event')
      event.text(val)
      $('#external-events').prepend(event)
      ini_events(event)
      $('#new-event').val('')
      saveDraggableEvent();
    })
    $("#deleteallevents").click(function (e) {
      e.preventDefault()
      Swal.fire({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!'
      }).then((result) => {
        if (result.value) {
          window.calendar.removeAllEvents()
          saveDraggableEvent();
          saveEventSource();
        }
      })
    })
    $("#deletealloldevents").click(function (e) {
      e.preventDefault()
      Swal.fire({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!'
      }).then((result) => {
        if (result.value) {
          window.calendar.getEvents().forEach(function (e) {
            let myday = new Date().getTime()
            if (e.allDay) {
              myday = new Date().getTime() - 60 * 60 * 24 * 1000
            }
            if (e.end) {
              if (e.end.getTime() < myday) {
                e.remove()
              }
            } else {
              if (e.start.getTime() < myday) {
                e.remove()
              }
            }
          })
          saveEventSource();
        }
      })
    })
  })
  fetch("/space/api/calendar/EventSource").then(function (response) {
    return response.json();
  }).then(function (json) {
    console.log(json);
    calendar.addEventSource(json)
  });
  function saveEventSource() {
    setTimeout(function () {
      const data = window.calendar.getEvents()
      fetch("/space/api/calendar/EventSource", {
        method: "POST",
        body: JSON.stringify(data),
        headers: {
          "Content-Type": "application/json"
        }
      }).then(function (response) {
        return response.json();
      }).then(function (json) {
        console.log(json);
      });
    }, 1000);
  }
  function saveDraggableEvent() {
    setTimeout(function () {
      const ele = document.querySelectorAll("#external-events .external-event")
      const data = []
      ele.forEach(function (e) {
        data.push({
          title: e.innerText,
          backgroundColor: window.getComputedStyle(e, null).getPropertyValue('background-color'),
          borderColor: window.getComputedStyle(e, null).getPropertyValue('background-color'),
          textColor: window.getComputedStyle(e, null).getPropertyValue('color'),
        })
      })
      fetch("/space/api/calendar/DraggableEvent", {
        method: "POST",
        body: JSON.stringify(data),
        headers: {
          "Content-Type": "application/json"
        }
      }).then(function (response) {
        return response.json();
      }).then(function (json) {
        console.log(json);
      });
    }, 1000);
  }
  function getDraggableEvent() {
    fetch("/space/api/calendar/DraggableEvent").then(function (response) {
      return response.json();
    }).then(function (json) {
      console.log(json);
      json.forEach(function (e) {
        const event = $('<div />')
        event.css({
          'background-color': e.backgroundColor,
          'border-color': e.borderColor,
          'color': e.textColor,
        }).addClass('external-event')
        event.text(e.title)
        $('#external-events').prepend(event)
      })
    });
  }
  getDraggableEvent()
  function deleteEvent(info) {
    Swal.fire({
      title: 'Are you sure?',
      text: "You won't be able to revert this!",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes, delete it!'
    }).then((result) => {
      if (result.value) {
        window.calendar.getEvents().find(function (e) {
          return e.title == info.event.title && e.start.getTime() == info.event.start.getTime()
        }).remove()
        saveEventSource()
      }
    })
  }
  function addSelectEvent(info) {
    // input
    Swal.fire({
      title: 'Add Event',
      html:
        '<input id="swal-input1" class="swal2-input" placeholder="Title">',
      focusConfirm: false,
      preConfirm: () => {
        return [
          $('#swal-input1').val(),
        ]
      }
    }).then((result) => {
      if (result.value) {
        const [title] = result.value
        window.calendar.addEventSource([
          {
            title: title,
            start: info.start,
            end: info.end,
            allDay: info.allDay,
            backgroundColor: 'rgb(0, 86, 179)',
            borderColor: 'rgb(0, 86, 179)',
          }
        ])
        saveEventSource()
      }
    })
  }
</script>
<style>
  .fc .fc-list-sticky .fc-list-day>* {
    background: unset !important;
  }

  .fc .fc-list-event:hover td {
    background: unset !important;
  }
</style>