Jump to content
Sign in to follow this  
flashmaster

Connect (FullCalendar) to database

Recommended Posts

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

tree.jpg

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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);
                   }
               });

 

 

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites
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.
  • Like 1

Share this post


Link to post
Share on other sites
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. 

Share this post


Link to post
Share on other sites

@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.

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Juergen
      Hello @ all,
      I am creating a new inputfield/fieldtype to store opening hours, but I am struggeling to save values from multiple dynamic created inputfields in 1 column of the database.
      Scenario:
      The user can enter one or more opening times per day in a UI.
      Fe:
      Monday open from 08:00 to 12:00 and from 14:00 to 17:00 Tuesday open from 08:00 to 12:00 and from 14:00 to 19:00 and so on
      Via a little JavaScript you can add as much opening times as you need per day - the additional inputfield will be created dynamically.
      After form submission all the values are in the POST array -> this works (see example below):
      ProcessWire\WireInputData Object ( [openinghours_mo-0-start] => 09:00 [openinghours_mo-0-finish] => 13:00 [openinghours_mo-1-start] => 14:00 [openinghours_mo-1-finish] => 18:00 [openinghours_mo-2-start] => 21:00 [openinghours_mo-2-finish] => 23:00 [openinghours_tu-0-start] => 09:00 [openinghours_tu-0-finish] => 13:00 [openinghours_tu-1-start] => 14:00 [openinghours_tu-1-finish] => 18:00 [openinghours_we-0-start] => 09:00 [openinghours_we-0-finish] => 13:00 [openinghours_we-1-start] => 14:00 [openinghours_we-1-finish] => 18:00 [openinghours_th-0-start] => 09:00 [openinghours_th-0-finish] => 13:00 [openinghours_th-1-start] => 14:00 [openinghours_th-1-finish] => 18:00 [openinghours_fr-0-start] => 09:00 [openinghours_fr-0-finish] => 13:00 [openinghours_fr-1-start] => 14:00 [openinghours_fr-1-finish] => 18:00 [openinghours_sa-0-start] => [openinghours_sa-0-finish] => [openinghours_so-0-start] => [openinghours_so-0-finish] => ) The property name is always the name attribute of the field 😉 . If the property is empty means closed on that day.
      Now I need to combine all those values into 1 array (or json array) and store it in the database in 1 column called 'hours' in my case (see screenshot below):

      In my ___processInput(WireInputData $input) method I have tried to make it work like this:
      public function ___processInput(WireInputData $input): self { $name = $this->attr('name'); $value = $this->attr('value'); //input object includes always every input on the page, so lets filter out only inputs from this field //we need to do this, because the number of values is variable - so extract only values that starts with $name.'_' $nameAttributes = []; foreach($input as $key=>$value){ if(substr($key, 0, strlen($name.'_')) === $name.'_'){ $nameAttributes[$key] = $value; } } // loop through all inputfields of this fieldtype $time_values = []; foreach($nameAttributes as $nameAttr => $value) { $time_values[$nameAttr] = $value; } } //save it in the database $input->set('hours', serialize($time_values)); return $this; } The only important part of this code is the last part with the serialize function.
      After saving it will create a record in the database, but the value is always NULL (default value) (see below).

      Checking $time_values returns all the values, but printing out "$this" shows me that the property "hours" inside the Openinghours object is empty (see below) - so the mistake must be there, but I dont know where?!?!?!?
      [title] => Home [openinghours] => ProcessWire\OpeningHours Object ( [data] => Array ( [hours] => ) ) If I check the sleepValue() method or the sanitizeValue() - they are also empty. So it seems that the values will not reach these methods. I havent found a clear documentation of whats going on behind the saving process of an inputfield.
      As far as I know the saving process starts with the form submission. The values are in the POST array and will be processed by the processInput() method. Before they will be saved in the database they will be sanitized by the sanitizeValue() mehtod and afterwards they will be prepared for storage in the sleepValue() method.  The last step is the storage itself.
      Has someone an idea what is missing by storing values from multiple fields into 1 database column or has someone a working example of such a scenario on github to help me out.
      A clear explanation of the storage process will be also helpful.
      Thanks and best regards
    • By Pip
      Hi Everyone 
      I've been working on Processwire for two months now. Structuring the website as needed. Unsure why but I'm getting this one now. Seems my fields has crashed. 
      I've tried googling some answers but can't seem to find a step by step guide on how to rectify this. Any advise? Practically new on this. 
      TIA. 

    • By Rodd
      Hi everyone!
      I have a website in a production environment and I want to duplicate it in a local environment. I exported the content of the website (with the 'Site Profile Exporter' module) but I cannot use it actually. I've got an issue with the database. I imported this one in MAMP then.

      I also exported the pages (with the 'ProcessPagesExportImport' module), but I cannot import it to my local website because the fields don't exist. So I created this fields, but I have this error :
      How can I use the elements that already exist and are presents in my database? How can I duplicate correctly the templates, fields and pages?
      Thanks by advance
      PS: Sorry if my english is bad
       
    • By BFD Calendar
      We're looking for someone who can make an addon for our website using Formbuilder and publishing the pages to a Google Calendar instantly.
      The use is a setup for laser reservations for a modelbuilding lab, see www.mekano.info to have a bit of an idea. On the 'calendar' page you'll find a linked Google calendar that lists all events per day. These events are now all added by staff members in a shared Google calendar. Underneath the calendar is a list of recent use of our lasercutters, generated by a form where user, machine and start time are entered and duration is calculated by editing that form. I have a likely form to add a reservation to enter user, machine and time/date but we want them to go into our shared Google calendar 'immediately'. If you look at early June in the calendar you can see how it should look like.
      I know there are simple solutions to make this happen but haven't figured a working out.
      We want Google calendar so all our staff can subscribe and see the calendar on all their devices. On the other hand we want to keep a list of students who made reservations because at some point they are limited.
      If you're interested I can give you a login to see a bit more behind the curtains. Part of the website is public for students and guests, quite a few functional pages are only visible when you're logged in.
    • By DooM
      Hello guys,
      I'm trying to figure out how to sync fields and templates between staging and production environments.
      I've found Migrations module by Lostkobrakai, but with use of it all the fields and templates must be created by API, which is kind of uncomfortable.
      I also tried ProcessDatabaseBackups module which can export only certain tables, but I don't think it's the best practice to do that.
      How do you guys solve this problem? It's very annoying to setup everything three times (dev, staging, production).
      Thanks a lot :)
×
×
  • Create New...