How to Create a Calendar or Implement One in Your App

An in-app calendar is a feature that has become so familiar we hardly take notice. We see it as an integral part of the application, or as 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 article, we’ll help you figure out whether you need a calendar in your app and, if so, how to develop or implement it.

To begin, let’s understand what applications use mobile calendars and for what purposes.

What type of apps need a calendar?

In different apps, a calendar performs different tasks. But the main goal of a calendar is always the same – to help users manage their events and remember what they’ve planned.

Fitness apps

Google Fit, a fitness tracking app, uses a calendar to track your physical activities and show your progress. In the calendar, you can find all information about your past trainings and can schedule your next workout.

Another example of a fitness app with a calendar is Talos, a project that we designed. Talos is a workout tracking ecosystem that uses sensors and NFC technology to track all activity within the gym to help users achieve their goals while effortlessly documenting their workouts. In Talos, a calendar is also used for planning future training sessions.

how-to-create-a-calendar-or-implement-one-in-your-app-talos

[Talos app. Designed by Yalantis]

Travel apps

Travel apps use calendars to search for flights or visualize your upcoming vacation.TripAdvisor uses a calendar to show a chronicle of your past travels. The calendar in the TripAdvisor app also lets you plan your next trip.

Task managers

Trello uses a calendar to show upcoming events and scheduled tasks. Using the calendar, you can see your task due dates and your personal or work timetable.

Planners

Slice Planner, one of our projects, shows off an unusual calendar use case – moving handwritten plans to digital calendars (Google, Apple, and Outlook) with the help of computer vision and augmented reality technology.

how-to-create-a-calendar-or-implement-one-in-your-app-slice-planner

[Slice Planner app. Designed and developed by Yalantis]

Slice Planner launched their product on Kickstarter with a target of $35,000, and so far they’ve already managed to collect $118,000!

There are two ways to implement a calendar in your app. 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 APIs that you can easily implement in your app.

1) Google’s Calendar API describes how to use RESTful calls and client libraries for various programming languages (Java, PHP, .NET, JavaScript, Node.js, Ruby, Python, Go, Swift).

2) Apple’s Event Kit framework allows you to access and manipulate calendars, events, and reminders.

3) Microsoft’s Outlook Calendar REST API provides access to calendars, calendar groups, and events.

We used Apple’s, Google’s and Microsoft’s APIs in Slice Planner. The main task of Slice Planner is to move handwritten events to a digital calendar and synchronizing 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. They 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 unique, customizable UI for your calendar. In this case, you can look to some open source solutions for unique UI implementations. JTAppleCalendar, MSCollectionViewCalendarLayout, CalendarLib, and Calendar are some great examples.

how-to-create-a-calendar-or-implement-one-in-your-app-calendar-open-source

[Calendar component. Image source: GitHub]

While developing one of our applications – Reel – we were faced with the need to implement a calendar. In Reel, you can get to the calendar from messaging, from the projects list, and from event details. The calendar in this app allows you to see your previous and upcoming events and adjust your schedule accordingly.

For the calendar implementation, our team decided to apply a ready-to-use open source component – CVCalendar. Our developers chose this component because it has a customizable interface, which meant we could get it in line with our app’s UI design.

Initially, the 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 works as follows: the calendar queries the server to determine how to “paint” each day depending on whether or not there’s a scheduled event. In fact, the calendar itself doesn’t “know” that you have events – it only “paints” the interface 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 they plan to visit.

how-to-create-a-calendar-or-implement-one-in-your-app-reel

[Reel app. Designed and developed by Yalantis]

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 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 your calendar’s UI and UX design to make a calendar stand out. CloudCal for Android, for instance, uses an unusual design solution which they call “Magic Circles.” It turns the days of the month into clock faces, and show different colored circles or segments of a circle.

how-to-create-a-calendar-or-implement-one-in-your-app-cloudcal

[Image source: Digital Trends]

DigiCal Calendar Agenda for Android offers another example of a well-thought-out interface. DigiCal is all about customization: you can easily switch between day, week, and agenda view; customize widgets by size or theme; and change the style for events.

how-to-create-a-calendar-or-implement-one-in-your-app-digical

[Image source: AndroidWorld]

But to attract users, your design has to be more than just colorful and unusual. In fact, it can be pretty simple yet stylish. Cal is all about simplicity, but it’s still thoughtfully designed and easy to use.

how-to-create-a-calendar-or-implement-one-in-your-app-cal

[Image source: The Next Web]

The next important consideration is that adding, finding, and grouping events should not create any difficulties for the user.

Also, you should consider adding an ability to tag people in different events or invite them to participate.

2. Sync with other calendars

Users expect the calendar in your app to allow them to sync with some services like Google and iCloud. This is especially important for business apps and planners, when you need to allow users to synchronize their meetings and tasks with other planned events.

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.

Developing a calendar and implementing it in an app doesn’t sound so complicated. But this is only if you consider it from the user’s point of view. If you want to create something new and unusual, it’ll take quite a bit of work. By relying on incredible calendar services already on the market, however, creating calendars and implementing them in your app becomes much easier.

3.8/ 5.0
Article rating
79
Reviews
Remember those Facebook reactions? Well, we aren't Facebook but we love reactions too. They can give us valuable insights on how to improve what we're doing. Would you tell us how you feel about this article?

We use cookies to personalize our service and to improve your experience on the website and its subdomains. We also use this information for analytics.

More info