Ujjwal-Nadhani Ujjwal-Nadhani - 1 month ago 13
jQuery Question

FullCalendar sync with Google Calendar - Permissions

I have looked everywhere.

I am trying to integrate full calendar with google calendar using this webpage. On the first step, it asks you to get a Google API Key. I got my API key, and after following all of the steps, I received nothing. After I went back to my API Console, it displayed:

enter image description here

So, I went on to create credentials. On the creation page, it displayed this:enter image description here

I used the user data option, and it did not work. What shall I do?

Here is my code:

<!DOCTYPE html>
<html>
<link rel='stylesheet' href='fullcalendar/fullcalendar.css'/>
<script src='fullcalendar/lib/jquery-ui.min.js'></script>
<script src='fullcalendar/lib/moment.min.js'></script>
<script src='/fullcalendar/fullcalendar.js'></script>
<script type='fullcalendar/gcal.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
googleCalendarApiKey: 'AIzaSyBiI0FH2jlXUhIEanjDgzuXF6qsXyzXTTo',
events: {
googleCalendarId: 'ujjwal.nadhani@gmail.com'
}
});
});

</script>
</html>


I did make sure my calendar was public and "Share only my free/busy information" is unchecked. LMK if you need any other additional info.

[UPDATE]
I clicked on "If you wish you can skip this step and create an" API key on the credentials page, but it did not work.

Answer

I forgot to add <div id='calendar'></div> to the body of my html file. I feel incredibly stupid.

For any of you looking for some example code, here it is:

<html>
    <head>
        <link rel='stylesheet' href='fullcalendar/fullcalendar.css'/>
        <script src='fullcalendar/lib/jquery.min.js'"></script>
        <script src='fullcalendar/lib/moment.min.js'></script>
        <script src='fullcalendar/fullcalendar.js'></script>
        <script type='text/javascript' src='fullcalendar/gcal.js'></script>
        <script type='text/javascript'>

            $(document).ready(function() {
                $('#calendar').fullCalendar({
                    googleCalendarApiKey: 'AIzaSyAj2Cj2WEMRWRqJqEDb6AMWhYgd0MFYZ6A',
                    events: {
                        googleCalendarId: 'ujjwal.nadhani@gmail.com'
                    }
                });
            });

        </script>
    </head>

    <body>
        <div id='calendar'></div>
    </body>
</html> 

Follow all of the other steps mentioned in the question, and you should be good to go!

Also remember to link your file paths correctly, like @Lahiru said.

Sorry for the confusion,

Ujjwal