An in-app calendar is a feature that has become so familiar we hardly take notice. We see it as an integral part of an application – something that should be there by default. However, getting this calendar into an app is not as easy as it sounds. No application has a calendar by default. But there are lots of apps that could really use one.
In this tutorial, we’ll help you figure out whether you need a calendar in your app and, if so, how to implement a calendar into it.
What apps need a calendar?
To begin, let’s understand what applications use calendars and for what purposes. Calendars perform different tasks in different apps. But the main goal of a calendar is always the same – to help users manage their events and remember what they’ve planned.
Planners, productivity apps, and task managers
Slice Planner, a project by one of our clients, shows off an unusual calendar use case – translating handwritten plans to digital calendars (Google, Apple, and Outlook) with the help of computer vision and augmented reality technology.
Another project that we worked on is an all-in-one productivity app called Vishnu. With Vishnu, users get a to-do list, personal calendar, and notes to help them organize their routines and write down things that really matter.
Trello uses a calendar to show upcoming events and scheduled tasks. Using the calendar in Trello, you can see your task due dates and your personal or work schedule. Team task management apps use calendars in a similar way.
Transportation and parking apps
Users treat scheduled taxi rides in Uber, Lyft, and other taxi-hailing apps as something that should be available by default. After a user schedules a ride, they get a reminder beforehand and a notification when the driver arrives.
Scheduled delivery has also become a significant feature of apps like Uber Eats, Instacart, and Postmates. These apps allow you to schedule the delivery of pizza (for lunch), a bunch of flowers (for a date at 8 pm), and parcels (once you get home).
If you use ParkMe or other parking apps, you can find a parking spot two weeks before your trip and reserve it for a certain date and time. Again, this is possible thanks to a calendar integration.
Healthcare and fitness apps
Healthcare platforms can also use calendars. For example, eCuris, a healthcare communication platform we built for doctors and patients, uses its calendar feature to help doctors monitor patients with chronic diseases.
Fitness apps like Talos, a workout tracking ecosystem that uses sensors and NFC technology, help users plan training sessions thanks to embedded calendars.
Real estate and rental apps
When looking for a house or apartment to buy or rent, people often visit lots of places to check them out. That’s why real estate apps like Zillow and rental apps like Zumper have integrated calendars to schedule meetings with real estate agents and property owners.
Event discovery and travel apps
Obviously, any event discovery app like Eventbrite or Festicket needs a calendar to remind users of events they have tickets to. Along with push notifications, a calendar can tell users when speakers are on stage during a conference or when a band is performing during a whole-day concert.
For restaurant reservation apps similar to OpenTable, it’s vital to let users reserve tables for a certain time (especially when you seat over 23 million diners a month). You’ll surely have to integrate a calendar for booking tables in an app like OpenTable.
Travel apps use calendars to let users search for flights and visualize upcoming vacations. TripAdvisor uses a calendar to show users a chronicle of their past travels. The calendar in the TripAdvisor app also lets users plan their next trips.
Educational and streaming apps
Massive open online courses and educational platforms use calendars for scheduled lectures, Q&A sessions, and home assignments. For instance, users can get notified when the deadline for submitting an essay is approaching or an hour before their next class begins.
Music streaming apps like Apple Music let users listen to scheduled broadcasts, live interviews, one-time presentations, and chat shows. On Netflix, you can sign up for the premiere calendar so you don’t miss new shows.
Social networks and messengers
On social networks like Facebook, you can find tons of events like group meetings, conferences, and concerts and can be notified when they’re going to start. In Telegram, for instance, you can send scheduled messages or set up chats that are deleted on a certain date and time.
As you can see, there are multiple cases when you can implement a calendar in your app. And there are two ways to do that: you can develop one from scratch or use an out-of-the-box solution.
What calendar APIs are available?
Apple, Google, and Microsoft each offer their own calendar API that you can easily implement in your app.
Apple’s Event Kit framework allows you to access and manipulate calendars, events, and reminders on iOS and macOS devices.
Microsoft’s Outlook Calendar REST API provides access to calendars, calendar groups, events, and reminders on mobile, web, and desktop apps.
And just in case you need more calendar APIs for your project that will work for both mobile and web apps:
The Calendarific API supplies public holidays for every country.
The Cronofy API will help you pull available hours, schedule tasks, and sync third-party calendars.
The FX Calendar API gives you information on economic events.
The 31Events API will let you send invitations to users, get reports on events, and integrate with other apps.
The SuperSaaS API offers online appointment scheduling, notifications, reports, and even scheduled payments.
The Funambol API will sync your calendar across many devices and to the cloud.
At Yalantis, we used Apple’s, Google’s, and Microsoft’s APIs for Slice Planner. The main task of Slice Planner is to move handwritten events to a digital calendar and synchronize them with events from all other digital calendars a user may have. This allows users to see all their events and tasks in one place. Users can also choose to which calendar (Apple, Google, Outlook) they want to move their handwritten plans.
Open-source libraries for a customizable calendar
In some cases, you may have no need for a calendar to synchronize with or gather data from external calendars. You might only need a basic calendar with a customizable UI. In this case, you can look to open-source solutions for unique UI implementations. For iOS, which doesn’t have a default calendar component, you can use JTAppleCalendar, MSCollectionViewCalendarLayout, CalendarLib, or Calendar.
When it comes to calendar features for Android, we mostly use the CalendarView, AgendaCalendarView, and Cadar libraries.
As for calendar libraries for web apps, you can consider Kendo UI, jQuery UI, jQWidgets, and Webix, though there are definitely more solutions on the market.
While developing the Proreel application for one of our clients, we were faced with the need to implement a calendar. In Proreel, users can get to the calendar from messaging, from the projects list, and from event details. The calendar in this app allows users to see their previous and upcoming events and adjust their schedules accordingly.
To implement a calendar, our team decided to apply a ready-to-use open-source component called CVCalendar. We chose CVCalendar because it has a customizable interface, which meant we could bring it in line with the app’s UI design.
Initially, this component was a standard calendar. It was possible to change the color scheme, size, and fonts, and to transform it to a weekly view. It also had the ability to display dots to indicate events scheduled for a particular day.
CVCalendar queries a server to determine how to color each day depending on whether or not there’s a scheduled event. In fact, the calendar itself doesn’t know about events – it only assigns colors to the interface elements based on information from the server.
From this point, we added the ability to open an event directly from the calendar and see its detailed description.
The dots that indicate the presence of events differ. Green dots represent events posted by the user. White dots represent events posted by others that the user plans to visit.
To build your custom UI, you can also use UICollectionView, which manages an ordered collection of data items and presents them using customizable layouts.
Our recommendation for calendar development
1. Work on the UX and UI
First of all, your calendar should have an easy-to-use interface. It’s a calendar, so don’t build in a learning curve. You should focus on the UI and UX design to make your calendar stand out. This can be achieved with bright colors, round shapes, and shadows. Or instead of attracting attention with bright colors and unusual shapes, you can stick to a minimalist design to let users focus on the main functionality of your app.
But to attract users, your design has to be more than just colorful and unusual. It has to allow users to easily find free slots in the calendar, book appointments, and share and group events – and all of that has to be possible in a couple taps or clicks. Also, you should consider adding the ability to tag people in events or invite them to participate. You’ll find these features in Google Calendar. In addition, it lets users search and sign up for different calendars that contain national holidays, historical dates, and other dates of interest.
2. Sync with other calendars
Users expect a calendar to sync with services like Google and iCloud. This is especially important for business apps and planners, which need to allow users to schedule meetings and tasks around other events that are already planned.
3. Get access to device hardware
Obviously, a great calendar should use available hardware features. For example, Fantastical 2 uses Apple’s 3D Touch and Force Touch to enable different user actions. And, of course, don’t forget to make your app responsive to changes in screen orientation.
Developing a calendar and implementing it in an app doesn’t sound so complicated – that is, when you consider it from the user’s point of view. But if you want to extend your app features or build a new and unusual calendar app, it’ll take quite a bit of work. By relying on calendar services already on the market, however, creating calendars and implementing them in your app becomes much easier.