Connect (FullCalendar) to database

flashmaster · November 20, 2017

Hi, i need some help with a calendar script (Full Calendar)

Issue 1

Its not saving to the database. This function dont work either when the script is running alone outside Processwire.

~~Issue 2~~ (Fixed)

~~When i click to ad an event and click save it wont turn up in blue, it just disapear. This function works when the script is running alone outside Processwire.~~

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

I have attached the script running alone so you can se how it works. I have also pasted the code below that im trying to work under the template folder inside Processwire. If you can look at the code and se whats wrong with it. Im not that good at PHP or Javascript so i need you help.

demo

http://demos.phplift.net/jquery-fullcalendar-integration-bootstrap-php-mysql/

home.php

<?php

include( "database.php" );

if ( isset( $_POST[ 'action' ] )or isset( $_GET[ 'view' ] ) ) //show all events
{
	if ( isset( $_GET[ 'view' ] ) ) {
		header( 'Content-Type: application/json' );
		$start = mysqli_real_escape_string( $connection, $_GET[ "start" ] );
		$end = mysqli_real_escape_string( $connection, $_GET[ "end" ] );
		$result = mysqli_query( $connection, "SELECT id, start ,end ,title FROM  events where (date(start) >= ‘$start’ AND date(start) <= ‘$end’)" );
		while ( $row = mysqli_fetch_assoc( $result ) ) {
			$events[] = $row;
		}
		echo json_encode( $events );
		exit;
	} elseif ( $_POST[ 'action' ] == "add" ) // add new event section
		{
			mysqli_query( $connection, "INSERT INTO events (
                    title ,
                    start ,
                    end 
                    )
                    VALUES (
                    '" . mysqli_real_escape_string( $connection, $_POST[ "title" ] ) . "',
                    '" . mysqli_real_escape_string( $connection, date( 'Y-m-d H:i:s', strtotime( $_POST[ "start" ] ) ) ) . "‘,
                    '" . mysqli_real_escape_string( $connection, date( 'Y-m-d H:i:s', strtotime( $_POST[ "end" ] ) ) ) . "‘
                    )" );
			header( 'Content-Type: application/json' );
			echo '{"id":"' . mysqli_insert_id( $connection ) . '"}';
			exit;
		}
	elseif ( $_POST[ 'action' ] == "update" ) // update event
		{
			mysqli_query( $connection, "UPDATE events set 
            start = '" . mysqli_real_escape_string( $connection, date( 'Y-m-d H:i:s', strtotime( $_POST[ "start" ] ) ) ) . "', 
            end = '" . mysqli_real_escape_string( $connection, date( 'Y-m-d H:i:s', strtotime( $_POST[ "end" ] ) ) ) . "' 
            where id = '" . mysqli_real_escape_string( $connection, $_POST[ "id" ] ) . "'" );
			exit;
		}

	elseif ( $_POST[ 'action' ] == "delete" ) // remove event
		{
			mysqli_query( $connection, "DELETE from events where id = '" . mysqli_real_escape_string( $connection, $_POST[ "id" ] ) . "'" );
			if ( mysqli_affected_rows( $connection ) > 0 ) {
				echo "1";
			}
			exit;
		}
}

?>

<!doctype html>
<html lang="sv-se">

<head>

	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">
		img {
			border-width: 0
		}
		
		* {
			font-family: 'Lucida Grande', sans-serif;
		}
	</style>
	<style type="text/css">
		.block a:hover {
			color: silver;
		}
		
		.block a {
			color: #fff;
		}
		
		.block {
			position: fixed;
			background: #2184cd;
			padding: 20px;
			z-index: 1;
			top: 240px;
		}
	</style>


	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<script src="<?=$config->urls->templates;?>js/script.js" type="text/javascript"></script>

	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

	<link href="<?=$config->urls->templates;?>css/fullcalendar.css" rel="stylesheet"/>
	<link href="<?=$config->urls->templates;?>css/fullcalendar.print.css" rel="stylesheet" media="print"/>
	<script src="<?=$config->urls->templates;?>js/moment.min.js"></script>
	<script src="<?=$config->urls->templates;?>js/fullcalendar.js"></script>
</head>

<body>


	<div class="container">fsefsefes
		<div class="row">
			<div id="calendar"></div>

		</div>
	</div>


	<!-- Modal -->
	<div id="createEventModal" class="modal fade" role="dialog">
		<div class="modal-dialog">

			<!-- Modal content-->
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h4 class="modal-title">Add Event</h4>
				</div>
				<div class="modal-body">
					<div class="control-group">
						<label class="control-label" for="inputPatient">Event:</label>
						<div class="field desc">
							<input class="form-control" id="title" name="title" placeholder="Event" type="text" value="">
						</div>
					</div>

					<input type="hidden" id="startTime"/>
					<input type="hidden" id="endTime"/>



					<div class="control-group">
						<label class="control-label" for="when">When:</label>
						<div class="controls controls-row" id="when" style="margin-top:5px;">
						</div>
					</div>

				</div>
				<div class="modal-footer">
					<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
					<button type="submit" class="btn btn-primary" id="submitButton">Save</button>
				</div>
			</div>

		</div>
	</div>


	<div id="calendarModal" class="modal fade">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h4 class="modal-title">Event Details</h4>
				</div>
				<div id="modalBody" class="modal-body">
					<h4 id="modalTitle" class="modal-title"></h4>
					<div id="modalWhen" style="margin-top:5px;"></div>
				</div>
				<input type="hidden" id="eventID"/>
				<div class="modal-footer">
					<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
					<button type="submit" class="btn btn-danger" id="deleteButton">Delete</button>
				</div>
			</div>
		</div>
	</div>
	<!--Modal-->


	<div style='margin-left: auto;margin-right: auto;text-align: center;'>
	</div>


</body>

</html>

database.php (i have configure this in my file at localhost) this is just an example.

<?php
$connection = mysqli_connect('host','username','password','database') or die(mysqli_error($connection));
?>

js/script.js

$(document).ready(function(){
        var calendar = $('#calendar').fullCalendar({
            header:{
                left: 'prev,next today',
                center: 'title',
                right: 'agendaWeek,agendaDay'
            },
            defaultView: 'agendaWeek',
            editable: true,
            selectable: true,
            allDaySlot: false,
            
            events: "home.php?view=1",
   
            
            eventClick:  function(event, jsEvent, view) {
                endtime = $.fullCalendar.moment(event.end).format('h:mm');
                starttime = $.fullCalendar.moment(event.start).format('dddd, MMMM Do YYYY, h:mm');
                var mywhen = starttime + ' - ' + endtime;
                $('#modalTitle').html(event.title);
                $('#modalWhen').text(mywhen);
                $('#eventID').val(event.id);
                $('#calendarModal').modal();
            },
            
            //header and other values
            select: function(start, end, jsEvent) {
                endtime = $.fullCalendar.moment(end).format('h:mm');
                starttime = $.fullCalendar.moment(start).format('dddd, MMMM Do YYYY, h:mm');
                var mywhen = starttime + ' - ' + endtime;
                start = moment(start).format();
                end = moment(end).format();
                $('#createEventModal #startTime').val(start);
                $('#createEventModal #endTime').val(end);
                $('#createEventModal #when').text(mywhen);
                $('#createEventModal').modal('toggle');
           },
           eventDrop: function(event, delta){
               $.ajax({
                   url: 'home.php',
                   data: 'action=update&title='+event.title+'&start='+moment(event.start).format()+'&end='+moment(event.end).format()+'&id='+event.id ,
                   type: "POST",
                   success: function(json) {
                   //alert(json);
                   }
               });
           },
           eventResize: function(event) {
               $.ajax({
                   url: 'home.php',
                   data: 'action=update&title='+event.title+'&start='+moment(event.start).format()+'&end='+moment(event.end).format()+'&id='+event.id,
                   type: "POST",
                   success: function(json) {
                       //alert(json);
                   }
               });
           }
        });
               
       $('#submitButton').on('click', function(e){
           // We don't want this to act as a link so cancel the link action
           e.preventDefault();
           doSubmit();
       });
       
       $('#deleteButton').on('click', function(e){
           // We don't want this to act as a link so cancel the link action
           e.preventDefault();
           doDelete();
       });
       
       function doDelete(){
           $("#calendarModal").modal('hide');
           var eventID = $('#eventID').val();
           $.ajax({
               url: 'home.php',
               data: 'action=delete&id='+eventID,
               type: "POST",
               success: function(json) {
                   if(json == 1)
                        $("#calendar").fullCalendar('removeEvents',eventID);
                   else
                        return false;
                    
                   
               }
           });
       }
       function doSubmit(){
           $("#createEventModal").modal('hide');
           var title = $('#title').val();
           var startTime = $('#startTime').val();
           var endTime = $('#endTime').val();
           
           $.ajax({
               url: 'home.php',
               data: 'action=add&title='+title+'&start='+startTime+'&end='+endTime,
               type: "POST",
               success: function(json) {
                   $("#calendar").fullCalendar('renderEvent',
                   {
                       id: json.id,
                       title: title,
                       start: startTime,
                       end: endTime,
                   },
                   true);
               }
           });
           
       }
    });

database table

CREATE TABLE events (
  id int(11) NOT NULL AUTO_INCREMENT,
  start datetime DEFAULT NULL,
  end datetime DEFAULT NULL,
  title text,
  PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

fullcalendar.rar

Macrura · November 21, 2017

i use fullcalendar, but native ProcessWire;

your questions are more general PHP, so i'm not sure really how related this is to ProcessWire.

As far as i can tell, you are just trying to run a full calendar/php implementation alongside a PW site; You should be aware that this won't work b/c you have php files in the templates folder - you will need to move your files to the root.

flashmaster · November 21, 2017

Not sure your comment did help or not. Can you be more specific about where i should place the files? I always have them in the site/templates/ folder. Why cant i have the files there? The script works but besides the two issues that i told about in the beginning.

elabx · November 21, 2017

I see on your AJAX calls you are trying to reach home.php, instead of "/", which I guess is the route you are trying to get too.

You could try changing all urls that say home.php to "/" like:

 $.ajax({
                   url: '/',
                   data: 'action=update&title='+event.title+'&start='+moment(event.start).format()+'&end='+moment(event.end).format()+'&id='+event.id,
                   type: "POST",
                   success: function(json) {
                       //alert(json);
                   }
               });

flashmaster · November 21, 2017

Hi and thanks for the reply. Changing to

url: '/',

did the trick with the event now showing up thanks!

Now the issue with it saving to the database is left. Dont know if the database(sql) table that i posted before is correct?

elabx · November 21, 2017

12 hours ago, flashmaster said:
Hi and thanks for the reply. Changing to
url: '/',
did the trick with the event now showing up thanks!

Now the issue with it saving to the database is left. Dont know if the database(sql) table that i posted before is correct?

POST fields and database query columns seem to match, any other info you can give us? Getting any errors/exceptions?

Check that the database connection succeeds
Check that the POST info is going through, you can start by checking your browser Network tab to see what's going through the post.

GiiDii · February 25, 2018

I tried the php but i still don't get it. I tried many times and it still don't save.

jess31 · April 17, 2018

i want to add a file upload and i dont know how to code in ajax?

J_Szwarga · August 13

On 11/20/2017 at 7:56 PM, Macrura said:

i use fullcalendar, but native ProcessWire;

your questions are more general PHP, so i'm not sure really how related this is to ProcessWire.

As far as i can tell, you are just trying to run a full calendar/php implementation alongside a PW site; You should be aware that this won't work b/c you have php files in the templates folder - you will need to move your files to the root.

@Macrura Would you be able to provide some example code for how to implement fullcalendar? Trying to get it working for several projects.

Macrura · August 14

@J_Szwarga are you wanting to implement in frontend or backend?

There's no secret or magic for how to set it up, you can look at a demo here for example:

https://fullcalendar.io/docs/initialize-globals-demo

and when you see the initialization code, you just need to take a look at the events array, which you could generate in PHP using the API, and then JSON endcode, and output in your script tag.

Sign In

Connect (FullCalendar) to database

Recommended Posts

flashmaster 0

Share this post

Link to post

Share on other sites

Macrura 2,916

Share this post

Link to post

Share on other sites

flashmaster 0

Share this post

Link to post

Share on other sites

elabx 598

Share this post

Link to post

Share on other sites

flashmaster 0

Share this post

Link to post

Share on other sites

elabx 598

Share this post

Link to post

Share on other sites

GiiDii 0

Share this post

Link to post

Share on other sites

jess31 0

Share this post

Link to post

Share on other sites

J_Szwarga 3

Share this post

Link to post

Share on other sites

Macrura 2,916

Share this post

Link to post

Share on other sites

Join the conversation

Recently Browsing 0 members

Similar Content

Browse

Activity

My Activity Streams

Store

My Details

Support