New: Event Calendar Stack

We just released our newest stack: Event Calendar.

Load your events from a google calendar or add your own events directly in the stack - the choice is yours. The Event Calendar Stack is not meant to be a full featured calendar but there was a need for a simple but still advanced event listing tool. You can fine tune almost any aspect of the layout and design (including 20 custom colors) and it is fully localizable in your language. Of course the calendar is also fully responsive.

If you are an artist giving exhibitions, a musician selling concerts or just a small football club organizing matches for your local team, the Event Calendar Stack is made for you.



Finally a calendar that considers upcoming event listing.
Most people do not want to click trough calendars or even view a “calendar”, they just want to know whats coming up.

Apple finally got this right in their notification center in IOS 10, with “UP NEXT”.

  • only thing I need is:
  1. Most desired: Option to loose the “calendar view” part all together (many WP sites use that, by basically using the blog dates feature, but that would mean manual or second round input)
  2. Huge need: Option to add iCal/webcal feeds (Google is too restrictive and un user friendly, and webcal makes it much easier for IOS and mac users)
  3. Option to use a JSON feed (central place/CMS type)
  4. Option to add an image/icon with each date posted

This is a huge step in the right direction, and hopefully you can get us a solution that can be used by larger sites and audiences by working on the issues above.

“prompting” people is more effective on a website (or anywhere for that matter) than making them research a calendar. Viewing a calendar is for people who are serious and interested enough to go deeper. Just like with Home pages on websites, you have to meet the immediate demand first.

@willemn: Thanks for the positive feedback.
The stack’s intention was to be very simple and streamlined but I see the potential in it and I already received a lot of constructive feedback for new features. Here are some responses to your requests:

  • calendar view: this should be easy to implement (actually just an option to hide the calendar). Do you think, hiding the month name and month navigation should also be hidden? Or only the individual days?
  • while iCal (hosted ics files) should be possible, webdav and MobileMe/iCloud support is too difficult I think. I already have added .ics file support on my list for a next update
  • json shouldn’t be a problem as the calendar actually uses a json object to build the calendar. The only problem I see is how other services provide the json object as it needs to be standardized. Maybe just an option to load an external json file in the correct format and you are responsive to provide it yourself?
  • image/icon support: noted



Does your stack have to ability to post 12 hour time, rather than 24 hour time?

Thanks Chris, I love your approach in keeping it simple at first.
I’m not expecting you to develop anything custom for one user either etc. So I’ll leave it up to you to decide. In either case thanks for your efforts.

Yes hide everything except the listing. This would be exactly the way “Up Next” works and an awesome way for users to quickly see what is coming up. (a button or link in the area would allow people to see the full calendar if they wish)

I am including 2 example screens, one (1a) shows the “home page” view: A simple listing on a homepage to help people quickly figure out whats next. The other (1b) shows an expanded list, which I don’t really care for, because I would place your full calendar approach there instead. I think this will have more to do with how many events there are, and in my case too many. Others may not care and just want a huge infinite scrolling list.

There is some fairly simple php code floating around that allows pulling in the i-cal data. Frankly speaking, the url and data you get from the ical feed is the same as getting the URL for a Google webcal feed. They both us the same basic data approach and both are webcal based. Both also have to be public feeds. Seems pretty straightforward.

It sounds like you may be referring to the old webdav scheme, which Apple does not use anymore. They have replaced it by taking out all the “extra” work Google makes you do to generate a proper feed. The feed URI can now be generated by any user from any device anywhere anytime (and syncs all of them automatically), without all the admin hassle Google gets you into. Leave alone that Google makes you go to a browser to get all this done. Apple’s approach is easy as pie.:slight_smile:

JSON source, yes. agreed. Being able to “point” to a properly formatted file is most likely best at the moment. No need to make it complicated at the onset. There are several ways users can update that file and have some form of “automation”. The goal is to get away from manual entry but also provide a way for other services to “influence” the posting. I have to pull event data from several partner/related sites and would write a file that combines them so hat all is automatically listed in one place.

Thanks for your response. Hope this makes sense :smile:

The option to choose between 24h or 12h based time format will be available in the next update.

Thanks for the info.

  1. The designs look very different from what the stack actually does and also creates a whole different DOM, so a listing like in your examples is not easy to implement. But I got the idea now.

  2. Concerning google/iCal/webdav: Actually the stack uses the google calendar api which lets me pull the events in json format. It is not a webdav stream. So what I have to do is find (and adjust) a good way to read in the ics data, convert it to the proper json format and output the string. Sure, there are existing PHP libraries but it isn’t as easy as just copy/paste the code.


I tried this out and it is a very tidy calendar/events listing. I am hoping to use for a community centre to list activities as it seems well suited. I have a couple issues before I can implement it:

  1. editing the typography - type size, etc
  2. ensuring when someone lands on the page it shows events for the current day
  3. It does not need any interaction with the calendar to show events (it currently shows no events when landing on the page until you click on a date and then the calendar populates).

Wish list:

  1. hide calendar
  2. week view
  3. Numbers of events shown, etc. - an “all” option
  4. user navigation - a simple next/previous day button .

I am currently using DateSnap to achieve this, but editing limitations make this cumbersome and quite ugly.



Nice work! Very useful and handy stack.

1 Like

Thanks Aaron for your positive feedback!

I just released a new update which adds the following new options:

  • New: AM/PM Time Format Option
  • New: End Time Option
  • New: Hide Calendar Days Option
  • New: Hide Current Month Title Option
  • New: Simplified Date Line Option
  • New: Month Title Border Color Option
  • Other Changes: Some Style Adjustments

I am now working on implementing hosted calendar file support (vcal, ical, ics and json) but this still needs some time.


Hi Chris,

How do I test the calendar (with icloud link) on a browser, before I put it online?
When I test the RW page of the calendar in my browser it shows everything but the calendar.
Do I have to publish the site online to see/test the calendar?


Hi Luis
You should be able to test it within RW’s preview as for the remote calendar (icloud, google calendar, …) you need a web server and you can’t just open the site as a file in the browser. If it works within RW, changes are high it will also work online - as long as your ISP does support PHP and PHP is configured correctly.


Hi Chris… any possibility to change/translate to Danish language? Specific Month and days would be nice to have in Danish…

Hi Søren
The calendar is fully localizable into any language. There already are language files included for english, spanish, french, italian, german, dutch, swedish and chinese. You can copy a file and edit in in a simple text editor of your choice (but make sure to disable automatic curly quotes in the editor). Then just link to the file and you’re all set.

btw: It would be great if you can send me the danish language file so I can include it for other users in the package!


1 Like

Hello Chris @cric ,
I really like your Stack and I just have one thing:
I’d like to get the Title, Date and Location centered on my page.
Can you lead me in the right direction on how to get that done?

Example here:

Thanks in advance for your answer