{"id":117,"date":"2019-02-26T22:49:17","date_gmt":"2019-02-26T22:49:17","guid":{"rendered":"http:\/\/buki.io\/?p=117"},"modified":"2019-02-27T00:15:29","modified_gmt":"2019-02-26T23:15:29","slug":"building-a-caldav-client-with-web-components","status":"publish","type":"post","link":"http:\/\/buki.io\/?p=117","title":{"rendered":"Building a CalDAV client with web components"},"content":{"rendered":"

Some steps and pitfalls on my way creating a CalDAV client with webcomponents
\n1. If you want to use moment.js include it this way
\nimport moment from ‚moment‘; window.moment = moment;\u00a0
\n2. The template for the \u201eREPORT\u201c request should look like this, e.g. to get the events for a time range. Mind, there MUST NOT BE any whitespace between the backtick and the start of the xml declaration.
\nconst query = (start,end) => ` \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/d:prop> \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/c:comp-filter> \u00a0 \u00a0 <\/c:comp-filter> \u00a0 <\/c:filter> <\/c:calendar-query> `;
\n3. I had to start Chrome like this to get rid of CORS issues
\nopen -a Google Chrome –args –disable-web-security –user-data-dir=\u201e“
\n4. The fetch request should look like this
\n \u00a0\tlet start = moment().subtract(5,’days‘); \u00a0 \u00a0 \u00a0 \u00a0 let end = moment(); \u00a0 \u00a0 \u00a0 \u00a0 let startString = \u00a0start.format(„YYYYMMDD[T]000000[Z]“); \u00a0 \u00a0 \u00a0 \u00a0 let endString = end.format(„YYYYMMDD[T]000000[Z]“); \u00a0 \u00a0 \u00a0 \u00a0 let myHeaders = new Headers(); \u00a0 \u00a0 \u00a0 \u00a0 myHeaders.append(„DEPTH“,“1″); \u00a0 \u00a0 \u00a0 \u00a0 myHeaders.append(„Authorization“,“Basic “ + authentication);
\n\u00a0 \u00a0 \u00a0 \u00a0 console.log(‚caldaving‘, startString,endString)
\n\u00a0 \u00a0 \u00a0 \u00a0 fetch(url,{ \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 method: „REPORT“, \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 headers : myHeaders, \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 body : query(startString,endString) \u00a0 \u00a0 \u00a0 \u00a0 }) \u00a0 \u00a0 \u00a0 \u00a0 .then(response => { \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log(„reso“, response) \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 let xml = response.text(); \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log(‚Got appointments‘, xml); \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 return xml; \u00a0 \u00a0 \u00a0 \u00a0 }).then(xml => console.log(‚xml‘,xml))
\n5. To get the authentication as base64 use \u201e echo -n user:password | base64\u201c Mind the \u201e-n\u201c otherwise you get a line break at the end!<\/p>\n","protected":false},"excerpt":{"rendered":"

Some steps and pitfalls on my way creating a CalDAV client with webcomponents 1. If you want to use moment.js include it this way import moment from ‚moment‘; window.moment = moment;\u00a0 2. The template for the \u201eREPORT\u201c request should look like this, e.g. to get the events for a time range. Mind, there MUST NOT … <\/p>\n

Continue reading „Building a CalDAV client with web components“<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true},"categories":[3],"tags":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p7N2pi-1T","_links":{"self":[{"href":"http:\/\/buki.io\/index.php?rest_route=\/wp\/v2\/posts\/117"}],"collection":[{"href":"http:\/\/buki.io\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/buki.io\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/buki.io\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/buki.io\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=117"}],"version-history":[{"count":0,"href":"http:\/\/buki.io\/index.php?rest_route=\/wp\/v2\/posts\/117\/revisions"}],"wp:attachment":[{"href":"http:\/\/buki.io\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/buki.io\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=117"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/buki.io\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}