Skip to content

Commit 3a80ede

Browse files
dcblogdevdcblogdev
committed
initial commit
0 parents  commit 3a80ede

File tree

175 files changed

+68595
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

175 files changed

+68595
-0
lines changed

‎.DS_Store

6 KB
Binary file not shown.

‎api/delete_calendar.php

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<?php
2+
include("../includes/config.php");
3+
4+
if (isset($_POST["id"])) {
5+
$query = "DELETE FROM events WHERE id=:id";
6+
$statement = $connect->prepare($query);
7+
$statement->execute([
8+
':id' => $_POST['id']
9+
]);
10+
}

‎api/insert_calendar.php

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<?php
2+
include("../includes/config.php");
3+
4+
$error = null;
5+
$title = $_POST['title'];
6+
$date = $_POST['date'];
7+
$color = $_POST['color'];
8+
$text_color = $_POST['text_color'];
9+
10+
if ($title == '') {
11+
$error['title'] = 'Title is required';
12+
}
13+
14+
if ($date == '') {
15+
$error['date'] = 'Date is required';
16+
}
17+
18+
if (! isset($error)) {
19+
20+
$start = date('Y-m-d H:i:s', strtotime($date));
21+
$end = date('Y-m-d H:i:s', strtotime($date.' +2 hours'));
22+
23+
$data['success'] = true;
24+
$data['message'] = 'Success!';
25+
26+
//store
27+
$query = "INSERT INTO events (title, start_event, end_event, color, text_color) VALUES (:title, :start, :end, :color, :text_color)";
28+
$statement = $connect->prepare($query);
29+
$statement->execute([
30+
':title' => $title,
31+
':start' => $start,
32+
':end' => $end,
33+
':color' => $color,
34+
':text_color' => $text_color
35+
]);
36+
37+
} else {
38+
39+
$data['success'] = false;
40+
$data['errors'] = $error;
41+
}
42+
43+
echo json_encode($data);

‎api/load_calendar.php

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<?php
2+
include("../includes/config.php");
3+
$data = [];
4+
5+
$query = "SELECT * FROM events ORDER BY id";
6+
$statement = $connect->prepare($query);
7+
$statement->execute();
8+
9+
$result = $statement->fetchAll();
10+
foreach($result as $row) {
11+
$data[] = [
12+
'id' => $row["id"],
13+
'title' => $row["title"],
14+
'start' => $row["start_event"],
15+
'end' => $row["end_event"],
16+
'backgroundColor' => $row["color"],
17+
'textColor' => $row["text_color"]
18+
];
19+
}
20+
21+
echo json_encode($data);

‎api/update_calendar.php

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<?php
2+
include("../includes/config.php");
3+
4+
if (isset($_POST["id"])) {
5+
6+
$query = "UPDATE events SET start_event=:start, end_event=:end WHERE id=:id";
7+
$statement = $connect->prepare($query);
8+
$statement->execute([
9+
':start' => date('Y-m-d H:i:s', strtotime($_POST['start'])),
10+
':end' => date('Y-m-d H:i:s', strtotime($_POST['end'])),
11+
':id' => $_POST['id']
12+
]);
13+
}

‎db.sql

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
CREATE TABLE `events` (
2+
`id` int(11) NOT NULL AUTO_INCREMENT,
3+
`title` text,
4+
`start_event` datetime NOT NULL,
5+
`end_event` datetime NOT NULL,
6+
`color` varchar(191) DEFAULT NULL,
7+
`text_color` varchar(191) DEFAULT NULL,
8+
PRIMARY KEY (`id`)
9+
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

‎includes/config.php

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<?php
2+
$connect = new PDO('mysql:host=localhost;dbname=project1', 'root', '');
3+
$dir = '/';

‎index.php

+240
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
<?php
2+
include("includes/config.php");
3+
?>
4+
<!DOCTYPE html>
5+
<html>
6+
<head>
7+
<title>Calandar</title>
8+
9+
<link href='<?=$dir;?>packages/core/main.css' rel='stylesheet' />
10+
<link href='<?=$dir;?>packages/daygrid/main.css' rel='stylesheet' />
11+
<link href='<?=$dir;?>packages/timegrid/main.css' rel='stylesheet' />
12+
<link href='<?=$dir;?>packages/list/main.css' rel='stylesheet' />
13+
<link href='<?=$dir;?>packages/bootstrap/css/bootstrap.css' rel='stylesheet' />
14+
<link href="<?=$dir;?>packages/jqueryui/custom-theme/jquery-ui-1.10.4.custom.min.css" rel="stylesheet">
15+
<link href='<?=$dir;?>packages/datepicker/datepicker.css' rel='stylesheet' />
16+
<link href='<?=$dir;?>packages/colorpicker/bootstrap-colorpicker.min.css' rel='stylesheet' />
17+
<link href='<?=$dir;?>style.css' rel='stylesheet' />
18+
19+
<script src='<?=$dir;?>packages/core/main.js'></script>
20+
<script src='<?=$dir;?>packages/daygrid/main.js'></script>
21+
<script src='<?=$dir;?>packages/timegrid/main.js'></script>
22+
<script src='<?=$dir;?>packages/list/main.js'></script>
23+
<script src='<?=$dir;?>packages/interaction/main.js'></script>
24+
<script src='<?=$dir;?>packages/jquery/jquery.js'></script>
25+
<script src='<?=$dir;?>packages/jqueryui/jqueryui.min.js'></script>
26+
<script src='<?=$dir;?>packages/bootstrap/js/bootstrap.js'></script>
27+
<script src='<?=$dir;?>packages/datepicker/datepicker.js'></script>
28+
<script src='<?=$dir;?>packages/colorpicker/bootstrap-colorpicker.min.js'></script>
29+
<script src='<?=$dir;?>calendar.js'></script>
30+
<script>
31+
document.addEventListener('DOMContentLoaded', function() {
32+
33+
$('body').on('click', '.datetimepicker', function() {
34+
$(this).not('.hasDateTimePicker').datetimepicker({
35+
controlType: 'select',
36+
changeMonth: true,
37+
changeYear: true,
38+
dateFormat: "dd-mm-yy",
39+
timeFormat: 'HH:mm:ss',
40+
yearRange: "1900:+10",
41+
showOn:'focus',
42+
firstDay: 1
43+
}).focus();
44+
});
45+
46+
$(".colorpicker").colorpicker();
47+
48+
var calendarEl = document.getElementById('calendar');
49+
50+
var calendar = new FullCalendar.Calendar(calendarEl, {
51+
plugins: ['interaction', 'dayGrid', 'timeGrid', 'list'],
52+
header: {
53+
left: 'prev,next today',
54+
center: 'title',
55+
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
56+
},
57+
defaultDate: '<?=date('Y-m-d');?>',
58+
navLinks: true, // can click day/week names to navigate views
59+
businessHours: true, // display business hours
60+
editable: true,
61+
events: '<?=$dir;?>api/load_calendar.php',
62+
/*select: function(arg) {
63+
var title = prompt('Event Title:');
64+
if (title) {
65+
66+
$.ajax({
67+
url:"<?=$dir;?>api/insert_calendar.php",
68+
type:"POST",
69+
data:{title:title, start:arg.endStr, end:arg.endStr},
70+
})
71+
72+
}
73+
calendar.refetchEvents();
74+
},*/
75+
eventDrop: function(arg) {
76+
var start = arg.event.start.toDateString()+' '+arg.event.start.getHours()+':'+arg.event.start.getMinutes()+':'+arg.event.start.getSeconds();
77+
var end = arg.event.end.toDateString()+' '+arg.event.end.getHours()+':'+arg.event.end.getMinutes()+':'+arg.event.end.getSeconds();
78+
79+
$.ajax({
80+
url:"<?=$dir;?>api/update_calendar.php",
81+
type:"POST",
82+
data:{id:arg.event.id, start:start, end:end},
83+
});
84+
},
85+
eventResize: function(arg) {
86+
var start = arg.event.start.toDateString()+' '+arg.event.start.getHours()+':'+arg.event.start.getMinutes()+':'+arg.event.start.getSeconds();
87+
var end = arg.event.end.toDateString()+' '+arg.event.end.getHours()+':'+arg.event.end.getMinutes()+':'+arg.event.end.getSeconds();
88+
89+
$.ajax({
90+
url:"<?=$dir;?>api/update_calendar.php",
91+
type:"POST",
92+
data:{id:arg.event.id, start:start, end:end},
93+
});
94+
},
95+
eventClick: function(arg) {
96+
if(confirm("Are you sure you want to remove it?")) {
97+
$.ajax({
98+
url:"<?=$dir;?>api/delete_calendar.php",
99+
type:"POST",
100+
data:{id:arg.event.id},
101+
});
102+
}
103+
calendar.refetchEvents();
104+
}
105+
});
106+
107+
calendar.render();
108+
109+
$('#createEvent').submit(function(event) {
110+
111+
// stop the form refreshing the page
112+
event.preventDefault();
113+
114+
$('.form-group').removeClass('has-error'); // remove the error class
115+
$('.help-block').remove(); // remove the error text
116+
117+
// process the form
118+
$.ajax({
119+
type : "POST",
120+
url : '<?=$dir;?>api/insert_calendar.php',
121+
data : $(this).serialize(),
122+
dataType : 'json',
123+
encode : true
124+
}).done(function(data) {
125+
126+
// insert worked
127+
if (data.success) {
128+
129+
//remove any form data
130+
$('#createEvent').trigger("reset");
131+
132+
//close model
133+
$('#addeventmodal').modal('hide');
134+
135+
//refresh calendar
136+
calendar.refetchEvents();
137+
138+
} else {
139+
140+
//if error exists update html
141+
if (data.errors.date) {
142+
$('#date-group').addClass('has-error');
143+
$('#date-group').append('<div class="help-block">' + data.errors.date + '</div>');
144+
}
145+
146+
if (data.errors.title) {
147+
$('#title-group').addClass('has-error');
148+
$('#title-group').append('<div class="help-block">' + data.errors.title + '</div>');
149+
}
150+
151+
}
152+
153+
});
154+
});
155+
});
156+
</script>
157+
</head>
158+
<body>
159+
160+
<div class="modal fade" id="addeventmodal" tabindex="-1" role="dialog">
161+
<div class="modal-dialog">
162+
<div class="modal-content">
163+
164+
<div class="modal-header">
165+
<h5 class="modal-title">Add Event</h5>
166+
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
167+
<span aria-hidden="true">&times;</span>
168+
</button>
169+
</div>
170+
171+
<div class="modal-body">
172+
173+
<div class="container-fluid">
174+
175+
<form id="createEvent" class="form-horizontal">
176+
177+
<div class="row">
178+
179+
<div class="col-md-6">
180+
181+
<div id="date-group" class="form-group">
182+
<label class="control-label" for="date">Date</label>
183+
<input type="text" class="form-control datetimepicker" name="date">
184+
<!-- errors will go here -->
185+
</div>
186+
187+
<div id="title-group" class="form-group">
188+
<label class="control-label" for="title">Title</label>
189+
<input type="text" class="form-control" name="title">
190+
<!-- errors will go here -->
191+
</div>
192+
193+
</div>
194+
195+
<div class="col-md-6">
196+
197+
<div id="color-group" class="form-group">
198+
<label class="control-label" for="color">Colour</label>
199+
<input type="text" class="form-control colorpicker" name="color" value="#6453e9">
200+
<!-- errors will go here -->
201+
</div>
202+
203+
<div id="textcolor-group" class="form-group">
204+
<label class="control-label" for="textcolor">Text Colour</label>
205+
<input type="text" class="form-control colorpicker" name="text_color" value="#ffffff">
206+
<!-- errors will go here -->
207+
</div>
208+
209+
</div>
210+
211+
</div>
212+
213+
214+
215+
</div>
216+
217+
</div>
218+
219+
<div class="modal-footer">
220+
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
221+
<button type="submit" class="btn btn-primary">Save changes</button>
222+
</div>
223+
224+
</form>
225+
226+
</div><!-- /.modal-content -->
227+
</div><!-- /.modal-dialog -->
228+
</div><!-- /.modal -->
229+
230+
<div class="container">
231+
232+
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addeventmodal">
233+
Add Event
234+
</button>
235+
236+
<div id="calendar"></div>
237+
</div>
238+
239+
</body>
240+
</html>

0 commit comments

Comments
 (0)