Full Calendar on Home Page

Discussions related to customizing hooks. Hooks are documented at http://bigprof.com/appgini/help/advanced-topics/hooks/
Post Reply
jhart
Posts: 12
Joined: 2018-07-21 20:31

Full Calendar on Home Page

Post by jhart » 2018-07-24 19:21

I came across this http://jamelbaz.com/tutos/integration-d ... -php-mysql - is it possible to add this calendar to the home page of a project ? How can you scope the displayed events to the currently logged in user?

pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 296
Joined: 2018-04-01 10:12

Re: Full Calendar on Home Page

Post by pböttcher » 2018-07-25 19:34

Hi, what do you try to acheive?

jhart
Posts: 12
Joined: 2018-07-21 20:31

Re: Full Calendar on Home Page

Post by jhart » 2018-07-25 20:07

The idea is to allow the currently signed in user to see past and future client appointments and the status of the appointment.

sjohn
Veteran Member
Posts: 50
Joined: 2018-05-23 09:32

Re: Full Calendar on Home Page

Post by sjohn » 2018-07-26 09:41

Hello jhart

have you looked at the totally free, but feature rich LuxCal calendar : http://www.luxsoft.eu/

You can find some information about integrating and Single Sign On here : http://calendarforum.dk/installation.html

sjohn
Veteran Member
Posts: 50
Joined: 2018-05-23 09:32

Re: Full Calendar on Home Page

Post by sjohn » 2018-07-26 09:45

There is a very good support on the Luxcal forum : http://www.luxsoft.eu/index.php?pge=forum
There is not many posts on the forum now, because the forum has been re-designed - on the old forum was thousands of posts.
This calendar is worth a try.

pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 296
Joined: 2018-04-01 10:12

Re: Full Calendar on Home Page

Post by pböttcher » 2018-07-27 12:20

Hi,

looking at the link you mentioned above you can integrate this into the appGini application by doing the following:

1, download the files and store them in a directory based on your application root directory (eg. FullCalendar)

2, edit the index.php file and do the follwing:

add

Code: Select all

	define('PREPEND_PATH', '../');

	include(PREPEND_PATH."defaultLang.php");
	include(PREPEND_PATH."language.php");
	include(PREPEND_PATH."lib.php");
	include(PREPEND_PATH."header.php");

bevor the line

Code: Select all

require_once('bdd.php');

remove the lines between

Code: Select all

<!-- Navigation --> 

and

Code: Select all

    <!-- Page Content -->

The navigation is going to come from appGini.

remove

Code: Select all

    <!-- jQuery Version 1.11.1 -->
    <script src="./js/jquery.js"></script>

This is already included.

you may also want to change the
defaultDate to:

Code: Select all

			defaultDate: new Date().toJSON().slice(0,10),

3, change the file bdd.php and replace the line

Code: Select all

    
   $bdd = new PDO.....

with:

Code: Select all

			$dbServer = config('dbServer');
			$dbUsername = config('dbUsername');
			$dbPassword = config('dbPassword');
			$dbDatabase = config('dbDatabase');
	$bdd = new PDO('mysql:host='.$dbServer.';dbname='.$dbDatabase.';charset=utf8', $dbUsername	, $dbPassword);

4, add a menu link and a home link to the FullCalendar/index.php page and you should be running fine.

5, add the table to your database according to the calendar.sql

If you want to adjust the calendar to handle user specific information you will need to enhance the code for creation and edit of events and also enhance the DB-table to hold the userinformation for an event.

Alisson
Posts: 15
Joined: 2017-02-25 20:32

Re: Full Calendar on Home Page

Post by Alisson » 2018-07-27 20:34

I know very little of coding but I managed to make Fullcalendar to work with appgini. It's very easy, just create a folder named fullcalendar and extract fullcalendar inside this folder, create a file named calendar.php in the root folder, in the hooks folder open links-home.php and create a button to open
the fullcalendar.php.

Here is the file I created, you can have some ideas and change the code to fit your needs.

https://github.com/Bodock/appgini/blob/ ... lendar.php

ronwill
Veteran Member
Posts: 76
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Re: Full Calendar on Home Page

Post by ronwill » 2018-08-05 00:24

Hi PBöttcher,

I tried to follow your instructions and all seems ok, not getting any errors but also not seeing the calendar appear at all!
I get the notice:
FullCalendar BS3 PHP MySQL
Complete with pre-defined file paths that you won't have to change!

But nothing else!?
Have I missed something obvious?
Cheers, Ron
Ron - AppGini Pro V 5.72 Rev 1036

pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 296
Joined: 2018-04-01 10:12

Re: Full Calendar on Home Page

Post by pböttcher » 2018-08-05 07:52

Hi Ron,

can you please replace the line

Code: Select all

<script src='js/moment.min.js'></script>

by

Code: Select all

<script src='js/jquery-ui.min.js'></script>

in the index.php file.

ronwill
Veteran Member
Posts: 76
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Re: Full Calendar on Home Page

Post by ronwill » 2018-08-05 15:18

Hi,
Ok, tried that, no changes, can't see any reason why calendar won't load/show!
Ron - AppGini Pro V 5.72 Rev 1036

pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 296
Joined: 2018-04-01 10:12

Re: Full Calendar on Home Page

Post by pböttcher » 2018-08-05 17:25

can u post your index.php pls

ronwill
Veteran Member
Posts: 76
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Re: Full Calendar on Home Page

Post by ronwill » 2018-08-05 19:43

This is the index.php copy/paste:

<?php
define('PREPEND_PATH', '../');

include(PREPEND_PATH."defaultLang.php");
include(PREPEND_PATH."language.php");
include(PREPEND_PATH."lib.php");
include(PREPEND_PATH."header.php");

require_once('bdd.php');


$sql = "SELECT id, title, start, end, color FROM events ";

$req = $bdd->prepare($sql);
$req->execute();

$events = $req->fetchAll();

?>

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>Bare - Start Bootstrap Template</title>

<!-- Bootstrap Core CSS -->
<link href="http://localhost/doctorclinic/fullCalen ... ap.min.css" rel="stylesheet">

<!-- FullCalendar -->
<link href='http://localhost/doctorclinic/fullCalen ... lendar.css' rel='stylesheet' />


<!-- Custom CSS -->
<style>
body {
padding-top: 70px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
#calendar {
max-width: 800px;
}
.col-centered{
float: none;
margin: 0 auto;
}
</style>

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3 ... "></script>
<script src="https://oss.maxcdn.com/libs/respond.js/ ... "></script>
<![endif]-->

</head>

<body>

<!-- Navigation -->
<!-- Page Content -->
<div class="container">

<div class="row">
<div class="col-lg-12 text-center">
<h1>FullCalendar BS3 PHP MySQL</h1>
<p class="lead">Complete with pre-defined file paths that you won't have to change!</p>
<div id="calendar" class="col-centered">
</div>
</div>

</div>
<!-- /.row -->

<!-- Modal -->
<div class="modal fade" id="ModalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form class="form-horizontal" method="POST" action="addEvent.php">

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Add Event</h4>
</div>
<div class="modal-body">

<div class="form-group">
<label for="title" class="col-sm-2 control-label">Title</label>
<div class="col-sm-10">
<input type="text" name="title" class="form-control" id="title" placeholder="Title">
</div>
</div>
<div class="form-group">
<label for="color" class="col-sm-2 control-label">Color</label>
<div class="col-sm-10">
<select name="color" class="form-control" id="color">
<option value="">Choose</option>
<option style="color:#0071c5;" value="#0071c5">&#9724; Dark blue</option>
<option style="color:#40E0D0;" value="#40E0D0">&#9724; Turquoise</option>
<option style="color:#008000;" value="#008000">&#9724; Green</option>
<option style="color:#FFD700;" value="#FFD700">&#9724; Yellow</option>
<option style="color:#FF8C00;" value="#FF8C00">&#9724; Orange</option>
<option style="color:#FF0000;" value="#FF0000">&#9724; Red</option>
<option style="color:#000;" value="#000">&#9724; Black</option>

</select>
</div>
</div>
<div class="form-group">
<label for="start" class="col-sm-2 control-label">Start date</label>
<div class="col-sm-10">
<input type="text" name="start" class="form-control" id="start" readonly>
</div>
</div>
<div class="form-group">
<label for="end" class="col-sm-2 control-label">End date</label>
<div class="col-sm-10">
<input type="text" name="end" class="form-control" id="end" readonly>
</div>
</div>

</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>



<!-- Modal -->
<div class="modal fade" id="ModalEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form class="form-horizontal" method="POST" action="editEventTitle.php">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Edit Event</h4>
</div>
<div class="modal-body">

<div class="form-group">
<label for="title" class="col-sm-2 control-label">Title</label>
<div class="col-sm-10">
<input type="text" name="title" class="form-control" id="title" placeholder="Title">
</div>
</div>
<div class="form-group">
<label for="color" class="col-sm-2 control-label">Color</label>
<div class="col-sm-10">
<select name="color" class="form-control" id="color">
<option value="">Choose</option>
<option style="color:#0071c5;" value="#0071c5">&#9724; Dark blue</option>
<option style="color:#40E0D0;" value="#40E0D0">&#9724; Turquoise</option>
<option style="color:#008000;" value="#008000">&#9724; Green</option>
<option style="color:#FFD700;" value="#FFD700">&#9724; Yellow</option>
<option style="color:#FF8C00;" value="#FF8C00">&#9724; Orange</option>
<option style="color:#FF0000;" value="#FF0000">&#9724; Red</option>
<option style="color:#000;" value="#000">&#9724; Black</option>

</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label class="text-danger"><input type="checkbox" name="delete"> Delete event</label>
</div>
</div>
</div>

<input type="hidden" name="id" class="form-control" id="id">


</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>

</div>
<!-- /.container -->

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>

<!-- FullCalendar -->
<script src='js/moment.min.js'></script>
<script src='js/fullcalendar.min.js'></script>

<script>

$(document).ready(function() {

$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultDate: defaultDate: new Date().toJSON().slice(0,10),
editable: true,
eventLimit: true, // allow "more" link when too many events
selectable: true,
selectHelper: true,
select: function(start, end) {

$('#ModalAdd #start').val(moment(start).format('YYYY-MM-DD HH:mm:ss'));
$('#ModalAdd #end').val(moment(end).format('YYYY-MM-DD HH:mm:ss'));
$('#ModalAdd').modal('show');
},
eventRender: function(event, element) {
element.bind('dblclick', function() {
$('#ModalEdit #id').val(event.id);
$('#ModalEdit #title').val(event.title);
$('#ModalEdit #color').val(event.color);
$('#ModalEdit').modal('show');
});
},
eventDrop: function(event, delta, revertFunc) { // si changement de position

edit(event);

},
eventResize: function(event,dayDelta,minuteDelta,revertFunc) { // si changement de longueur

edit(event);

},
events: [
<?php foreach($events as $event):

$start = explode(" ", $event['start']);
$end = explode(" ", $event['end']);
if($start[1] == '00:00:00'){
$start = $start[0];
}else{
$start = $event['start'];
}
if($end[1] == '00:00:00'){
$end = $end[0];
}else{
$end = $event['end'];
}
?>
{
id: '<?php echo $event['id']; ?>',
title: '<?php echo $event['title']; ?>',
start: '<?php echo $start; ?>',
end: '<?php echo $end; ?>',
color: '<?php echo $event['color']; ?>',
},
<?php endforeach; ?>
]
});

function edit(event){
start = event.start.format('YYYY-MM-DD HH:mm:ss');
if(event.end){
end = event.end.format('YYYY-MM-DD HH:mm:ss');
}else{
end = start;
}

id = event.id;

Event = [];
Event[0] = id;
Event[1] = start;
Event[2] = end;

$.ajax({
url: 'editEventDate.php',
type: "POST",
data: {Event:Event},
success: function(rep) {
if(rep == 'OK'){
alert('Saved');
}else{
alert('Could not be saved. try again.');
}
}
});
}

});

</script>

</body>

</html>
Ron - AppGini Pro V 5.72 Rev 1036

ronwill
Veteran Member
Posts: 76
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Re: Full Calendar on Home Page

Post by ronwill » 2018-08-05 19:51

Sorry that was my saved version before making following change:

<!-- FullCalendar -->
<script src='js/jquery-ui.min.js'></script>
<script src='js/fullcalendar.min.js'></script>
Ron - AppGini Pro V 5.72 Rev 1036

pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 296
Joined: 2018-04-01 10:12

Re: Full Calendar on Home Page

Post by pböttcher » 2018-08-05 20:12

Thanks,

can you try this one

Code: Select all

<?php
define('PREPEND_PATH', '../');

include(PREPEND_PATH."defaultLang.php");
include(PREPEND_PATH."language.php");
include(PREPEND_PATH."lib.php");
include(PREPEND_PATH."header.php");

require_once('bdd.php');


$sql = "SELECT id, title, start, end, color FROM events ";

//$req = $bdd->prepare($sql);
//$req->execute();

//$events = $req->fetchAll();
$events = sql($sql,$eo);

?>

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>Bare - Start Bootstrap Template</title>

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- FullCalendar -->
<link href='css/FullCalendar.css' rel='stylesheet' />


<!-- Custom CSS -->
<style>
body {
padding-top: 70px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
#calendar {
max-width: 800px;
}
.col-centered{
float: none;
margin: 0 auto;
}
</style>

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3 ... "></script>
<script src="https://oss.maxcdn.com/libs/respond.js/ ... "></script>
<![endif]-->

</head>

<body>

<!-- Navigation -->
<!-- Page Content -->
<div class="container">

<div class="row">
<div class="col-lg-12 text-center">
<h1>FullCalendar BS3 PHP MySQL</h1>
<p class="lead">Complete with pre-defined file paths that you won't have to change!</p>
<div id="calendar" class="col-centered">
</div>
</div>

</div>
<!-- /.row -->

<!-- Modal -->
<div class="modal fade" id="ModalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form class="form-horizontal" method="POST" action="addEvent.php">

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Add Event</h4>
</div>
<div class="modal-body">

<div class="form-group">
<label for="title" class="col-sm-2 control-label">Title</label>
<div class="col-sm-10">
<input type="text" name="title" class="form-control" id="title" placeholder="Title">
</div>
</div>
<div class="form-group">
<label for="color" class="col-sm-2 control-label">Color</label>
<div class="col-sm-10">
<select name="color" class="form-control" id="color">
<option value="">Choose</option>
<option style="color:#0071c5;" value="#0071c5">&#9724; Dark blue</option>
<option style="color:#40E0D0;" value="#40E0D0">&#9724; Turquoise</option>
<option style="color:#008000;" value="#008000">&#9724; Green</option>	
<option style="color:#FFD700;" value="#FFD700">&#9724; Yellow</option>
<option style="color:#FF8C00;" value="#FF8C00">&#9724; Orange</option>
<option style="color:#FF0000;" value="#FF0000">&#9724; Red</option>
<option style="color:#000;" value="#000">&#9724; Black</option>

</select>
</div>
</div>
<div class="form-group">
<label for="start" class="col-sm-2 control-label">Start date</label>
<div class="col-sm-10">
<input type="text" name="start" class="form-control" id="start" readonly>
</div>
</div>
<div class="form-group">
<label for="end" class="col-sm-2 control-label">End date</label>
<div class="col-sm-10">
<input type="text" name="end" class="form-control" id="end" readonly>
</div>
</div>

</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>



<!-- Modal -->
<div class="modal fade" id="ModalEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form class="form-horizontal" method="POST" action="editEventTitle.php">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Edit Event</h4>
</div>
<div class="modal-body">

<div class="form-group">
<label for="title" class="col-sm-2 control-label">Title</label>
<div class="col-sm-10">
<input type="text" name="title" class="form-control" id="title" placeholder="Title">
</div>
</div>
<div class="form-group">
<label for="color" class="col-sm-2 control-label">Color</label>
<div class="col-sm-10">
<select name="color" class="form-control" id="color">
<option value="">Choose</option>
<option style="color:#0071c5;" value="#0071c5">&#9724; Dark blue</option>
<option style="color:#40E0D0;" value="#40E0D0">&#9724; Turquoise</option>
<option style="color:#008000;" value="#008000">&#9724; Green</option>	
<option style="color:#FFD700;" value="#FFD700">&#9724; Yellow</option>
<option style="color:#FF8C00;" value="#FF8C00">&#9724; Orange</option>
<option style="color:#FF0000;" value="#FF0000">&#9724; Red</option>
<option style="color:#000;" value="#000">&#9724; Black</option>

</select>
</div>
</div>
<div class="form-group"> 
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label class="text-danger"><input type="checkbox" name="delete"> Delete event</label>
</div>
</div>
</div>

<input type="hidden" name="id" class="form-control" id="id">


</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>

</div>
<!-- /.container -->

<!-- Bootstrap Core JavaScript -->
<!--<script src="js/bootstrap.min.js"></script>
-->
<!-- FullCalendar -->
<script src='js/jquery-ui.min.js'></script>
<script src='js/fullcalendar.min.js'></script>

<script>

$(document).ready(function() {

$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultDate: defaultDate: new Date().toJSON().slice(0,10),
editable: true,
eventLimit: true, // allow "more" link when too many events
selectable: true,
selectHelper: true,
select: function(start, end) {

$('#ModalAdd #start').val(moment(start).format('YYYY-MM-DD HH:mm:ss'));
$('#ModalAdd #end').val(moment(end).format('YYYY-MM-DD HH:mm:ss'));
$('#ModalAdd').modal('show');
},
eventRender: function(event, element) {
element.bind('dblclick', function() {
$('#ModalEdit #id').val(event.id);
$('#ModalEdit #title').val(event.title);
$('#ModalEdit #color').val(event.color);
$('#ModalEdit').modal('show');
});
},
eventDrop: function(event, delta, revertFunc) { // si changement de position

edit(event);

},
eventResize: function(event,dayDelta,minuteDelta,revertFunc) { // si changement de longueur

edit(event);

},
events: [
<?php foreach($events as $event): 

$start = explode(" ", $event['start']);
$end = explode(" ", $event['end']);
if($start[1] == '00:00:00'){
$start = $start[0];
}else{
$start = $event['start'];
}
if($end[1] == '00:00:00'){
$end = $end[0];
}else{
$end = $event['end'];
}
?>
{
id: '<?php echo $event['id']; ?>',
title: '<?php echo $event['title']; ?>',
start: '<?php echo $start; ?>',
end: '<?php echo $end; ?>',
color: '<?php echo $event['color']; ?>',
},
<?php endforeach; ?>
]
});

function edit(event){
start = event.start.format('YYYY-MM-DD HH:mm:ss');
if(event.end){
end = event.end.format('YYYY-MM-DD HH:mm:ss');
}else{
end = start;
}

id = event.id;

Event = [];
Event[0] = id;
Event[1] = start;
Event[2] = end;

$.ajax({
url: 'editEventDate.php',
type: "POST",
data: {Event:Event},
success: function(rep) {
if(rep == 'OK'){
alert('Saved');
}else{
alert('Could not be saved. try again.'); 
}
}
});
}

});

</script>

</body>

</html>

ronwill
Veteran Member
Posts: 76
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Re: Full Calendar on Home Page

Post by ronwill » 2018-08-05 21:16

Getting error:
Unknown column 'title' in 'field list'
Ron - AppGini Pro V 5.72 Rev 1036

pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 296
Joined: 2018-04-01 10:12

Re: Full Calendar on Home Page

Post by pböttcher » 2018-08-05 21:40

Hi,

can you try this pls.

Code: Select all

<?php
	define('PREPEND_PATH', '../');

	include(PREPEND_PATH."defaultLang.php");
	include(PREPEND_PATH."language.php");
	include(PREPEND_PATH."lib.php");
	include(PREPEND_PATH."header.php");
require_once('bdd.php');

$sql = "SELECT id, title, start, end, color FROM events ";

//$req = $bdd->prepare($sql);
//$req->execute();

//$events = $req->fetchAll();
$events = sql($sql,$eo);

?>

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Bare - Start Bootstrap Template</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
	
	<!-- ./FullCalendar -->
	<link href='css/FullCalendar.css' rel='stylesheet' />


    <!-- Custom CSS -->
    <style>
    body {
        padding-top: 70px;
        /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
    }
	#calendar {
		max-width: 800px;
	}
	.col-centered{
		float: none;
		margin: 0 auto;
	}
    </style>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <!-- Navigation -->
<!--    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
 -->           <!-- Brand and toggle get grouped for better mobile display -->
 <!--           <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Free Calendar</a>
            </div>
-->            <!-- Collect the nav links, forms, and other content for toggling -->
  <!--          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="#">Menu</a>
                    </li>
                </ul>
            </div>
   -->         <!-- /.navbar-collapse -->
  <!--      </div>
  -->      <!-- /.container -->
 <!--   </nav>
-->
    <!-- Page Content -->
    <div class="container">

       <div class="row">
            <div class="col-lg-12 text-center">
                 <h1>FullCalendar BS3 PHP MySQL</h1>
                <p class="lead">Complete with pre-defined file paths that you won't have to change!</p>
                 <div id="calendar" class="col-centered">
                </div>
            </div>
			
        </div>
       <!-- /.row -->
		
		<!-- Modal -->
		<div class="modal fade" id="ModalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
			<div class="modal-content">
			<form class="form-horizontal" method="POST" action="addEvent.php">
			
			  <div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">Add Event</h4>
			  </div>
			  <div class="modal-body">
				
				  <div class="form-group">
					<label for="title" class="col-sm-2 control-label">Title</label>
					<div class="col-sm-10">
					  <input type="text" name="title" class="form-control" id="title" placeholder="Title">
					</div>
				  </div>
				  <div class="form-group">
					<label for="color" class="col-sm-2 control-label">Color</label>
					<div class="col-sm-10">
					  <select name="color" class="form-control" id="color">
						  <option value="">Choose</option>
						  <option style="color:#0071c5;" value="#0071c5">&#9724; Dark blue</option>
						  <option style="color:#40E0D0;" value="#40E0D0">&#9724; Turquoise</option>
						  <option style="color:#008000;" value="#008000">&#9724; Green</option>						  
						  <option style="color:#FFD700;" value="#FFD700">&#9724; Yellow</option>
						  <option style="color:#FF8C00;" value="#FF8C00">&#9724; Orange</option>
						  <option style="color:#FF0000;" value="#FF0000">&#9724; Red</option>
						  <option style="color:#000;" value="#000">&#9724; Black</option>
						  
						</select>
					</div>
				  </div>
				  <div class="form-group">
					<label for="start" class="col-sm-2 control-label">Start date</label>
					<div class="col-sm-10">
					  <input type="text" name="start" class="form-control" id="start" >
					</div>
				  </div>
				  <div class="form-group">
					<label for="end" class="col-sm-2 control-label">End date</label>
					<div class="col-sm-10">
					  <input type="text" name="end" class="form-control" id="end" >
					</div>
				  </div>
				
			  </div>
			  <div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				<button type="submit" class="btn btn-primary">Save changes</button>
			  </div>
			</form>
			</div>
		  </div>
		</div>
		
		
		
		<!-- Modal -->
		<div class="modal fade" id="ModalEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
			<div class="modal-content">
			<form class="form-horizontal" method="POST" action="editEventTitle.php">
			  <div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">Edit Event</h4>
			  </div>
			  <div class="modal-body">
				
				  <div class="form-group">
					<label for="title" class="col-sm-2 control-label">Title</label>
					<div class="col-sm-10">
					  <input type="text" name="title" class="form-control" id="title" placeholder="Title">
					</div>
				  </div>
				  <div class="form-group">
					<label for="color" class="col-sm-2 control-label">Color</label>
					<div class="col-sm-10">
					  <select name="color" class="form-control" id="color">
						  <option value="">Choose</option>
						  <option style="color:#0071c5;" value="#0071c5">&#9724; Dark blue</option>
						  <option style="color:#40E0D0;" value="#40E0D0">&#9724; Turquoise</option>
						  <option style="color:#008000;" value="#008000">&#9724; Green</option>						  
						  <option style="color:#FFD700;" value="#FFD700">&#9724; Yellow</option>
						  <option style="color:#FF8C00;" value="#FF8C00">&#9724; Orange</option>
						  <option style="color:#FF0000;" value="#FF0000">&#9724; Red</option>
						  <option style="color:#000;" value="#000">&#9724; Black</option>
						  
						</select>
					</div>
				  </div>
				  <div class="form-group">
					<label for="start" class="col-sm-2 control-label">Start date</label>
					<div class="col-sm-10">
					  <input type="text" name="start" class="form-control" id="start" placeholder="start" >
					</div>
				  </div>
				  <div class="form-group">
					<label for="end" class="col-sm-2 control-label">End date</label>
					<div class="col-sm-10">
					  <input type="text" name="end" class="form-control" id="end"  placeholder="end">
					</div>
				  </div>
					<div class="form-group"> 
						<div class="col-sm-offset-2 col-sm-10">
						  <div class="checkbox">
							<label class="text-danger"><input type="checkbox"  name="delete"> Delete event</label>
						  </div>
						</div>
					</div>
				  
				  <input type="hidden" name="id" class="form-control" id="id">
				
				
			  </div>
			  <div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				<button type="submit" class="btn btn-primary">Save changes</button>
			  </div>
			</form>
			</div>
		  </div>
		</div>

    </div>
    <!-- /.container -->

    <!-- jQuery Version 1.11.1 -->
 <!--   <script src="./js/jquery.js"></script>
-->
    <!-- Bootstrap Core JavaScript -->
<!--    <script src="js/bootstrap.min.js"></script>
	-->
	<!-- ./FullCalendar -->
<!-- 	<script src='js/moment.min.js'></script>
--> 	<script src='js/jquery-ui.min.js'></script>
	<script src='js/FullCalendar.min.js'></script>
<!--	<script src='locale/de.js'></script>
-->	
	<script>

	$j(document).ready(function() {
		
		$j('#calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			defaultDate: new Date().toJSON().slice(0,10),
			lang: 'de',
			editable: true,
			eventLimit: true, // allow "more" link when too many events
			selectable: true,
			selectHelper: true,
			select: function(start, end) {
				
				$j('#ModalAdd #start').val(moment(start).format('YYYY-MM-DD HH:mm:ss'));
				$j('#ModalAdd #end').val(moment(end).format('YYYY-MM-DD HH:mm:ss'));
				$j('#ModalAdd').modal('show');
			},
			timeFormat: 'H:mm', // uppercase H for 24-hour clock
			eventRender: function(event, element) {
				element.bind('dblclick', function() {
					$j('#ModalEdit #id').val(event.id);
					$j('#ModalEdit #title').val(event.title);
					$j('#ModalEdit #color').val(event.color);
					$j('#ModalEdit #start').val(event.start.format('YYYY-MM-DD HH:mm:ss'));
					$j('#ModalEdit #end').val(event.end.format('YYYY-MM-DD HH:mm:ss'));
					$j('#ModalEdit').modal('show');
				});
			},
			eventDrop: function(event, delta, revertFunc) { // si changement de position

				edit(event);

			},
			eventResize: function(event,dayDelta,minuteDelta,revertFunc) { // si changement de longueur

				edit(event);

			},
			events: [
			<?php foreach($events as $event): 
			
				$start = explode(" ", $event['start']);
				$end = explode(" ", $event['end']);
				if($start[1] == '00:00:00'){
					$start = $start[0];
				}else{
					$start = $event['start'];
				}
				if($end[1] == '00:00:00'){
					$end = $end[0];
				}else{
					$end = $event['end'];
				}
			?>
				{
					id: '<?php echo $event['id']; ?>',
					title: '<?php echo $event['title']; ?>',
					start: '<?php echo $start; ?>',
					end: '<?php echo $end; ?>',
					color: '<?php echo $event['color']; ?>',
				},
			<?php endforeach; ?>
			]
		});
		$j.datepicker.setDefaults( $j.datepicker.regional[ "de" ] );
		$j("#start, #end").datetimepicker({
			format:'YYYY-MM-DD HH:mm:ss'
		});

		function edit(event){
			start = event.start.format('YYYY-MM-DD HH:mm:ss');
			if(event.end){
				end = event.end.format('YYYY-MM-DD HH:mm:ss');
			}else{
				end = start;
			}
			
			id =  event.id;
			
			Event = [];
			Event[0] = id;
			Event[1] = start;
			Event[2] = end;
			
			$j.ajax({
			 url: 'editEventDate.php',
			 type: "POST",
			 data: {Event:Event},
			 success: function(rep) {
					if(rep == 'OK'){
						alert('Saved');
					}else{
						alert('Could not be saved. try again.'); 
					}
				}
			});
			$j('#calendar').fullCalendar('unselect');

            // Clear modal inputs
            $j('#ModalEdit').find('input').val('');

            // hide modal
            $j('#ModalEdit').modal('hide');
		}
		
	});

</script>

</body>

</html>

ronwill
Veteran Member
Posts: 76
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Re: Full Calendar on Home Page

Post by ronwill » 2018-08-05 21:48

I've re-created a new database as per the above method and used the revised index.php you uploaded, just in case the error message was something caused by me. The error message has now gone (so I must have caused that!) but I am still not getting calendar to show after the text:
FullCalendar BS3 PHP MySQL
Complete with pre-defined file paths that you won't have to change!


Am just trying your above..


Cheers, Ron
Ron - AppGini Pro V 5.72 Rev 1036

ronwill
Veteran Member
Posts: 76
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Re: Full Calendar on Home Page

Post by ronwill » 2018-08-05 21:51

OMG you are a star! Calendar showing now!!!!
Ron - AppGini Pro V 5.72 Rev 1036

ronwill
Veteran Member
Posts: 76
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Re: Full Calendar on Home Page

Post by ronwill » 2018-08-05 22:05

Just one more question, the days are abbreviated in German (Mo. Di. Mi....) ok for me as I'm 1/2 German 1/2 English lol but probably need to change to English... have search files but can't find where to make the change!?
Ron - AppGini Pro V 5.72 Rev 1036

pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 296
Joined: 2018-04-01 10:12

Re: Full Calendar on Home Page

Post by pböttcher » 2018-08-05 22:08

ok, good to see it working now.

At line 257 you see

lang: 'de',

change it to

lang: 'en',

ronwill
Veteran Member
Posts: 76
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Re: Full Calendar on Home Page

Post by ronwill » 2018-08-05 22:30

Done, all brill now.
Many thanks for taking the time to help me on this, very much appreciated,
Cheers,
Ron
Ron - AppGini Pro V 5.72 Rev 1036

ronwill
Veteran Member
Posts: 76
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Re: Full Calendar on Home Page

Post by ronwill » 2018-08-06 16:31

Is it possible to have the calendar edits by admin only and others to view only? Not sure how to go about this with this type of configuration.
Cheers, Ron
Ron - AppGini Pro V 5.72 Rev 1036

ronwill
Veteran Member
Posts: 76
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Re: Full Calendar on Home Page

Post by ronwill » 2018-08-09 10:01

Got around it by making 2 calendar.php files, one for admin, one anonymous (edited) with separate links from home page.
Ron - AppGini Pro V 5.72 Rev 1036

Post Reply