Saturday, 25 May 2013

myEvents - Your Google calendar events now on your website - jQuery plugin


Now share your business events in your Google Calendar on your website. This plugin will create an event calendar for you on your webpage. All you have to do is to create a public calendar for your website using Google calendar service and your events will be pulled and displayed on your HTML page. You may also share events with images by adding the image link in your Event description in Google Calendar. The events are also linked to your Google calendar page.






How to use:

The download pack contains the plugin file 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. Images in your myEvents widget

Now you can show images for a particular event. Say I have a flower day on 10 July. So I create an event in my google calendar for it. Then in the description textbox I will add the link to an image. This link will be surrounded by curly brackets. Ex: "{http://image-link.png}".



This event is displayed on my web page as shown below



4. Javascript

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


The description of all variables is shown below -

 

 

pathToLoadingImage

This the path to a loading image that is used by MyEvents plugin. Basically this image is shown when the next image is loading in the lightbox. (I have provided a loading image in this download; just provide the path to that image after you upload it to your server)

 

If this is not supplied, no loading image is shown.

eventWidgetWidth

The width of the MyEvents widget.

 

If this is not supplied, width of the widget defaults to 640px.



5. Include plugins

Include the jQuery plugin if not done already. Now, include the plugin myevents.min.js before the end of your body tag and you are done!


6. Create a container for your interface

Add a div as shown below in you HTML. This div will contain the Pimax widget and display your Events.


Your events are now online!

18 comments:

  1. This looks great. Way better than just embedding a Google Calendar. Thank you.

    ReplyDelete
  2. Thank you so much for this. I have been searching high and low for a walkthrough on this and this was just what I was looking for. Very easy to follow, and handsome results. You taking the time to do this is amazing. I look forward to seeing what other projects you walk us through next.

    ReplyDelete
  3. This is awesome, thanks!

    Is there a way to control the width of the events at all?

    Thanks again.

    ReplyDelete
  4. A lot lately with my father so hopefully this will get him to see my point of view. Fingers crossed!

    ReplyDelete
  5. Hi

    can change to responsive ?

    ReplyDelete
  6. can I change the color for the dates?

    ReplyDelete
  7. There is a bug in getDateLowerLimit() method.
    Variable dateLowerlimit is set to "2013-010-05T00:00:00+00:00" if current month is October 'cause getMonth() actually returns month from 0 to 11.

    ReplyDelete
    Replies
    1. Hi, do not you know how to fix it? Thanks for help.

      Delete
  8. This plugin is not working now. Evrything was OK few days ago, but now... Can u please fix this problem. Thanks a lot :)

    ReplyDelete
  9. Rimantas' fix worked for me. Anyone know how to set the default date as today's date? It currently displaying past events on load. Also, any way to change hours to am/pm?

    ReplyDelete
  10. We were able to modify the extracted js file and fix this for the time being:

    *************
    function getDateLowerLimit() {
    var todayDate;
    if (dateLowerlimit == "") {
    todayDate = new Date();
    dateLowerlimit = todayDate.getFullYear() + "-" + (todayDate.getMonth() + 1) + "-" + (todayDate.getDate() < 10 ? '0' : '') + todayDate.getDate() + "T00:00:00+00:00"
    } else {
    todayDate = new Date(dateLowerlimit)
    }
    }

    *************
    This will not work in January though, so at that point we'll have to swap it back out for the original code. Better than not functional?

    ReplyDelete
    Replies
    1. Fix -

      dateLowerlimit=todayDate.getFullYear()+"-"+(todayDate.getMonth()<9?'0':'')+(todayDate.getMonth()+1)+"-"+(todayDate.getDate()<9?'0':'')+todayDate.getDate()+"T00:00:00+00:00";

      Delete
  11. Is this working now.... I just tried to add it and I am not getting any thing.

    ReplyDelete
  12. Is it possible to replace all the CSS? I want to do a lot more than just make it wider

    ReplyDelete
  13. I found a bug.... If the actual google calendar event laps from a.m. to p.m., the event shows as only a.m.... For example-- if the actual google calendar event is from 11:00 am to 12:00 pm, the script will display 11:00 a.m. to 12:00 a.m.

    ReplyDelete
  14. It works great! Is there any possibility to change the language? at least names of days and months and the legend "LOAD MORE". Thanks.

    ReplyDelete