Publikationen

When developing large web applications in small teams developer time is valuable and should ideally be spent on core business functionality rather than “infrastructure” code. We have evaluated different approaches for the frontend of our custom reservation module, including developing a calendar ourselves. Our main concern was that a 3rd party solution would not provide the level of customization required for our very specific needs. The mobiscroll Calendar (https://demo.mobiscroll.com/react/calendar#) turned out to fulfill all our requirements, thanks to e.g. the fully customizable Event component, and stood out in the evaluation phase as the most solid and cost efficient option.

Our module displays weekly or monthly views of a calendar and shows certain events as entries, very much like users expect it from using programs such as Microsoft Outlook:

However, it is essential to us that we have full control over how events are rendered within the calendar. The mobiscroll calendar offers a renderEvent hook, which takes the event object as parameter and returns our custom markup. This way we can ensure, that the content and look&feel of objects used on multiple occasions across the web app remain consistent.

One drawback of implementing a custom rendering method is the fact we now have to consider all relevant responsive formats and users platforms – an issue mobiscroll had conveniently taken care off with their default implementations. See e.g. the iPhone mobile rendering:

Luckily mobiscroll provides another hook renderEventContent, which allows for custom rendering of the event content only, while the calendar still takes care of rendering the styling of the event box. Using this approach the required customization is minimal.

The EventCalendar React tag is created as follows:

<mobiscroll.Eventcalendar
view={viewSettings}
data={myEvents}
dragToCreate={true}
dragToMove={true}
dragToResize={true}
onEventClick={onEventClick}
onEventCreated={onEventCreated}
onEventDeleted={onEventDeleted}
selectedDate={date[0]}
renderEventContent={customEventRenderFunc}
/>

and the corresponding customEventRenderFunc can be declared as follows:

const customEventRenderFunc = (args) => {
     return <div>...</div> // your custom react code here
};

This neatly solves our problem.

The fact that mobiscroll supports different frameworks (we were only interested in React at the time) and the fact that access to the source code can be purchased are an added bonus. All in all we are confident to have made the right choice and are looking forward to include further mobiscroll components in our code base.

Provider: https://mobiscroll.com/

Full disclosure: We have been offered a reduced bundle price in return for a review of the mobiscroll Calendar component. We have made sure to be convinced of the product before accepting the offer.

In diesem Artikel geben wir eine Übersicht zum Thema Modellierung, besprechen die Notwendigkeit systematischer Modellierung und führen die für erfolgreiche und effektive Modellierung zu berücksichtigenden Aspekte auf.

(mehr …)

Am 17. Juni 2015 fand der alljährliche Swiss Requirements Day statt. Wir nehmen diesen Event und unsere Teilnahme zum Anlass, um einige ausgewählte Vorträge kurz zusammenzufassen und uns über die aktuellen Themen Gedanken zu machen.
(mehr …)

This article shows my experiences made in a customer project with the Sparx Enterprise Architect database. It explains how to retrieve all the required information from the Sparx database for UML class diagrams.
(mehr …)

Wir lösen eine Problemstellung aus dem Requirements Engineering mit Hilfe eines dafür unkonventionellen Werkzeugs: Dem statischen Business Objekt Modell.
Damit untersuchen wir die Unterschiede zwischen zwei ähnlichen Regelwerken auf visuelle Weise.

(mehr …)