Recently I had a client who needed an single “Add to Calendar” link on her site for an upcoming event. She didn’t want a full event plugin on her site since she rarely hosts events, but wanted her viewers to easily be able to add this event to their calendar. I searched for a plugin that would add this functionality but couldn’t find one that would do this without adding a whole calendar/event functionality.
But then I found AddToCalendar. It’s free and there are no ads that come with it. Just fill out your own info within the sample code and add to your site! The only thing will be a small addtocalendar.com link when people actually add it to their calendar, but for me, this wasn’t a problem. I suppose you could remove it from the script if you really wanted to, but it seems like a small price to pay to have it all written out for you.
I like that it has options to include Google Calendar, iCalendar, Outlook, Outlook Online and Yahoo! Calendar.
First, they give you a link to add to your header.php file:
If this is a problem for you, just visit the link, and copy and paste the CSS to your own style.css file or add it with a Custom CSS Plugin.
Next, add their simple script to your post or page in the TEXT editor:
2015-05-04 12:00:00
2015-05-04 18:00:00
Europe/London
Star Wars Day Party
May the force be with you
Tatooine
Luke Skywalker
luke@starwars.com
No need to add this to the special scripts section, just add it right into your TEXT editor.
You’ll need to customize the second part with your own event info. If you’re an American like me, remember that the sample date is May 4th and NOT April 5th! It goes year-month-date.
Be sure to test it to make sure it works! I got messed up on the timezone part, but just visit their site and click on the Event data options tab near the bottom. There you will see a dropdown where you can find your correct timezone. I had forgotten to put the underscore where the space is in “New York”.
Since I added the CSS to my own style.css file instead of linking to theirs, I was able to customize it so my button is pink instead of blue. But they have several options of style sheets you can link to so you can options of pure text or even icons. Check it out and let me know what you think!
NOTE: You must do all of your edits in the TEXT editor. If you switch over the visual editor, WordPress will automatically disable this code.
Amber says
When I do this code for the calendar button, it looks aweful on an iphone IOS10. It creates all of the information in the box. Any idea how to fix that? I sent add to calendar a message about this.
Laura Hartwig says
Looks great on iOS 9. Hopefully add to calendar will fix once there are more downloads of 10.
Schalk says
Hi,
I love this button and appreciate the code. And while I appreciate the effort to maintain this, I wish there was a way, even if I have to pay, to remove the advertising.
Yes, there is some advertising injected. Add the event to google calendar and you will see a link in the Description to http://go.addtocalendar.com
Unless I’m doing something stupidly wrong, in which case I’m happy to be corrected 🙂
Laura Hartwig says
Yes, you’re right. When people actually add the event to their calendar, in the description there is a link to go.addtocalendar.com I don’t see any way in the code they give you to modify this, so it looks like you would have to create your own js file and link to it instead of http://addtocalendar.com/atc/1.5/atc.min.js and take the ad out of there, although I would still give them credit at least in the code.
PATHZ says
How can i remove that automatically add to the calendar part?
Laura Hartwig says
Hi there! Can you be more specific? This whole post is about adding to calendar, so not sure what you mean by “automatically”?
zoorik says
Dear,
Thank you for your nice way out but it doest work for me
first of all there is a js file that we have to put in head and not a css file its a js file
but just to make sure i dld it from the link you gave and put in my CSS in wordpress but yet it doesnt work.
can you help me somehow?
thanks alot
Laura Hartwig says
The js script can go into the actual page in the editor. Just use the “text” tab instead of the “visual” tab to add it in. Hope this makes sense?
J. Frederick says
I have been looking for a way to integrate this with jquery DatePicker. I am kind of surprised there are not more solutions that allow the user to select the date fields. Is this even possible?
Laura Hartwig says
Hmm, I’m not sure, but this certainly works.