Creación de calendarios personalizados en Business Central utilizando JavaScript

<div id="legend1" class="legend"></div>
<div id="legend2" class="legend"></div>
<div id="calendar"></div>

El archivo CSS se utiliza para los estilos de las leyendas, colocándolas en el centro y un dato al lado del otro:

.legend {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.legend-item {
    display: flex;
    align-items: center;
    margin-right: 20px;
}

.legend-color {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.legend-label {
    font-size: 14px;
}

Ahora viene la parte interesante, que es el archivo JavaScript. En este archivo, para explicar el proceso, crearemos 3 objetos JSON como variables. Sin embargo, lo ideal sería obtener estos datos directamente de alguna tabla de Business Central.

Primero, creamos estas variables. La primera se utilizará para rellenar y dar formato con colores a las entradas del calendario, y las otras dos para las leyendas de colores:

var events = [
    {
        title: "Event 1",
        start: "2023-06-01",
        end: "2023-06-03",
        color1: "red",
        color2: "blue",
        textColor: "white",
    },
    {
        title: "Event 2",
        start: "2023-06-05",
        end: "2023-06-05",
        color1: "green",
        color2: "yellow",
        textColor: "black",
    },
];

var legendItems = [
    {
        name: "Color 2: Event 1",
        color: "blue",
    },
    {
        name: "Color 2: Event 2",
        color: "yellow",
    },
];

var legendItems2 = [
    {
        name: "Color 1: Event 1",
        color: "red",
    },
    {
        name: "Color 1: Event 2",
        color: "green",
    },
];

Ahora vamos a crear la función para inicializar el calendario:

function InitCalendar() {
    var getHtml = $.get(
        Microsoft.Dynamics.NAV.GetImageResource("src/controladdin/Calendar/html/main.html"),
        function (htmlExterno) {
            Html = htmlExterno;
            console.log(Html);
        }
    );

    getHtml.done(function () {
        controlAddIn = $("#controlAddIn");
        controlAddIn.empty();
        controlAddIn.html(Html);

        var calendarOptions = {
            height: $(window).height() * 0.93,
            initialView: "dayGridMonth",
            locale: "es",
            timeZone: "Europe/Madrid",
            events: events,
            eventRender: function (event, element) {
                var gradient =
                    "linear-gradient(to right, " +
                    event.color1 +
                    ", " +
                    event.color1 +
                    " 15px, " +
                    event.color2 +
                    " 15px, " +
                    event.color2 +
                    ")";
                element.css("background", gradient);

                var titleElement = element.find(".fc-title");
                titleElement.css("padding-left", "25px");
                titleElement.css("color", event.textColor);
            },
        };

        $("#calendar").fullCalendar(calendarOptions);

        // Generar la leyenda de colores dinámicamente
        var legendElement = $("#legend1");
        legendItems.forEach(function (item) {
            var legendItem = $("<div>", { class: "legend-item" });
            var legendColor = $("<div>", { class: "legend-color" }).css("background-color", item.color);
            var legendLabel = $("<div>", { class: "legend-label" }).text(item.name);
            legendItem.append(legendColor, legendLabel);
            legendElement.append(legendItem);
        });

        var legendElement2 = $("#legend2");
        legendItems2.forEach(function (item) {
            var legendItem = $("<div>", { class: "legend-item" });
            var legendColor = $("<div>", { class: "legend-color" }).css("background-color", item.color);
            var legendLabel = $("<div>", { class: "legend-label" }).text(item.name);
            legendItem.append(legendColor, legendLabel);
            legendElement2.append(legendItem);
        });
    });
}

En esta función, lo primero que hacemos es cargar el HTML y luego inicializar el ControlAddin. Después, creamos una variable con las opciones para el calendario, como el tamaño, la vista inicial, el idioma y el JSON que creamos anteriormente.

En esta parte, me gustaría añadir que la idea era que el fondo del evento fuera de dos colores y que tuvieran un color de letra diferente.

Por último, el código genera dinámicamente las leyendas de colores según los JSON que tenemos como variables.

La página es muy sencilla, ya que solo tenemos que llamar al ControlAddin para que pinte y coloree todo lo que hemos configurado:

page 60004 "Calendar"
{
    PageType = Card;
    ApplicationArea = All;
    UsageCategory = Administration;

    layout
    {
        area(Content)
        {
            usercontrol(Calendar; Calendar)
            {
                ApplicationArea = All;
                trigger ControlAddInReady()
                begin
                    CurrPage.Calendar.InitCalendar();
                end;
            }
        }
    }
}

El resultado final es el que se muestra en la imagen anterior. Este enfoque tiene muchas posibilidades y se puede obtener mucho beneficio en cualquier ámbito de nuestro ERP.

En resumen, en este post hemos explorado cómo crear y utilizar calendarios mediante JavaScript para visualizar datos desde una ventana de Business Central. Para lograrlo, hemos utilizado la librería FullCalendar.

En general, este enfoque ofrece muchas posibilidades y puede ser beneficioso en diferentes contextos dentro de nuestro Business Central.

Como siempre, podréis ver el ejemplo entero en el Link

¡Espero que esta guía os sea útil y os inspire a implementar calendarios personalizados en Business Central! Si tenéis alguna pregunta o comentario, no dudéis en comentarlo. ¡Hasta la próxima semana!