1
+ <html xmlns="http://www.w3.org/1999/xhtml">
2
+ <head>
3
+ <title>Essential Studio for JavaScript : Detail Template</title>
4
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
5
+ <link href="https://cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet" type="text/css"/>
6
+ <link href="https://cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css"/>
7
+ <link href="https://cdn.syncfusion.com/ej2/20.4.38/ej2-calendars/styles/material.css" rel="stylesheet" type="text/css"/>
8
+ <link href="https://cdn.syncfusion.com/ej2/20.4.38/ej2-dropdowns/styles/material.css" rel="stylesheet" type="text/css"/>
9
+ <link href="https://cdn.syncfusion.com/ej2/20.4.38/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css"/>
10
+ <link href="https://cdn.syncfusion.com/ej2/20.4.38/ej2-splitbuttons/styles/material.css" rel="stylesheet" type="text/css"/>
11
+ <link href="https://cdn.syncfusion.com/ej2/20.4.38/ej2-lists/styles/material.css" rel="stylesheet" type="text/css"/>
12
+ <link href="https://cdn.syncfusion.com/ej2/20.4.38/ej2-popups/styles/material.css" rel="stylesheet" type="text/css"/>
13
+ <link href="https://cdn.syncfusion.com/ej2/20.4.38/ej2-navigations/styles/material.css" rel="stylesheet" type="text/css"/>
14
+ <link href="https://cdn.syncfusion.com/ej2/20.4.38/ej2-schedule/styles/material.css" rel="stylesheet" type="text/css"/>
15
+ <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
16
+ </head>
17
+ <body>
18
+ <?php
19
+ // initialize scheduler
20
+ echo '
21
+ <div id="Schedule"></div>
22
+ <script>
23
+ var dataManager = new ej.data.DataManager({
24
+ url: "http://localhost/ej2-php-crud-service/server.php",
25
+ crudUrl: "http://localhost/ej2-php-crud-service/server.php",
26
+ adaptor: new ej.data.UrlAdaptor(),
27
+ crossDomain: true
28
+ });
29
+ var scheduleObj = new ej.schedule.Schedule({
30
+ height: "550px",
31
+ selectedDate: new Date(2020, 9, 20),
32
+ views: ["TimelineDay", "TimelineWeek"],
33
+ allowDragAndDrop: true,
34
+ eventSettings: { dataSource: dataManager },
35
+ group: {
36
+ resources: ["MeetingRoom"]
37
+ },
38
+ resources: [{
39
+ field: "RoomID", title: "Room Type",
40
+ name: "MeetingRoom", allowMultiple: true,
41
+ dataSource: [
42
+ { text: "Jammy", id: 1, color: "#ea7a57", capacity: 20, type: "Conference" },
43
+ { text: "Tweety", id: 2, color: "#7fa900", capacity: 7, type: "Cabin" },
44
+ { text: "Nestle", id: 3, color: "#5978ee", capacity: 5, type: "Cabin" },
45
+ { text: "Phoenix", id: 4, color: "#fec200", capacity: 15, type: "Conference" },
46
+ { text: "Mission", id: 5, color: "#df5286", capacity: 25, type: "Conference" },
47
+ { text: "Hangout", id: 6, color: "#00bdae", capacity: 10, type: "Cabin" },
48
+ { text: "Rick Roll", id: 7, color: "#865fcf", capacity: 20, type: "Conference" },
49
+ { text: "Rainbow", id: 8, color: "#1aaa55", capacity: 8, type: "Cabin" },
50
+ { text: "Swarm", id: 9, color: "#df5286", capacity: 30, type: "Conference" },
51
+ { text: "Photogenic", id: 10, color: "#710193", capacity: 25, type: "Conference" }
52
+ ],
53
+ textField: "text", idField: "id", colorField: "color"
54
+ }],
55
+ });
56
+ scheduleObj.appendTo("#Schedule");
57
+ </script>
58
+ ' ;
59
+ ?>
60
+ </body>
61
+ </html>
0 commit comments