Page 1 of 1

Full Calendar on Home Page

Posted: 2018-07-24 19:21
by jhart
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?

Re: Full Calendar on Home Page

Posted: 2018-07-25 19:34
by pbottcher
Hi, what do you try to acheive?

Re: Full Calendar on Home Page

Posted: 2018-07-25 20:07
by jhart
The idea is to allow the currently signed in user to see past and future client appointments and the status of the appointment.

Re: Full Calendar on Home Page

Posted: 2018-07-26 09:41
by sjohn
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

Re: Full Calendar on Home Page

Posted: 2018-07-26 09:45
by sjohn
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.

Re: Full Calendar on Home Page

Posted: 2018-07-27 12:20
by pbottcher
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.

Re: Full Calendar on Home Page

Posted: 2018-07-27 20:34
by Alisson
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

Re: Full Calendar on Home Page

Posted: 2018-08-05 00:24
by ronwill
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

Re: Full Calendar on Home Page

Posted: 2018-08-05 07:52
by pbottcher
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.

Re: Full Calendar on Home Page

Posted: 2018-08-05 15:18
by ronwill
Hi,
Ok, tried that, no changes, can't see any reason why calendar won't load/show!

Re: Full Calendar on Home Page

Posted: 2018-08-05 17:25
by pbottcher
can u post your index.php pls

Re: Full Calendar on Home Page

Posted: 2018-08-05 19:43
by ronwill
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>

Re: Full Calendar on Home Page

Posted: 2018-08-05 19:51
by ronwill
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>

Re: Full Calendar on Home Page

Posted: 2018-08-05 20:12
by pbottcher
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>

Re: Full Calendar on Home Page

Posted: 2018-08-05 21:16
by ronwill
Getting error:
Unknown column 'title' in 'field list'

Re: Full Calendar on Home Page

Posted: 2018-08-05 21:40
by pbottcher
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>

Re: Full Calendar on Home Page

Posted: 2018-08-05 21:48
by ronwill
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

Re: Full Calendar on Home Page

Posted: 2018-08-05 21:51
by ronwill
OMG you are a star! Calendar showing now!!!!

Re: Full Calendar on Home Page

Posted: 2018-08-05 22:05
by ronwill
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!?

Re: Full Calendar on Home Page

Posted: 2018-08-05 22:08
by pbottcher
ok, good to see it working now.

At line 257 you see

lang: 'de',

change it to

lang: 'en',

Re: Full Calendar on Home Page

Posted: 2018-08-05 22:30
by ronwill
Done, all brill now.
Many thanks for taking the time to help me on this, very much appreciated,
Cheers,
Ron

Re: Full Calendar on Home Page

Posted: 2018-08-06 16:31
by ronwill
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

Re: Full Calendar on Home Page

Posted: 2018-08-09 10:01
by ronwill
Got around it by making 2 calendar.php files, one for admin, one anonymous (edited) with separate links from home page.