Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
​
    <title>Event Calendar</title>
​
    <link rel="stylesheet" href="https://vkurko.github.io/calendar/global.css?20231021">
​
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.7.0/event-calendar.min.css">
    <script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.7.0/event-calendar.min.js"></script>
​
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</head>
​
<body>
​
<main class="row">
    <div id="ec" class="col"></div>
</main>
  
<div class="modal" tabindex="-1" id="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modal-title"></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="form">
          <div class="mb-3">
            <label for="title" class="col-form-label">Title:</label>
            <input type="text" class="form-control" id="title">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary" form="form" id="save"></button>
      </div>
    </div>
  </div>
</div>
​
​
<script type="text/javascript">
  const modal = new bootstrap.Modal('#modal', {});
  const modalTitle = document.getElementById('modal-title');
  const form = document.getElementById('form');
  const title = document.getElementById('title');
  const save = document.getElementById('save');
  
  let action;
  let event;
  
  const ec = new EventCalendar(document.getElementById('ec'), {
    view: 'timeGridWeek',
    dateClick: function (info) {
      action = 'create';
      event = {start: info.date, end: endDate(info.date)};
      modalTitle.innerText = 'Create appointment';
      title.value = '';
      save.innerText = 'Create';
      modal.show();
    },
    eventClick: function (info) {
      action = 'edit';
      event = info.event;
      modalTitle.innerText = 'Edit appointment';
      title.value = info.event.title;
      save.innerText = 'Save changes';
      modal.show();
    }
  });
  
  form.addEventListener('submit', function (e) {
    e.preventDefault();
    if (action == 'create') {
      ec.addEvent({
        ...event,
        title: title.value
      });
    } else {
      ec.updateEvent({
        ...event,
        title: title.value
      });
    }
    modal.hide();
  });
  
  function endDate(start) {
    const end = new Date(start);
    end.setHours(end.getHours() + 2);
    return end;
  }
    
  document.getElementById('modal').addEventListener('shown.bs.modal', function () {
    title.focus();
  });
</script>
</body>
</html>
 
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers