caldav-client

standalone CalDAV web client
git clone https://git.ce9e.org/caldav-client.git

commit
f7f68cb09c63730884c526672a41218bfa3337f7
parent
9c4b3e5c86a95809470955a9632ba405aa716331
Author
Tobias Bengfort <tobias.bengfort@posteo.de>
Date
2022-02-04 17:05
add calendars sidebar

Diffstat

M index.html 1 +
M main.js 41 ++++++++++++++++++++++++++++++++++-------
M style.css 11 +++++++++++

3 files changed, 46 insertions, 7 deletions


diff --git a/index.html b/index.html

@@ -8,6 +8,7 @@
    8     8     <link rel="stylesheet" type="text/css" href="style.css">
    9     9 </head>
   10    10 <body>
   -1    11     <div class="calendars"></div>
   11    12     <div class="calendar"></div>
   12    13 
   13    14     <script src="node_modules/fullcalendar-scheduler/main.js"></script>

diff --git a/main.js b/main.js

@@ -24,13 +24,40 @@ calendar.render();
   24    24 
   25    25 dav.getCalendars(config.rootUrl).then(calendars => {
   26    26     calendars.forEach(cal => {
   27    -1         calendar.addEventSource({
   28    -1             id: cal.href,
   29    -1             color: cal.color,
   30    -1             editable: true,
   31    -1             events: function(info, success, error) {
   32    -1                 dav.getEvents(cal.href, info).then(success, error);
   33    -1             },
   -1    27         var source = null;
   -1    28 
   -1    29         var el = document.createElement('label');
   -1    30         var checkbox = document.createElement('input');
   -1    31         var circle = document.createElement('span');
   -1    32         checkbox.type = 'checkbox';
   -1    33         checkbox.checked = true;
   -1    34         circle.className = 'fc-daygrid-event-dot';
   -1    35         circle.style.borderColor = cal.color;
   -1    36         el.append(checkbox);
   -1    37         el.append(circle);
   -1    38         el.append(cal.name);
   -1    39         document.querySelector('.calendars').append(el);
   -1    40 
   -1    41         var addSource = function() {
   -1    42             source = calendar.addEventSource({
   -1    43                 id: cal.href,
   -1    44                 color: cal.color,
   -1    45                 editable: true,
   -1    46                 events: function(info, success, error) {
   -1    47                     dav.getEvents(cal.href, info).then(success, error);
   -1    48                 },
   -1    49             });
   -1    50         };
   -1    51 
   -1    52         checkbox.addEventListener('change', function() {
   -1    53             if (source && !checkbox.checked) {
   -1    54                 source.remove();
   -1    55                 source = null;
   -1    56             } else if (!source && checkbox.checked) {
   -1    57                 addSource();
   -1    58             }
   34    59         });
   -1    60 
   -1    61         addSource();
   35    62     });
   36    63 });

diff --git a/style.css b/style.css

@@ -3,6 +3,9 @@ body {
    3     3     box-sizing: border-box;
    4     4     margin: 0;
    5     5     padding: 0.5rem;
   -1     6     display: grid;
   -1     7     grid-template-columns: auto 1fr auto;
   -1     8     grid-gap: 2em;
    6     9 }
    7    10 
    8    11 .fc-icon-chevron-left::before {
@@ -11,3 +14,11 @@ body {
   11    14 .fc-icon-chevron-right::before {
   12    15     content: "\2192";
   13    16 }
   -1    17 
   -1    18 .calendars label {
   -1    19     display: block;
   -1    20     margin-bottom: 0.2em;
   -1    21 }
   -1    22 .calendars .fc-daygrid-event-dot {
   -1    23     display: inline-block;
   -1    24 }