Saturday, April 20, 2024

Render Google Calendar Events In Fullcalendar

Render Google Calendar Events In Fullcalendar

Hello to all, welcome to In this post, I will tell you, How to Render Google Calendar Events In Fullcalendar? Fullcalendar is the best A JavaScript event calendar. Customizable and open source.

In this post, we will Render Google Calendar Events In Fullcalendar and here is the working code:
<!DOCTYPE html>
<meta charset='utf-8' />

<link href='/css/fullcalendar.min.css' rel='stylesheet' />
<link href='/css/fullcalendar.print.css' rel='stylesheet' media='print' />

<script src='/js/lib/moment.min.js'></script>
<script src='/js/lib/jquery.min.js'></script>
<script src='/js/fullcalendar.min.js'></script>
<script src='/js/gcal.min.js'></script>


  html, body {
    margin: 0;
    padding: 0;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    font-size: 14px;

  #calendar {
    max-width: 900px;
    margin: 40px auto;

  #calendar a.fc-event {
    color: #fff; /* bootstrap default styles make it black. undo */


<link href='' rel='stylesheet' />
<script src=''></script>
<script src=''></script>


  $(function() {


      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,listYear'

      displayEventTime: false, // don't show the time column in list view

      googleCalendarApiKey: 'MyAPIkey',
// Single Calendar
      events: {
        googleCalendarId: 'gCalID-1',
            color: 'green',   // an option!
            textColor: 'black', // an option!
            className: 'my-event-1

      eventRender: function(eventObj, $el) {
          title: eventObj.title,
          content: eventObj.description,
          trigger: 'hover',
          placement: 'top',
          container: 'body'





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



  There are so many tricks in fullcalendar and I will let you know all. Please do comment if you any query related       to this post. Thank you.

the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.