Posts fullcalendar example
Post
Cancel

fullcalendar example

the full example, can be found at : https://github.com/pipiscrew/fullcalendar-php-example


When is not logged-in, view full calendar, with read only permissions. fcalendar2

this is the view of admin fcalendar1

introduction : the application runs in index.php, all workers are available to view the calendar. When user logged-in (login.php) has the point3 - point2 - at point4 can move the event(s).

point1 - anchor drives to login.php / when logged-in drivers to logout.php point2 - lists the workers, added from point3 (saved to local sqlite)


I will not explain the login/logout already done, on previous articles. We will focus, on security and how manipulate the fullcalendar.js aka https://fullcalendar.io/

all the php scripts, contains as header :

1
2
<?php $is_admin="false;" @session_start();="" if="" (isset($_session["id"]))="" {="" date_default_timezone_set("utc");="" if="" ($_session["login_expiration"]="" !="date("Y-m-d"))" {="" session_destroy();="" header("location:="" login.php");="" exit="" ;="" }="" else="" {="" $is_admin="true;" }="" }=""?>

index.php - references

1
2
 <!-- needed for drag&drop (customized download at official site final size 72kb)

the calendar html is as the following :

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
98
99
100
101
102
103
104
			<div class="row">
				<div class="col-md-12">
					<div class="panel">
						<div class="panel-heading">
							<div class="panel-title">

#### CALENDAR

</div>
						</div> 
						<div class="panel-body">
							<div class="row">
								<?php if($is_admin){ ?>
									<div class="col-md-3">
										<div id="external-events">
											<div class="legend">Create Event</div>

											<form action="add_user.php" id="create-event">
												<div class="input-group">
													<div class="inputer">
														<div class="input-wrapper">
															<input id="event-title" name="event-title" type="text" class="form-control">
														</div>
													</div>
													<div class="input-group-btn">
														<button id="add-event" type="submit" class="btn btn-flat btn-default">Add</button>
													</div> 
												</div> 
											</form>

											<div class="legend">Draggable Events</div>
											<div class="draggable-events">
												<?php 
												include 'config.php';

												$db = connect();

												$r = getSet($db,"select * from users order by user_mail", null);

												$elements = "";
												foreach($r as $row){
													if(strpos($row["user_mail"], '@') == FALSE )
													echo "<div class=\"fc-event\" data-userid=\"{$row["user_id"]}\"><span>{$row["user_mail"]}</span> <button type=\"button\" class=\"close\">×</button></div>\r\n";
												}
												?>
											</div> 
											<p>
												<input type="checkbox" id="drop-remove" checked/>
												<label for="drop-remove">Remove After Drop</label>
											</p>
											<p>
												<input type="checkbox" id="drop-type"/>
												<label for="drop-type">Add as day off</label>
											</p>
										</div> 
									</div> 
									<div class="col-md-9">
									<?php } else{  ?>
										<div class="col-md-12">
									<?php }?>

											<div id="calendar"></div> 
										</div> 
									</div> 
							</div> 
						</div> 
					</div> 
				</div> 
			</div> 
		</div> 

		<div id="modaloSUBSECTOR" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
			<div class="modal-dialog modal-sm">
				<div class="modal-content">

					<div class="modal-header">

						<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>

#### Please choose type 

					</div>
					<div class="modal-body">
						<button type="button" id="btn_dayoff_type" data-eventid="1" class="btn btn-purple btn-block btn-ripple">home office</button>
						<button type="button" id="btn_dayoff_type" data-eventid="2" class="btn btn-blue btn-block btn-ripple">vacation</button>
						<button type="button" id="btn_dayoff_type" data-eventid="3" class="btn btn-teal btn-block btn-ripple">half-day vacation</button>
						<button type="button" id="btn_dayoff_type" data-eventid="4" class="btn btn-deep-orange btn-block btn-ripple">left</button>
						<button type="button" id="btn_dayoff_type" data-eventid="5" class="btn btn-success btn-block btn-ripple">compensate</button>
						<button type="button" id="btn_dayoff_type" data-eventid="6" class="btn btn-yellow btn-block btn-ripple">sickness/doctor</button>
						<button type="button" id="btn_dayoff_type" data-eventid="7" class="btn btn-brown btn-block btn-ripple">training</button>
						<button type="button" id="btn_dayoff_type" data-eventid="8" class="btn btn-blue-grey btn-block btn-ripple">public holiday</button>
						<button type="button" id="btn_dayoff_type" data-eventid="9" class="btn btn-inverted btn-block btn-ripple">personal leave</button>

						<div class="input-group">
							<div class="inputer">
								<div class="input-wrapper">
									<input id="event_comment" name="event_comment" type="text" class="form-control">
								</div>
							</div>
						</div> 
					</div>
				</div><!-- /.modal-content -->
			<!-- /.modal-dialog -->

Line 09 = if admin logged-in make the drag&drop area visible, make a DB connection enumerate the users. Line 39 = when enumerating the users, add HTML5 attribute (userid) to each div, will be used for dbase record. Line 53 = when admin use jsclass="col-md-9" otherwise use jsclass="col-md-12" for calendar. Line 68 = modal with dayoff type. Line 79-87 = modal hardcoded buttons, represent the dayoff types. All has the same ID (btn_dayoff_type) and different HTML5 data attribute (eventid), will be used for dbase record.


the js has as : ```js //js

origin - http://www.pipiscrew.com/?p=6127 js-fullcalendar-example

This post is licensed under CC BY 4.0 by the author.
Contents

Trending Tags