New SPFx Web Part for a SharePoint vacation calendar and sick leaves

Are you looking for an overview of your employees’ vacations and sick leaves? Then we would like to introduce you to our new SharePoint vacation calendar today. With our SPFx Webpart you can display and manage your vacations and sick leaves directly in SharePoint. In addition, we also display the vacation entries of all employees, which gives you a good overview of the attendances and absences. In this article we would like to introduce you to the functionalities of our new tool.

We implemented the vacation calendar with an SPFx web part. In the background, we store the data in two SharePoint lists. There is a SharePoint list in which we store the vacation entries and sick leaves. We use another SharePoint list to store information per employee (such as hours per day, date of entry into the company).

Our SPFx Web Part consists of a calendar view and a left pane, with the most important information for the current employee. In the calendar, we display the vacation entries and sick leaves for the current employee. In addition, we display the vacation entries of all employees.

On the left side, the employee can see his remaining vacation days for the year, which we calculate automatically.

If the employee clicks on the button “Add entry”, we open a dialog for adding a new entry. Different entry types can be added, such as “Vacation”, “Sick leave”, “Nursing leave” or similar. We automatically fill the duration of the entry with the number of hours per day of the employee. The employee can set a start date and an (optional) end date.

When saving the entry, we check for which days we have to create entries in the calendar. “Excluded days” can be defined for which no entries should be created. As a result, for example, the weekend or other days can be excluded. Public holidays are also automatically excluded.

By selecting “date cells” directly in the calendar, the employee has another option to add entries. We automatically set the start and end dates to the selected date values.

The employee also has the possibility to edit his own entries. If he clicks directly on an entry in the calendar, we open a dialog for editing. The entry can also be deleted there.

Furthermore, an entry can be moved to another date by drag & drop.

By “resizing” an entry you can easily extend it and we automatically create entries for the new date values.

Have we aroused your interest and would you like more information about our SharePoint vacation calendar? Then feel free to contact us. You can also subscribe to our newsletter – then you will be the first to know about news: