- commit
- 155eaf152e7374663157e32b304c920accd7e146
- parent
- f7f68cb09c63730884c526672a41218bfa3337f7
- Author
- Tobias Bengfort <tobias.bengfort@posteo.de>
- Date
- 2022-02-04 17:07
add form sidebar
Diffstat
| M | index.html | 25 | +++++++++++++++++++++++++ |
| M | main.js | 74 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| M | style.css | 11 | +++++++++++ |
3 files changed, 110 insertions, 0 deletions
diff --git a/index.html b/index.html
@@ -10,6 +10,31 @@ 10 10 <body> 11 11 <div class="calendars"></div> 12 12 <div class="calendar"></div> -1 13 <form class="form" hidden> -1 14 <label> -1 15 <span data-translate>Title</span> -1 16 <input type="text" name="title" required> -1 17 </label> -1 18 <label> -1 19 <input type="checkbox" name="allday"> -1 20 <span data-translate>All day</span> -1 21 </label> -1 22 <label> -1 23 <span data-translate>Start</span> -1 24 <input type="datetime-local" name="start" required> -1 25 </label> -1 26 <label> -1 27 <span data-translate>End</span> -1 28 <input type="datetime-local" name="end"> -1 29 </label> -1 30 <label> -1 31 <span data-translate>Calendar</span> -1 32 <select name="calendar" required></select> -1 33 </label> -1 34 <button name="button" value="save" data-translate>Save</button> -1 35 <button name="button" value="delete" data-translate>Delete</button> -1 36 <button name="button" value="cancel" data-translate>Cancel</button> -1 37 </form> 13 38 14 39 <script src="node_modules/fullcalendar-scheduler/main.js"></script> 15 40 <script src="node_modules/fullcalendar-scheduler/locales/de.js"></script>
diff --git a/main.js b/main.js
@@ -1,6 +1,72 @@ 1 1 import * as config from './config.js'; 2 2 import * as dav from './dav.js'; 3 3 -1 4 var selectedEvent = null; -1 5 var form = document.querySelector('form'); -1 6 -1 7 var openForm = function(event) { -1 8 form.reset(); -1 9 form.title.value = event.title; -1 10 form.allday.checked = event.allDay; -1 11 form.start.value = ICAL.Time.fromJSDate(event.start).toString(); -1 12 if (event.end) { -1 13 form.end.value = ICAL.Time.fromJSDate(event.end).toString(); -1 14 } -1 15 form.calendar.value = event.source.id; -1 16 selectedEvent = event; -1 17 form.hidden = false; -1 18 calendar.render(); -1 19 }; -1 20 -1 21 var closeForm = function() { -1 22 selectedEvent = null; -1 23 form.hidden = true; -1 24 form.reset(); -1 25 calendar.render(); -1 26 }; -1 27 -1 28 form.addEventListener('submit', function(e) { -1 29 e.preventDefault(); -1 30 -1 31 if (e.submitter.value === 'delete') { -1 32 if (!confirm('Are you sure you want to delete this?')) { -1 33 return; -1 34 } -1 35 calendar.getEvents() -1 36 .filter(rel => rel.groupId === selectedEvent.groupId) -1 37 .forEach(rel => rel.remove()); -1 38 dav.deleteEvent(selectedEvent); -1 39 } else if (e.submitter.value === 'save') { -1 40 selectedEvent.setProp('title', form.title.value); -1 41 selectedEvent.setDates( -1 42 form.start.value, -1 43 form.end.value || null, -1 44 {allDay: form.allday.checked} -1 45 ); -1 46 -1 47 if (form.calendar.value == selectedEvent.source.id) { -1 48 dav.commitEvent(selectedEvent); -1 49 } else { -1 50 var newSource = calendar.getEventSourceById(form.calendar.value); -1 51 var newData; -1 52 -1 53 calendar.getEvents() -1 54 .filter(rel => rel.groupId === selectedEvent.groupId) -1 55 .forEach(rel => { -1 56 var plain = rel.toPlainObject(); -1 57 plain.groupId = plain.groupId.replace(selectedEvent.source.id, newSource.id); -1 58 rel.remove(); -1 59 newData = calendar.addEvent(plain, newSource); -1 60 }); -1 61 -1 62 dav.commitEvent(newData); -1 63 dav.deleteEvent(selectedEvent); // CAREFUL: must be called before selectedEvent is reset -1 64 } -1 65 } -1 66 -1 67 closeForm(); -1 68 }); -1 69 4 70 var calendar = new FullCalendar.Calendar( 5 71 document.querySelector('.calendar'), 6 72 { @@ -9,6 +75,7 @@ var calendar = new FullCalendar.Calendar( 9 75 scrollTime: '07:00', 10 76 nowIndicator: true, 11 77 weekNumberCalculation: 'ISO', -1 78 eventClick: info => openForm(info.event), 12 79 eventDrop: info => dav.commitEvent(info.event), 13 80 eventResize: info => dav.commitEvent(info.event), 14 81 height: '100%', @@ -38,6 +105,11 @@ dav.getCalendars(config.rootUrl).then(calendars => { 38 105 el.append(cal.name); 39 106 document.querySelector('.calendars').append(el); 40 107 -1 108 var option = document.createElement('option'); -1 109 option.textContent = cal.name; -1 110 option.value = cal.href; -1 111 form.calendar.add(option); -1 112 41 113 var addSource = function() { 42 114 source = calendar.addEventSource({ 43 115 id: cal.href, @@ -52,9 +124,11 @@ dav.getCalendars(config.rootUrl).then(calendars => { 52 124 checkbox.addEventListener('change', function() { 53 125 if (source && !checkbox.checked) { 54 126 source.remove(); -1 127 option.hidden = true; 55 128 source = null; 56 129 } else if (!source && checkbox.checked) { 57 130 addSource(); -1 131 option.hidden = false; 58 132 } 59 133 }); 60 134
diff --git a/style.css b/style.css
@@ -22,3 +22,14 @@ body {
22 22 .calendars .fc-daygrid-event-dot {
23 23 display: inline-block;
24 24 }
-1 25
-1 26 .form label {
-1 27 display: block;
-1 28 margin-bottom: 0.8em;
-1 29 }
-1 30 .form input:not([type="checkbox"]),
-1 31 .form select {
-1 32 box-sizing: border-box;
-1 33 display: block;
-1 34 width: 100%;
-1 35 }