Sunday, 17 March 2013

Your Google calendar events now on your website - jQuery plugin


This script
- pulls events that you create in your public Google calendar and displays them on your website.
- you may choose how many events to display at a time.
- each event box can show the event start date-time, timezone, location of the event, summary and description of the event.
- each event box has a link to the original event you defined in your calendar.






How to use:

The download pack contains the plugin file gcal-events.min.js and the HTML file gcal-events.html that I have deployed in my live demo.

1. Get your Google API key

This is a simple 2-minute process; just visit the API console.
If you see a "Create project" button, click it to create a new project. Select the Services pane, and activate the Google Calendar API.



Visit the API Access pane. The API key is near the bottom of that pane, in the section titled "Simple API Access." Note this API key.



For more details on this visit official Google Doc.

2. Create a public Google calendar

Navigate to your Google calendar account and create a new calendar.



Fill in the details as shown and make the calendar public.



Navigate to the calendar setting and note your Calendar Id as shown in these screens.





3. Javascript

Now paste your Calendar Id and your API key in the javascript as shown below -


"maxGcalEvents" is the maximum number of events you want to display at a time.
"colorBox" is an optional parameter. This is a javascript array that holds color codes for each of the event boxes and will be applied in a cycle. The color code can be of the form "rgb(r,g,b)" or "#xxx" or any HTML color value.

4. Include the plugin - HTML

Before your body tag ends in your HTML, include the plugin as shown -


And your events are online and ready to go big!

33 comments:

  1. Hi!

    I have one problem:
    My calendar has many entries -but your script does not show the latest entries now are happening. It shows the first entries of the day. What's wrong?

    ReplyDelete
    Replies
    1. We will release a fix and get back to you... asap
      Could you also please send me a link to your site that has this plugin

      web.codehandling@gmail.com

      Delete
    2. Also send me your calendar ID ... that you are using in the script

      Delete
  2. Nice article

    Thanks dude

    Vijay
    http://www.rightern.com

    ReplyDelete
  3. I really like this blog so much. I really don’t know exactly what to write other than I truly enjoyed reading through these blogs. I will keep visiting your website . I learned quite a bit from here.

    ReplyDelete
  4. Hello,

    Congrats for the script :) i'm using it and i would like to know how to change the arrows and the language to portuguese? Could you please help me out?

    Thank you

    ReplyDelete
  5. Hello,
    in first thanks for this great plugin. I ould like to know if it was possible to display the events in "month view" to see the beginning and the end of an event
    Thanks again

    ReplyDelete
  6. Hello,

    I already change the language to Portuguese but the warnings are still in English, just like "No more events found!", where can i translate?

    Could you please tell me how to customize the arrows and hover the arrows?
    Thank you for your time

    ReplyDelete
    Replies
    1. This will do the trick for your right pointer ...

      .gcal-rpointer{
      background-image: url(http://cdn1.iconfinder.com/data/icons/defaulticon/icons/png/16x16/arrow-right.png);
      background-position: center center;
      background-repeat: no-repeat;

      text-indent: 100%;
      white-space: nowrap;
      overflow: hidden;
      }

      .gcal-rpointer:hover{
      background-color: transparent !important;
      }

      Replicate the same for your left pointer ..

      Delete
  7. This comment has been removed by the author.

    ReplyDelete
  8. How do you change color of the date box. And also how can u view full calendar if a user clicks on it

    ReplyDelete
    Replies
    1. Currently, the only way is to edit the raw javascript code.

      First, you have to obtain the original file that isn't minified (.min.js). You can do this at this site: http://jsbeautifier.org/ . The code should now look nice and neat compared to the original code on one line.

      Now, all you have to do is edit a couple of lines and you should be set!
      To change the color of the date box, go to this line and change the color to whatever hexadecimal color you want:
      "style = <"style>#gcal-table{margin:0px auto;}.event-header {width:150px;height: 54px;***background-color:rgb(48,128,221);***" etc...
      To view the full calendar simply exchange "eventArray[i].htmlLink" in this line with the url you want the plug-in to link to.
      "htmlLink = eventArray[i].htmlLink;"

      Your code should be set! By the way, the original file was minified so that the page would run a little bit faster and more efficiently. If you want to minify your new file, you can go to this site and minify your javascript: http://jscompress.com/ . If desired, you can make your file extension ".min.js" rather than the standard ".js".

      Now just upload the new file instead of the original file and make sure to change the your html code to point to the new file:
      "<'script src="./gcal-events-new.min.js">"

      This worked fine for me, so just reply if you encounter any problems in the process. I also edited other things in the plug-in such as size and format, so feel free to reply if you have any questions on doing more editing to the javascript. Good luck! I hope this works for you.

      Delete
  9. Please can you confirm...With this code is it possible to allow events in an embedded calendar to be colour coded as they were in the original google calendar? eg. in my embedded calendar at this link
    http://www.pathkids.com/rota/
    all the events are in the same colour... it would be SO much nicer if I could make them different colours. Pls help

    ReplyDelete
  10. It doesnt work , the other one too... stopped working 1. october at 00:00 ....
    help....

    ReplyDelete
  11. Yep, stopped working for me too, 1st October at midnight. Any idea why?

    ReplyDelete
  12. Found the mistake: it's set up so that it sends a malformed request to google when the month is greater than 9:
    if (dateLowerlimit === "") {
    todayDate = new Date();
    dateLowerlimit = todayDate.getFullYear() + "-" + (todayDate.getMonth() < 10 ? '0' : '') + (todayDate.getMonth() + 1) + "-" + (todayDate.getDate() < 10 ? '0' : '') + todayDate.getDate() + "T00:00:00+00:00";

    Seems to work fine (for now) if changed to
    if (dateLowerlimit === "") {
    todayDate = new Date();
    dateLowerlimit = todayDate.getFullYear() + "-" + (todayDate.getMonth()) + "-" + (todayDate.getDate() < 10 ? '0' : '') + todayDate.getDate() + "T00:00:00+00:00";

    Hope that helps (nb I had to extract and modify the full version as only the .min.js available here.

    ReplyDelete
  13. I haven’t checked in here for some time as I thought it was getting boring, but the last few posts are good quality so I guess I will add you back to my everyday bloglist. You deserve it my friend

    ReplyDelete
  14. this is the way to go when it comes to scheduling thank you for this article

    ReplyDelete
  15. Hi,
    Is it possible to have the source code?
    Thanks.

    ReplyDelete
    Replies
    1. The javascript currently seems like gibberish, but that's only because it's minified (.min.js). To get the original code that makes any sense, you can "beautify" it through this site: http://jsbeautifier.org/ . Just paste it into the box and it will generate the original code for you.

      Delete
  16. This is a great little plugin, thank you! I'm looking to have the plugin only display events from today's date onward however... is there a quick fix to implement that? Also, I'd like to change the time display from 24 hour to 12 hour. Any help would be greatly appreciated!

    Thanks,
    Nate

    ReplyDelete
    Replies
    1. I also think this plug-in is great, and I had exactly the same problem in converting from 24- to 12-hour format, and I'm happy to say that I found a solution for it.
      First, you'll have to obtain the original code by "beautifying" it since it is currently minified (.min.js). You can do this at this site: http://jsbeautifier.org/ .

      Now that all of the code is organized, you can define a new function. I found this function in stackoverflow.com, and it works perfectly for fixing the time format:

      function formatAMPM(date) {
      var hours = date.getHours();
      var minutes = date.getMinutes();
      var ampm = hours >= 12 ? 'pm' : 'am';
      hours = hours % 12;
      hours = hours ? hours : 12; // the hour '0' should be '12'
      minutes = minutes < 10 ? '0'+minutes : minutes;
      var strTime = hours + ':' + minutes + ' ' + ampm;
      return strTime;
      }

      Just paste it into the top of the javascript file.
      It currently formats the time as 00:00 am, and if you would like to change the "am" to "AM" just change it right in this javascript code at:
      var ampm = hours >= 12 ? 'pm' : 'am';
      to
      var ampm = hours >= 12 ? 'PM' : 'AM';

      Now, you just have to use this function in the original code.
      Just go to these lines in the getFormattedDate() function:
      if (withZone) return "<'span class='gcal-datetime'>" + dd.getDate() + " " + monthNames[dd.getMonth()] + " " + dd.getHours() + ":" + (dd.getMinutes() < 10 ? '0' : '') + dd.getMinutes() + "
      <'span class='gcal-tzone'>" + timeZone + "";
      return dd.getDate() + " " + monthNames[dd.getMonth()] + " " + dd.getHours() + ":" + (dd.getMinutes() < 10 ? '0' : '') + dd.getMinutes()

      This section "dd.getHours() + ":" + (dd.getMinutes() < 10 ? '0' : '')" in both lines currently gives the time. Just replace this part in BOTH lines with "formatAMPM(dd)", and it should do the trick!

      Your code should be set! By the way, the original file was minified so that the page would run a little bit faster and more efficiently. If you want to minify your new file, you can go to this site and minify your javascript: http://jscompress.com/ . If desired, you can change your file extension to ".min.js" rather than the standard ".js".

      Now just upload the new file to replace the original file and make sure to change the your html code to point to the new file:
      "<'script src="./gcal-events-new.min.js">"

      This worked fine for me, so just reply if you encounter any problems in the process. I also edited other things in the plug-in such as size and format, so feel free to reply if you have any questions on doing more editing to the javascript. Good luck! I hope this works for you.

      Delete
  17. Hi
    Has anyone been able to get this to return the original colour from the Google calendar
    Thanks

    ReplyDelete
  18. Hi!
    I'm trying out this script, but even using the sample "gcal-events.html" fike with my API and .ics URL entered, it never gets past 'loading...'.

    Here's the site...

    http://ciproweb.com/cjstreetfood/gcal-events.html

    Thanks!
    Steve B.

    ReplyDelete
  19. Hi, I had a question on how this plug-in handles all-day events.
    I tried inserting an all-day event in the calendar, and the plug-in responds by showing the event at 17:00 the day before. This seems to correspond with the time difference from the calendar time zone (PDT) to the English time zone (GMT).
    I was wondering if a fix can be supplied for this behavior, and maybe also where the problem is located in the javascript file.

    ReplyDelete
  20. Thanks for this post, it was exactly what I was looking for. Quick question for you: How can I change how the event info is mapped? I would like to create a different layout for the event info (title, date, time, etc). I attempted to grab a copy of the original JS file (http://jsbeautifier.org/) but was unable to locate it. Any feedback/help you are able to offer would be very appreciated.

    ReplyDelete
    Replies
    1. The layout of the html plug-in is contained in multiple javascript variables as 'strings', and sent to the webpage.

      If you want to change the font appearance, size, color, dimensions, etc.,
      Modify the <'style>' tags:
      Scroll down past the getFormattedDate() function, and find a variable named style. This variable contains the first style tag, is appended to the html, and then redefined to another style tag, and sent again. To change the event header styles, go to the second declaration of 'style' and edit the css after '.event-header' as you wish. There you can change the background color and the location text font. You can also edit after '.gcal-datetime' for the datetime, and after '.gcal-tzone' for the time zone.

      If you want to edit the actual layout of the html,
      Modify the tags in the body:
      Go down to the showTumbo() method and edit the different appends of 'eventHTML'. There you can actually edit the layout of the HTML. If you understand javascript you can also inspect the origins of the information inputted to showTumbo() to edit the actual text that you receive in event-header.


      And that should do it! Just follow the steps and spend some time playing around with the code, and you should be able to edit the event-header however you want.

      Please ask any other questions if you need any help in customizing any other part of the plug-in. I'd be more than happy to help!

      Delete
  21. Hi there! Thank you for this post, this is really helpful for me. However I do have some questions, how can I make a full calendar with events instead of only showing particular event? I am sorry if my question sounds dumb, I am new in this subject.

    Your help would be so much appreciated.

    ReplyDelete
  22. Hello! I recently applied this library to my school's org website and it has been awesome. Everything has been going great for about a week until I realized that the plugin stopped working. I tried taking a crack at it and found that I was getting a bad request 400 from google calendar api? (showTumbo(data)). Do you have any advice? Thanks

    ReplyDelete
    Replies
    1. The calendar seemed to have fixed itself over time. I just hope it won't happen again...

      Delete
  23. I have to create a calendar for my site and debating whether to use the Google calendal and have it embedded into my site or just use a Wordpress plugin. I hope the bugs have been fixed because this is one of the best options I have to get this done.

    ReplyDelete
    Replies
    1. Hi

      There might be bugs in this version. We have a plan to make a new version of this plugin. However, this will take some time atleast a month.

      Cheers..

      Delete
  24. How do you handle Multiple Calendars?

    ReplyDelete