In this blog post, I would like to tell you about our work at the Digital Humanities Lab (DHLab) at the University of Basel, Switzerland, and how it is connected to the Angular community. Part of my role here at the DHLab is making research more accessible.

This is the story of an open source modification we made to the Angular Material Datepicker to help us make the history of mathematics more accessible by the public.

One challenge we’ve faced is that a lot of software written today doesn’t handle the unique needs that come from humanities projects. Most calendars and date pickers today are written assuming the use of the Gregorian calendar, but as a lot of historical research has to do with documents with other calendars, it’s important for our users to be able to specify the calendar they want to use when picking dates.

Angular Material Datepicker supporting calendar conversions

We took this challenge on and contributed improvements to Angular Material’s Datepicker, so that it could support multiple calendars.

A historical need

We started two years ago on a project named Bernoulli-Euler Online (BEOL) that is about early modern mathematical texts relating to Leonhard Euler and members of the Bernoulli dynasty. We are using semantic web technologies to represent our data and Angular and Angular Material to develop our GUI.

We deal with Julian as well as Gregorian dates, and we ran into a problem regarding the Angular Material Datepicker. It only offered support for the modern western Gregorian calendar. The question of different calendars arose because BEOL includes the correspondence between the famous mathematicians Leonhard Euler and Christian Goldbach (letters exchanged from 1729 to 1764). Euler began writing his letters using the Julian calendar while he lived in St. Petersburg, but later he moved to Berlin and switched to the Gregorian calendar. Goldbach on the other hand seems to have always used the Gregorian calendar.

For our users, it is important to know if a letter’s date is indicated in the Gregorian or the Julian calendar. For example, the date of the first letter Euler sent to Goldbach is October 13th 1729 in the Julian calendar (the date that is actually indicated in the letter) which corresponds to October 24th 1729 in the Gregorian calendar.

Euler’s first letter to Goldbach, reproduction of the third page (Russian State Archive, Moscow)

In our GUI, we would like to let people search for letters using either the Gregorian or Julian calendar, but the Angular Material Datepicker only provided an implementation for the former. Instead of writing our own component for date selections, we decided to add more flexibility to the existing Angular Material Datepicker by contributing back to the project. Quite soon we found out that there were other people that had similar requirements.

The value of open source

We wanted to approach the problem in a more generic way so as to not only solve the problem for ourselves, but for others as well. By solving the calendar conversion problem in Angular Material, all our projects at the DHLab may take advantage from that solution and potentially also other projects that use Angular Material may take advantage of it.

In our experience, generic solutions take more time and this is sometimes difficult to justify with project requirements that seem quite narrow. But the community building aspect should not be underestimated: because other projects will profit from your generic efforts, you may benefit from theirs.

The solution

Our work was included in the 6.1 release of Angular Material. You can see a sample of the fully functioning Angular Material Datepicker with calendar choices here: https://stackblitz.com/edit/angular-ncyrjg

Our solution to the calendar conversion problem involves two additional developments that have been made available as npm packages:

JDNConvertibleCalendar (still in an early state of development) is a stand-alone library written in TypeScript for calendar conversions based on an astronomical format called Julian Day (not to be confused with a Julian calendar date). The Julian Day counts the number of days since the beginning of the Julian Period in 4713 BCE. The Julian Day can be calculated from a given calendar date and freely be converted to another calendar date, e.g., the Julian calendar date October 13th 1729 can be converted to the Gregorian calendar date October 24th 1729 and vice versa since they have the same Julian Day Number which is 2352861. Julian Day is also the format that Knora (the software BEOL is based on, see below) uses internally to represent dates. This allows for searches irrespective of the calendar that is submitted by the client as long as this can be converted to a Julian Day.

JDNConvertibleCalendarDateAdapter is an implementation of the Angular Material DateAdapter for JDNConvertibleCalendar, so calendar conversions are supported in the Angular Material Datepicker. The Angular Material Datepicker has no built-in calendar library. Instead, the UI communicates with an abstract interface called the DateAdapter , which has to be implemented for different calendar libraries such as the native JavaScript date object or MomentJS, which implement the Gregorian calendar. Since calendar conversions require new control elements, we added the possibility to define custom headers for the Datepicker through a series of PRs. Now we can add a custom header for the Datepicker containing a calendar switcher. This new feature allows people to customize calendar controls also if they do not want to do calendar conversions.

The Future

In the future, we would like to support additional calendars in JDNConvertibleCalendar and make them available to the Datepicker through JDNConvertibleCalendarDateAdapter. We also have to provide a solution to work with BCE dates in the Datepicker UI. Knora and SALSAH are generic components that will also be used by other projects than BEOL, e.g., archaeological research projects, for which support of BCE dates is crucial.

Additional background about BEOL

BEOL is a collaboration between the Bernoulli-Euler Center and the DHLab (both University of Basel) and relies on the infrastructure of the Data and Service Center for the Humanities (DaSCH) in Switzerland. Its goal is to make humanities research data available on the long-term, providing both technological and institutional solutions to the obsolescence of technical infrastructure. Instead of supporting a variety of different solutions, one single flexible infrastructure is maintained over the long term, consisting of an RDF triplestore, a generic base ontology, a RESTful API called Knora and an Angular-based GUI called Salsah.