-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
97 lines (91 loc) · 3.84 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!doctype html>
<html lang="en">
<head>
<title>Grapesjs Calendar Component</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs"></script>
<script src="https://unpkg.com/grapesjs-blocks-basic"></script>
<style>
body,
html {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<section id="main">
<div id="gjs"></div>
</section>
<script type="text/javascript">
// Wait for the plugin to be injected by the dev server
window.onload = () => {
window.editor = grapesjs.init({
container: "#gjs",
width: "100%",
height: "98vh",
plugins: ['gjs-blocks-basic', 'grapesjs-calendar-component'],
pluginsOpts: {
'gjs-blocks-basic': {},
'grapesjs-calendar-component': {
aspectRatio: 1.77,
// events: async (info, successCallback, failureCallback) => {
// try {
// let responseJson = await fetch('http://localhost:4000/venue/punam-mahal/events?start=' + info.startStr + '&end=' + info.endStr, {
// method: 'get',
// headers: {
// 'Content-Type': 'application/json',
// }
// })
// let response = await responseJson.json();
// console.log(response)
// successCallback(response)
// // TODO: Change punam-mahal to actual slug placeholder from context
// // successCallback(response.data)
// } catch (error) {
// console.log(error)
// failureCallback(error?.response)
// }
// // failureCallback()
// },
events: [
{
title: 'event1',
start: '2024-02-02T16:30:00',
end: '2024-02-02T20:30:00'
},
{
title: 'event2',
start: '2024-02-05T19:50',
end: '2024-02-07'
},
{
title: 'event3',
start: '2010-01-09T12:30:00',
allDay: false // will make the time show
}
],
eventContent: (info) => {
const title = info.event.title
const start = info.event.start
const end = info.event.end
return { html: `<span data-tooltip=${title}>${dayjs(start).format("hh:mm A")} - ${title}</span>` }
},
},
},
canvas: {
scripts: [
"https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js",
"https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js",
],
styles: [
"https://unpkg.com/css-tooltip"
]
},
});
}
</script>
</body>
</html>