SharePoint event bookings with new calendar view

We have already introduced you to our application for SharePoint event bookings in some blog posts. This has been available in the Microsoft Store for several weeks. Of course, we are constantly developing our products and of course also respond to customer feedback and wishes. In this article, we would like to give you more insights into our latest extension in the form of a calendar view.

So far, we have presented the events and the associated dates in a list. In the left column we have shown all current events, in the right column the corresponding dates. With our latest extension of the application, the user now has the possibility to activate a calendar view via a toggle in the menu bar. All event dates are displayed in the calendar view. Event dates booked by the user are highlighted by a green background. This gives the user a good overview of all event dates. By default, we display the event dates in a week view.

However, the user can also switch to a month view.

When a user clicks on an event date in the calendar view, we open an own panel on the right. In this panel we display the details of the date and the associated event. The user then has the option of registering or deregistering in the panel for the event date.

We used the npm package “fullcalender” for the implementation of the calendar view. With this package you have the possibility to enter the localization as a parameter.

// Deutsche Lokalisierung -> z.B. Mo, Di, Mi, Do, Fr, Sa, So
<FullCalendar
    locale="de" />

// Englische Localization -> e.g. Mon, Tue, Wed, Thu, Fri, Sat, Sun
<FullCalendar
    locale="en" />

Depending on the configured localization, the headings of the calendar (e.g. days, month) are displayed in English or German. Furthermore, the first day of the week is a Monday or Sunday, depending on the localization. If you want to set the first day of the week regardless of the current localization, this is possible via the Web Part settings.

Have we aroused your interest and would you like more information about our event calendar view? Then please get in touch with us.