[SOLUTION] GMail Calendar Integration

GMail Calendar Integration

Hello Experts,

Could anyone point me in the right direction on how to get started with GMail Calendar Integration.

I'm building an internal web application using PHP/MySQL, JS/jQuery, and I need to schedule follow-up appointments within my app. So, within my app I need to:

-Have a button that would open a popup showing the availability from GMail Calendar.

-Be able to book the appointment within the popup, or otherwise. But, still have it set within GMail, returning the date, time, and any type of Appointment ID.

-At a later time, reschedule the appointment, if needed. That's why I'm thinking I need to have an Appointment ID returned from GMail?

I'm also aware that for this, I may need to use AJAX, which I have done only in JS, but I'm hoping to save and keep any creds within PHP for security purposes?

Any help will be greatly appreciated.

There are a lot of items here and it is best to stick with just one at a time.

The main thing you are asking is how to integrate Google's calendar with php. There is a PHP SDK for the API https://developers.google.com/google-apps/calendar/quickstart/php and that includes some example code.

> Have a button that would open a popup showing the availability from GMail Calendar.
You want to do this with a Modal and not a pop up. If you are using bootstrap.

http://jsbin.com/yezaberoye/edit?html,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>YOUR CONTENT WILL BE INJECTED HERE FROM YOUR AJAX REQUEST</P>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
  
  
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>
</html>

Open in new window

Instead of opening the modal with a button you can use jquery/js to like this $('#myModal').modal(options) and the docs are https://getbootstrap.com/docs/4.0/components/modal/. You don't have to use bootstrap, but it does make things easy. The idea of a modal is the content is hidden in your html code and at the right time you are unhiding and displaying on top of the other text. This is a much better user experience as opposed to a window that pops up on top of everything or going to another tab.

> -Be able to book the appointment within the popup, or otherwise. But, still have it set within GMail, returning the date, time, and any type of Appointment ID.
This will be a function of working with the API and your front end coding as well as saving to your own db if needed.

> At a later time, reschedule the appointment, if needed. That's why I'm thinking I need to have an Appointment ID returned from GMail?
This is the same as above, you can do this using the API

> I'm also aware that for this, I may need to use AJAX, which I have done only in JS, but I'm hoping to save and keep any creds within PHP for security purposes?
There are two kinds of credentials. One is you may be logging in your users with your application. This will be a function of your php code, checking your db for correct information and setting some sort of token in your db or session. Your js/jquery works on the front end and typically is not part of these credentials. Instead, you make an ajax call to your php page and it is up to your php page that is called to first check credentials before returning anything.

The other type of credentials are working with the API and that should only be submitted via your php page and the API docs discuss this.

Like I said, there are a lot of issues here and it would be best to start with just one to keep things easy. Once item one is solved, close the question thread and move to the next item.

Keeping the front and back end separate, I suggest to first just get a connection to your google calendar. Follow the instructions on the quickstart https://developers.google.com/google-apps/calendar/quickstart/php. As you have issues, post that here and we can work with you. Then we can move on to setting appointments and ajax calls.

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

LVL 56

Scott Fell, EE MVEDeveloper & EE ModeratorCommented: 2017-11-21

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial

APD TorontoSoftware DeveloperAuthor Commented: 2017-11-21

Thanks Scott. I usually tend to keep issues seperately, but was looking for some theory, which you provided.

Thank you.

What may not be clear with the API is there are some steps. First you have to set up credentials in google console. https://console.developers.google.com/apis/dashboard

Once all that is set up, your php code has to first submit your credentials to get a token. Then cache the token and submit it in each subsequent request. Getting through the initial api example will be the hardest part.

GMail Calendar Integration

Who is Participating?