How to put a calendar in your app and why in-app calendars aren’t so simple

In-app calendars have become so familiar we hardly take notice. We see a calendar as an integral part of an app. However, getting a calendar into an app isn’t as easy as it sounds due to technical reasons we’ll talk about in this post.
 
Moreover, today’s app users demand a simple and pleasant user experience. Walker’s Customers 2020: A Progress Report suggests that by the end of 2020, consumer experience will overtake price and product as the core brand differentiator. This means you should thoroughly consider how any app feature will meet customers’ needs. 
 
With this in mind, simply embedding a basic calendar in an app is not enough. At the very least, you’ll need to ensure the calendar syncs with popular calendars like those from Google, Apple, and Outlook and provides notifications.
 
But to offer a state-of-the-art experience, you’ll have to consider such technologies as augmented reality, optical character recognition, and voice recognition. In this post, we’ll look at several in-app calendar use cases and share examples from our own practice to help you make the right choice based on your app’s specifics.

Evopaper, a company that provides daily productivity planners and tools, decided to bridge the gap between paper notebooks and digital planners to enable people who like making to-do lists on paper to benefit from technology. The founders of Evopaper turned to Yalantis to implement their idea by developing the Slice Planner app.

Here are some details of how we achieved our client’s goal using computer vision and augmented reality.

Merging a paper schedule with a digital one 

The Slice Planner app needed to be capable of moving handwritten plans to online calendars (Google, Apple, and Outlook). To implement this capability, we turned to optical character recognition (OCR) technology stack for converting images of typed, handwritten, and printed words into machine-encoded text. 

Specifically, we built optical character recognition software powered by Google Cloud Vision, as this software accurately recognizes event titles. To use the OCR functionality, a Slice Planner user just scans handwritten text in a Slice Planner notebook designed by the Evopaper team.

Checking for overlapping events

In order to avoid overlapping events, we implemented augmented reality mode. To use this feature, users hold the app over their Slice Planner notebook and the app notifies of any overlapping events. 

Handling important notes

Users can draw lines around important notes so the Slice Planner app will capture them. This enables users to save, share, and attach notes to their calendar events.

Advanced sharing

Users can send their notes via email, upload them to the cloud, and attach them to specific calendar events simply by crossing out the corresponding icons at the bottom of the Slice Planner notebook page.

So far, we’ve explored use cases of in-app calendar functionality related to daily planners, productivity apps, and task managers. But there are far more other apps that require a calendar.  

Let’s see what apps use calendars and how you can implement an in-app calendar for a particular use case, as calendars perform different tasks in different apps. 

Healthcare and fitness apps. The most common function of calendars in healthcare apps is scheduling doctor appointments. Healthfully, a medical platform we built that helps doctors monitor their patients’ health conditions, goes further. In addition to scheduling in-person and online doctor visits, Healthfully uses its calendar feature for scheduling reports and notifications. Fitness apps use sensors and NFC technology and help users plan training sessions thanks to embedded calendars.

Parking apps. Apps like SpotHero help drivers book parking spots minutes before parking or months before their trips. SpotHero Calendar Sync allows iOS users to sync with iCalendar and choose the particular calendar to import into SpotHero. This makes a user’s events accessible in the app, enabling the user to click on an event and reserve a parking spot for a specific time.
 
Event discovery apps. Event discovery apps like Eventbrite have in-app calendars that users can sync with their Google, Apple, and Outlook calendars. These in-app calendars remind users of events they have tickets to via push notifications. Users can also be notified when speakers are on stage during a conference or when a band is performing during a whole-day concert. Check out our article on how to implement push notifications.
 
Educational apps. Massive open online courses and educational platforms use calendars for scheduling lectures, Q&A sessions, and home assignments. Users can get notified when the deadline for submitting an essay is approaching or an hour before their next class begins. Calendar integration with Google Calendar and Outlook helps learners not to miss classes by adding them to learners’ personal calendars.
 
Messaging apps. On Telegram, for instance, users can send scheduled messages by holding the Send button in a chat and choosing Schedule Message. The message will then be sent automatically at the specified time. Telegram users can use their Saved Messages chat to turn planned messages into reminders.

Streaming apps. Apps like Apple Music let users listen to scheduled programs. Platforms like SoundCloud allow musicians to schedule their track and album releases. 
 
Real estate and rental apps. Real estate apps like Zillow and rental apps like Zumper have integrated calendars for time management and to schedule meetings with real estate agents and property owners.  

Logistics software. Calendar integration is also useful for logistics software. We built a transport management system where managers can select specific delivery timeframes to ensure on-time delivery. Proper scheduling helps managers make timely changes like transferring packages between vehicles to ensure faster or cheaper delivery. In a separate logistics customer portal that we developed, users can sort orders by date and get notified about deliveries and delays.

The list of apps requiring embedded calendars goes on and on. In taxi, delivery, travel, restaurant reservation, and many other apps, a calendar feature is a must. 
 
In many cases, you might need to enable your calendar to sync with other popular calendars so users can have all their plans in one place. If that’s the case, existing APIs to integrate with are at your service.

Calendar APIs are RESTful APIs that can be accessed through explicit HTTP Calls. Apple, Google, and Microsoft offer their own calendar APIs that you can easily integrate with mobile and web apps.
 
The Google Calendar API supports RESTful calls and offers client libraries for various programming languages (Java, PHP, .NET, JavaScript, Node.js, Ruby, Python, Go, Swift). With the Google Calendar API, you can edit private calendars, set up reminders and notifications, and search for and view shared or public calendars in web and mobile applications.
 
Apple’s EventKit framework allows you to access and manipulate calendars, events, and reminders on iOS and macOS devices.
 
Microsoft’s Outlook calendar API provides access to calendars, calendar groups, events, and reminders on mobile, web, and desktop apps. Outlook.com ensures family sharing, so users can add other family members to their account to make their calendar accessible to other people.
 
To build the Slice Planner app, we used APIs by Apple, Google, and Microsoft. Slice Planner users can move handwritten events to a digital calendar and synchronize them with events from other digital calendars. 
 
You also can use other calendar APIs for your projects, as most of the leading calendar apps have exposed their APIs, enabling developers to integrate them and use their functionality. You can choose among the APIs below based on how their features meet your business needs. All of these APIs will work for both mobile and web apps:

• Cronofy API — helps you pull available hours, schedule tasks, and sync third-party calendars 
• 31Events API — lets you send invitations to users, get reports on events, and integrate with other apps 
• SuperSaaS API — offers online appointment scheduling, notifications, reports, and even scheduled payments 
• Funambol API — syncs your calendar across many devices and to the cloud
• Calendarific API — supplies public holidays for every country 

In some cases, you may not need to synchronize with or gather data from any 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.
 
Read also: How to Create a Really Great RESTful API: A Developer’s Checklist

Let’s look at the best open source calendar libraries for iOS, Android, and the web.

Calendar libraries for iOS

For iOS, which doesn’t have a default calendar component, you can use JTAppleCalendar or FSCalendar. They’re both praised by the developer community for allowing you to build highly customizable calendars with great designs. These libraries help you easily create custom cells and calendar views.
 
To build your custom calendar UI for iOS, you can also use UICollectionView for managing and organizing an ordered collection of data items and presenting them using customizable layouts.

Open source YACalendar by Yalantis

We don’t just help our clients build great apps with calendar features — we also share our knowledge and experience of building them. That’s why Yalantis is an active member of the GitHub community. 
 
Recently, we released the YACalendar library for iOS. It’s a customizable calendar for native iOS calendar app development that offers year and month views with horizontal and vertical scrolling. This library is optimized for iPhone screens from the iPhone 5 to iPhone 11. You can enjoy the following features:

• Two- and three-column views along with month and weekend views 
• Portrait and landscape modes
• Vertical and horizontal scrolling
• Pagination
• Markers for the current and selected date along with past and future events
• Start-of-the-week customization (Monday or Sunday)

Pretty soon, we’ll add an event management feature along with functionality to attach user notes, links, and documents to events. You’re welcome to use our YACalendar library in your projects. 

Libraries for Android and web

When it comes to calendar features for Android, we mostly use the feature-rich CalendarView, AgendaCalendarView, and Cadar libraries.

As for calendar libraries for the web-based apps, there are many options to choose from. If you prefer an easy-to-use and customizable solution without support, consider free options such as Fullcalendar.io and Tui calendar. For complex products, we suggest using paid solutions that provide good support like Kendo UI and the Mobiscroll responsive calendar. 

While developing the Proreel application — an event scheduling platform for actors and shoot managers — we needed to implement a calendar that would be accessible by users from messaging, the projects list, and event details. The calendar also had to allow users to see their previous and upcoming events and adjust their schedules accordingly.
 
How we enabled the necessary functionality
 
To provide such functionality, our team decided to apply a ready-to-use open source component called CVCalendar. It has an easily customized interface, which meant we could bring it in line with the app’s UI design.
 
In a standard calendar, it’s possible to change the color scheme, size, and fonts and to switch to a weekly view. Most calendars also have the ability to display dots to indicate events scheduled for a particular day. But in fact, the calendar itself doesn’t know about these events – it only assigns colors to the interface elements based on information from the server. 
 
CVCalendar queries a server to determine how to color each day depending on whether or not there’s a scheduled event. Green dots represent events posted by the user. White dots represent events posted by others that the user plans to attend.
 
From this starting point, we added the ability to open an event directly from the calendar and see its detailed description.

To finish, we’ll share with you a few more tips to ensure that your app provides an excellent user experience.

Polish the UI and UX

According to Adobe’s 2020 Digital Trends report, 34 percent of leading companies say that their customer journey is a top priority for 2020. Qualtrics XM Institute found that companies with $1 billion in annual revenue are likely to earn, on average, an extra $700 million within three years by investing in the customer experience. These numbers prove the need to pay greater attention to ensuring a top-notch user experience. 

When it comes to in-app calendars, make sure you provide the following features:

Easy-to-use interface. The calendar interface should allow users to easily find free slots, book appointments, and share and group events in a couple of taps or clicks. 
 
Attractive aesthetics. You can achieve this 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 your app’s functionality.
 
Ability to tag people or invite them to events. You’ll find this functionality in Google Calendar.
 
In addition to these features, don’t forget to make your app responsive to changes in screen orientation so the calendar will display correctly no matter how users hold their devices.

Ensure access to devise hardware

Obviously, a great calendar should use available hardware features. For example, Fantastical uses Apple’s 3D Touch to enable a user to get directions to an event. Force Touch on macOS allows Fantastical app users to instantly jump to Birthdays, Favorites, and business cards. 
 
Speech recognition 

Perhaps the most promising functionality that digital calendars currently provide is using natural language to add and edit calendar entries. Scheduling apps like Calendar and Voice Calendar have successfully implemented this feature. But along with all-in-one planners, many other apps like those for parking and healthcare can also benefit from speech recognition technology. To implement a speech recognition feature for Android, you can integrate the SpeechRecognizer API or use Google Assistant. You can use Apple’s Speech framework for iOS and the Web Speech API for web apps. 
 
Developing an online calendar and implementing it in an app doesn’t sound so complicated. But if you have some ideas to extend your app’s features or build a new and unusual calendar app, it’ll take quite a bit of work. By relying on best practices and calendar services already on the market, you can put a calendar in your app easily. 
 
In this post, we explored just a few examples of outsourced in-app calendar implementations based on our practice. Your specific case might require a unique approach, and we’ll gladly help you build the most appropriate calendar functionality based on your needs.