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

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 Livius
      Hello dear Processwire Users
      I am still fairly new to Process Wire and I've been looking for a Calendar solution on my Website.
      I wonder what other PCW Users use for their websites as i have found no Module for a Basic Calendar which I could use.
      I have heard that most Websites simply use the Google Calendar but i don't know if that is true.
      I thought that a solution that includes the PCW Backend would be pretty neat
      Thank you in advance!
    • By artaylor
      Hi,
      I have a project that, based on initial specs, I decided to build in another framework due to the client wanting the ability to regularly import data from an existing manufacturing system. I decided a platform that would allow me to match the imported data to the system would make sense. Since then, the project has morphed (I know, it never happens) and the regular import is unnecessary and so a comprehensive admin is needed. I want to switch to PW but don't want to have to manually link thousands of tables.
      I have the import routine working for the main table but I am not sure how to import the support tables and automatically create the page fields for them.
      Oh, in case it matter, the links are not autoincrement id fields, but character codes. Eg. Category table - code: TRN, description: Transportation
      If someone can point me in the right direction it would be much appreciated.
    • By alxndre
      This is a simple loader for LessQL, an ORM alternative for PHP. It is based on NotORM, and provides a quick way to access and find things in a database, including traversals and back-traversals.
      As discussed in some earlier topics, there are times when you'd like to store some data away from ProcessWire's pages/fields/templates structure for whatever reasons. However ORMs are sometimes cumbersome and requires a lot more effort to deploy. LessQL offers a quick way to just up and go like you're using an ORM but without the added complexity and configuration files.
      Module: https://github.com/alguintu/LessQL
      This modules simply loads the LessQL library into ProcessWire and exposes a $lessQL variable (configurable in settings) that gives access to your database. It uses the same database specified in $config by default, but can be set to use a separate database, along with its credentials.
      Usage given a table person :
      $people = $lessQL->person()->select("id, firstname, lastname")->where("firstname LIKE ?", "%alex%")->orderBy("firstname")->limit(10); It uses lazy loading and doesn't execute the query until it needs to. Checkout www.lessql.net for more info on LessQL.
      Module wrapper is pretty much lifted from @teppo's RedBeanPHP module, but with a few modifications.
       

    • By louisstephens
      I was going to start working on a new site for myself and wife (a new hobby we have taken up), and had decided to try out Runcloud and Digital Ocean. I got my drop set up on digital ocean, as well as setting up various hooks/databases etc between github and run cloud. However, now I have hit a wall. 
      I cloned my "blank" repository into my local host (managed through MAMP) and dropped in a fresh install of PW, but now I have no idea of how to move forward. Is it best to just work locally, and then push this into a branch, and when ready, change branches and commit all to run cloud? Run cloud gives me an IP address to use for the database, but I can't get my localhost setup to recognize (I just get "Connection refused"). I am also unsure how to actually get my commits to push to run cloud, and handling the new set up.
      I am probably in over my head, but I thought I would try something new as a good learning experience. However, now I am just drowning  . Hopefully someone has some ideas on how to approach this, as I am very eager to get under way.
    • By sreeb
      Hi Everyone,
      Since a couple of months, we have our new website live with processwire as CMS system.
      In this website there is a huge database (1900+ trees), wich can be found with different filters. Take a look at www.vdberk.com/trees.
      The website does not to be seen very fast when you select a couple of filters. Every time there is a delay between 3-5 seconds. 
      Now we are migrate the website to another sever, with more preformance. So we hope this give us some timeprofits.
      Does anyone have any kind of suggest, to make this filter faster. Now the website is on PHP5.6, is php7 better? Can this make a different? We used ProCache already.
      Thanks in advance