Calendar Plugin and Google Sync

Dear MWCCredit,

That's quite easy thing to integrate your Google Calendar with Full Calendar plugin.

Those steps are necessary to integrate those two callendars:

1) You need to have the Google Calendar API Key. You can obtain it in the Google Developer Console.

2) Your Google Calendar need to be public. Here you'll find more information about this process.

3) Obtain your Google Calendar ID. Here also you'll find the necessary informations.

4) Add this script to your project, and use it in your .html file.

5) Now you have to initialize your calendar in Javascript. This is the most minimal reproduction example:

<script type='text/javascript'>

$(function() {
  $('#calendar').fullCalendar({
    googleCalendarApiKey: '<YOUR API KEY>',
    events: {
      googleCalendarId: 'abcd1234@group.calendar.google.com'
    }
  });
});

</script>

Now your Google Calendar should be integrated with your site's calendar.

If you need more help, feel free to ask!

Best Regards,

Damian

Thank you Damian, That did the trick!

I'm having trouble locating the docs on this, as there are still a few features that don't seem to work as expected...

1. The calendar only syncs from (Google >> MDBplugin). Events added to the calendar are not picked up by my calendar.

2. The calendar plugin doesn't respect my Google Calendars (availability), and will show all dates and times are available unless there is another event at that particular time.

Here is the sample code from MDB

if (date.isValid()) { $('#calendar').fullCalendar('renderEvent', { title: 'Dynamic event', start: date, allDay: true });

*date.is.Valid - Does not take into account days that I am not available, either through my business hours, or a vacation reminder through google calendar. Is there another parameter I need to set within the 'events' portion of the script when the calendar is initialized so that it knows to look for this information? If so, what is it? There is no documentation on this on your page...

*'renderEvent'. I take it there is another parameter needed in order for the Event to be posted to the calendar, but I cannot find this on your page for the MDB Calendar Plugin.

Thank you for your time. S

        selectable: true,
        selectConstraint: 'businessHours',
        eventConstraint: 'businessHours',
        selectHelper: true,
        select: function(start, end) {
            var title = prompt('Event Title:');
            var eventData;
            if (title) {
                eventData = {
                    title: title,
                    start: start,
                    end: end
                };
                $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
            }
            $('#calendar').fullCalendar('unselect');
        },
        businessHours:[ 
            {
                start: '09:00',
                end: '13:00',
                dow: [1,2,3,4,5]
            },
            {
                start: '14:00',
                end: '18:00',
                dow: [1,2,3,4,5]
            },


        ],
        allDaySlot: false,
        defaultView: 'agendaWeek',
        minTime: '08:00:00',
        maxTime: '19:00:00',
        editable: true,
        eventLimit: true, 

Dear MWCCredit,

There's no such possibility to set the two-way sync between Full Calendar <-> Google Calendar.

But the Google Calendar has API with which you can programmatically create events.

Please read more here about the Google Calendar API.

Best Regards,

Damian