About Lab Event

Lab Event is a CRM and ERP software. It was officially launched in 2020, and is presented as an efficient digitalization solution. Vadim Toropoff, its creator, wants to improve the organization of events through digitalization. More than an efficient solution, Lab Event also processes requests in order to improve sales. Its interface is intuitive and easy to use. This commercial device remains accessible to everyone, but is specifically dedicated to professionals.

Using the Bryntum Grid to organize analytical data

Our application allows users to stop wasting time when managing their events. This also includes the organization of their event data. We wanted to provide our users with the possibility to display some data with tables and with the help of extended functionalities.

By using the Bryntum Grid, we allow our users to group all their financial documents over a given period of time into a large table. As a result, they will find a summary of their quotes and invoices.

Here is an example of the analytical view :

vue analytique lab event

Using the Bryntum Scheduler Pro for event venues

As an event venue manager, it’s sometimes difficult to get a quick overview of our availability. Providing our users a way to manage their room bookings as soon as they receive requests is a challenge we have solved with Bryntum Scheduler Pro.

Lab Event’s venue and room calendar allows you to book rooms and associate events with them without having to leave your page. We offer our users the option to create one or more calendars available on the same page and add the venue. Depending on the calendar created, it’s possible to show all its rooms or just a few.

The advantage of this calendar is to be able to have an overview of all events by month, week, day and time.

Here is an example of the Lab Event venue and room calendar :

calendrier par lieux

For more efficient use and to avoid copy and paste errors, event information and customer’s choice are to be entered directly in the calendar. The calendar view is visible to all users to avoid creating double bookings.

Our evaluation processes

Regarding the Grid part, we found that Bryntum’s solution was easy to use for us and our customers, so we didn’t find it necessary to look for other solutions. Same for the Schedule part, there was no other solution that could fit our request.

Implementing Bryntum Grid in our code base

First just like every package from node_modules

We import what we need from Bryntum


import {
  Grid,
  TreeGrid,
  DateHelper,
  LocaleManager,
  NumberFormat,
  Combo,
  AjaxStore,
  GridRowModel,
} from "@bryntum/grid";

Then we create a modified template for the grid

Basically specify what is needed in the grid (listeners, store the state of the view)

window.createGrid = (appendTo, options) => {
  return new Grid({
    appendTo: appendTo,
    autoHeight: options.autoHeight || true,
    features: options.features || {},
    columns: {
      data: options.columns || {},
      listeners: {
        update(e) {
          if (localStorage && options.id) {
            localStorage.setItem(
              options.id,
              JSON.stringify(e.source.grid.state)
            );
          }
        },
      },
    },
    store: {
      // some code to store the view of the grid
    },
    listeners: options.listeners,
    bbar: options.bbar || false,
    tbar: options.tbar || false,
  });
};

Lastly ofcourse we export this grid to be reuseable

window.Grid = Grid;

export default Grid;

Implementing bryntum Scheduler pro in our code base

Using the vue.js component and the class SchedulerEventModel by Bryntum. We create a subclass ScheduleEvent and then export it to be used.

import { SchedulerEventModel } from "@bryntum/schedulerpro";

class ScheduleEvent extends SchedulerEventModel {
  static get fields() {
    return [
      { name: "section_id" },
      { name: "section_type" },
      { name: "event_product_id" },
      { name: "event_id" },
      { name: "resourceId" },
      { name: "event_name" },
      { name: "client_id" },
      { name: "product_id" },
      { name: "startDate" },
      { name: "endDate" },
      { name: "goods" },
      { name: "durationUnit", defaultValue: "hour" },
      { name: "client", default: { name: null, company: null } },
      { name: "event", default: { name: null, budget: null, period: null } },
      { name: "status", default: { name: null, color: "#dcdcdc" } },
    ];
  }
}

export default ScheduleEvent;

Then in the vue.js file we can simply call this model

data(){
    return {
        // some code
        eventStore: {
            // some code
            modelClass: ScheduleEvent,
        }
    }
}

This gives us the possibilities offers from brymtum and personalized what is needed in our views front end.

What our end-users think

Our users are satisfied with our Lab Event solution and appreciate using a tool that is easy to use. The implementation of Bryntum Scheduler Pro and Grid has contributed to make our tool intuitive.

Here is a recent review from one of our clients : Lab Event has changed my life for the management of client events that I organize and it has saved me an invaluable amount of time for the requests for quotes, establishment of roadmaps and estimates, invoices.

Satisfaction and Experience

Overall, we are satisfied with our decision to use Bryntum Grid and Bryntum Scheduler Pro for Lab Event. Our developers are working hard to configure and integrate Bryntum into our solution, but they are very happy to code with it.

Discover Lab Event, N°1 event project management software