Calendar API WordPress Plugin

I don’t think I’ll ever forget my first big project with PixelMark. They were trying to add a pretty calendar to a website that would get events from an external app called Mobile Town Guides. Mobile Town Guides had a great API for getting the calendar events, but the events were in JSON format. The tried and true calendar (and probably the only calendar that can populate itself with custom data), full calendar, unfortunately wasn’t pretty enough. I kept searching and eventually found a calendar called Tiva Events Calendar which is much lesser known on Code Canyon.

According to the description, I could populate the calendar with events from a json file, and that’s exactly what I needed! I got hacking away, and, after changing the structure of the incoming JSON events from the API, it worked! I was so surprised. The calendar populated itself with the events from the API! The API had a bug, but the API developer fixed it, and everything worked okay. There was also another issue where I was limited to 50 events from the API at a time, but I got around that by combining the events from two requests and then populating the calendar.

The calendar was flexible enough to withstand all of my hacks and modifications, but it was a complete mess. Eval statements everywhere. Redundant functionality. Tons of global functions and variables. I am slowly trying to clean it up and make it beautiful. It’s beautiful on the outside, but it’s very ugly on the inside. Hopefully I can fix that. It’s amazing how much work it takes to clean up just 1000 lines of JavaScript.

Summary

  • jQuery calendar modified to accept JSON-format calendar events from an API.
  • Second jQuery plugin used to enable modal popups.
  • API developer notified of bug in the API which he fixed
  • All components packaged as a WordPress plugin.

This website development project involved jQuery, a buggy API, WordPress, and PHP. I found a jQuery calendar that looked pretty and that I would possibly be able to populate with JSON data (an API). I took the JSON data from Mobile Town Guide’s API and reorganized it to match the structure that the jQuery/JavaScript calendar needed. Surprisingly, the JavaScript calendar populated itself with the data from the API.

Unfortunately, not all the events were coming through. After a little bit of research, I let the API developer about a possible problem, and he was able to fix the API.

I also used a jQuery modal popup plugin to display all of an event’s information when a user clicked on it.

The jQuery/JavaScript calendar is also completely mobile responsive.

Date: 07/20/2016