Last active
December 21, 2018 04:34
-
-
Save joaofnds/7a553fbd3e28042b7a752102290a9214 to your computer and use it in GitHub Desktop.
Simple page that displays first 10 events on a given user schedule
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge" /> | |
| <title>Document</title> | |
| <link | |
| rel="stylesheet" | |
| href="https://unpkg.com/fullcalendar@alpha/dist/fullcalendar.min.css" | |
| /> | |
| </head> | |
| <body> | |
| <div id="calendar"></div> | |
| <script src="https://unpkg.com/fullcalendar@alpha/dist/fullcalendar.min.js"></script> | |
| <script> | |
| const SERVER_URL = ""; | |
| const TOKEN = ""; | |
| let calendar; | |
| async function fetchEvents() { | |
| const response = await fetch(`${SERVER_URL}/schedule-events`, { | |
| headers: { | |
| Authorization: `Bearer ${TOKEN}` | |
| } | |
| }); | |
| return response.json(); | |
| } | |
| async function addEvents() { | |
| const response = await fetchEvents(); | |
| response.data | |
| .map(({ id, attributes: { status, starts_at, ends_at } }) => ({ | |
| id, | |
| title: status, | |
| start: starts_at, | |
| end: ends_at | |
| })) | |
| .forEach(e => calendar.addEvent(e)); | |
| } | |
| // Load fullcalendar | |
| document.addEventListener("DOMContentLoaded", function() { | |
| const calendarEl = document.getElementById("calendar"); | |
| calendar = new FullCalendar.Calendar(calendarEl, { | |
| defaultView: "agendaWeek", | |
| eventClick: function({ event: { id } }) { | |
| console.log(id); | |
| } | |
| }); | |
| addEvents(); | |
| calendar.render(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment