Topic: Calendar Plugin and Google Sync

MWCCredit priority asked 5 years ago


Hi Guys,

I am interested in the calendar plugin https://mdbootstrap.com/plugins/jquery/full-calendar/ as it makes mention of integrating with your Google Calendar, but I was unable to find a resource on how to do so on the page. Can someone tell me more about this process and how it works, and how often it cross syncs between google and the plugin?


Damian Gemza staff answered 5 years ago


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


MWCCredit priority commented 5 years ago

Damian,

  1. I just want to make sure I understand this correctly....

There is a way to cross-sync, I just have to use the calendar API and (js/jquery/php/etc.) to hook a submission from the calendar plugin to my Google Calendar? Is that right?

If yes: Do you happen to know of an example that uses this technique?

  1. For the Full Calendar plugin - Is there a way to block out time slots that already contain appointments?

Using (1&2) I suppose a method like this would work for me (https://i.imgur.com/OlqUO5a.png) where a form on a separate object would dictate the time slots available for that day, and use the calendar plugin to display the available days. In your experience is this a rational approach?


MWCCredit priority answered 5 years ago


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


MWCCredit priority commented 5 years ago

Update:

I was able to fix (2) with the following

        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, 

Damian Gemza staff answered 5 years ago


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



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: 4.6.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows10
  • Provided sample code: No
  • Provided link: Yes
Tags