Calendário Javascript

Boa tarde!

Estou tentando integrar um calendário que criei em JavaScript dentro de um formulário no Latromi e gostaria de saber se isso é possível. Se for, qual seria a melhor maneira de inserir o código HTML do calendário? Tentei adicionar um campo HTML, mas não tenho certeza se estou fazendo isso corretamente. Além disso, gostaria de entender como posso adicionar um novo arquivo JavaScript e garantir que ele seja carregado corretamente ao abrir a página, juntamente com todas as informações do meu HTML e CSS.

Agradeço pela ajuda!

meu código:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calendário Simples</title>
    <style>
        /* Estilizando a página */
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .page-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        h1 {
            font-size: 24px;
        }
        .calendario {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            grid-gap: 0; /* Remover o espaço entre os dias */
            margin-top: 20px;
        }
        .dia {
            border: 1px solid #ccc;
            padding: 7px;
            text-align: center;
            position: relative;
            height: 150px; /* Altura do dia (números) ajustada para acomodar múltiplos eventos */
        }
        .dia-semana {
            font-weight: bold; /* Negrito para os dias da semana */
            padding: 5px; /* Mantém o texto próximo */
            height: 30px; /* Altura ajustada apenas para os dias da semana */
            display: flex; /* Para centralizar o texto verticalmente */
            align-items: center; /* Centraliza verticalmente */
            justify-content: center; /* Centraliza horizontalmente */
        }
        .mes {
            text-align: center;
            font-weight: bold;
            margin-bottom: 10px;
            font-size: 25px;
            flex-grow: 1; /* Para centralizar corretamente */
        }
        .dia-inativo {
            background-color: #f0f0f0; /* Tom mais claro para dias de outros meses */
            color: #bbb; /* Tom mais claro para o texto */
        }
        .navegacao {
            margin: 10px 0;
            display: flex;
            align-items: center;
        }
        .botao {
            padding: 10px 15px;
            background-color: #007bff;
            color: white;
            border: none;
            cursor: pointer;
            margin-right: 1px; /* Margem entre os botões */
            font-size: 18px; /* Tamanho da fonte dos botões */
        }
    </style>
</head>
<body>

    <div class="page-head">
        <div>
            <h1>Calendário</h1>
        </div>
    </div>

    <div class="navegacao">
        <button class="botao" id="btnAnterior">&lt;</button>
        <button class="botao" id="btnProximo">&gt;</button>
        <button class="botao" id="btnHoje">Hoje</button>
        <div class="mes" id="mesAno"></div>
    </div>

    <div id="calendario" class="calendario"></div>

    <script>
        const diasDaSemana = ['Dom.', 'Seg.', 'Ter.', 'Qua.', 'Qui.', 'Sex.', 'Sáb.'];
        const meses = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 
                       'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
        let mesAtual = new Date().getMonth();
        let anoAtual = new Date().getFullYear();
        const dataAtual = new Date(); // Armazena a data atual

        function criarCalendario(mes, ano) {
            const calendario = document.getElementById('calendario');
            const mesAno = document.getElementById('mesAno');
            calendario.innerHTML = ''; // Limpa o calendário atual

            // Adiciona o nome do mês e ano
            mesAno.textContent = `${meses[mes]} de ${ano}`;

            // Adiciona os dias da semana
            diasDaSemana.forEach(dia => {
                const diaDaSemana = document.createElement('div');
                diaDaSemana.textContent = dia;
                diaDaSemana.classList.add('dia', 'dia-semana'); // Classe adicionada para estilização
                calendario.appendChild(diaDaSemana);
            });

            // Ajuste para garantir que o primeiro dia seja domingo
            const primeiroDia = new Date(ano, mes, 1).getDay();
            const ultimoDia = new Date(ano, mes + 1, 0).getDate();
            const ultimoDiaDoMesAnterior = new Date(ano, mes, 0).getDate();

            // Preenche os dias em branco do mês anterior
            for (let i = 0; i < primeiroDia; i++) {
                const diaEmBranco = document.createElement('div');
                diaEmBranco.textContent = ultimoDiaDoMesAnterior - primeiroDia + 1 + i;
                diaEmBranco.classList.add('dia', 'dia-inativo'); // Marca como dia inativo
                calendario.appendChild(diaEmBranco);
            }

            // Adiciona os dias do mês
            for (let dia = 1; dia <= ultimoDia; dia++) {
                const diaElemento = document.createElement('div');
                diaElemento.textContent = dia;
                diaElemento.classList.add('dia');
                calendario.appendChild(diaElemento);
            }

            // Preenche os dias em branco do próximo mês
            const proximoMesDias = 42 - calendario.childElementCount; // Máx. de 42 células no calendário (6 semanas)
            for (let i = 1; i <= proximoMesDias; i++) {
                const diaEmBranco = document.createElement('div');
                diaEmBranco.textContent = i;
                diaEmBranco.classList.add('dia', 'dia-inativo'); // Marca como dia inativo
                calendario.appendChild(diaEmBranco);
            }
        }

        // Função para navegar entre os meses
        document.getElementById('btnAnterior').addEventListener('click', () => {
            mesAtual = mesAtual === 0 ? 11 : mesAtual - 1;
            anoAtual = mesAtual === 11 ? anoAtual - 1 : anoAtual;
            criarCalendario(mesAtual, anoAtual);
        });

        document.getElementById('btnProximo').addEventListener('click', () => {
            mesAtual = mesAtual === 11 ? 0 : mesAtual + 1;
            anoAtual = mesAtual === 0 ? anoAtual + 1 : anoAtual;
            criarCalendario(mesAtual, anoAtual);
        });

        document.getElementById('btnHoje').addEventListener('click', () => {
            mesAtual = dataAtual.getMonth();
            anoAtual = dataAtual.getFullYear();
            criarCalendario(mesAtual, anoAtual);
        });

        // Inicializa o calendário com o mês atual
        criarCalendario(mesAtual, anoAtual);
    </script>

</body>
</html>

Bom dia @Leonardo,

Para adicionar um componente personalizado utilizando o HTML element você pode seguir os seguintes passos

Elemento personalizável com HTML Element

  • Crie um campo do tipo HTML Element

  • Na configuração ‘Templete Html’ adicione o conteúdo do corpo de seu componente em uma DIV

  • Código usado:
<div class="container-calendar">
    <style>
        /* Estilizando a página */
        .container-calendar {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .page-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .container-calendar h1 {
            font-size: 24px;
        }
        .calendario {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            grid-gap: 0; /* Remover o espaço entre os dias */
            margin-top: 20px;
        }
        .dia {
            border: 1px solid #ccc;
            padding: 7px;
            text-align: center;
            position: relative;
            height: 150px; /* Altura do dia (números) ajustada para acomodar múltiplos eventos */
        }
        .dia-semana {
            font-weight: bold; /* Negrito para os dias da semana */
            padding: 5px; /* Mantém o texto próximo */
            height: 30px; /* Altura ajustada apenas para os dias da semana */
            display: flex; /* Para centralizar o texto verticalmente */
            align-items: center; /* Centraliza verticalmente */
            justify-content: center; /* Centraliza horizontalmente */
        }
        .mes {
            text-align: center;
            font-weight: bold;
            margin-bottom: 10px;
            font-size: 25px;
            flex-grow: 1; /* Para centralizar corretamente */
        }
        .dia-inativo {
            background-color: #f0f0f0; /* Tom mais claro para dias de outros meses */
            color: #bbb; /* Tom mais claro para o texto */
        }
        .navegacao {
            margin: 10px 0;
            display: flex;
            align-items: center;
        }
        .botao {
            padding: 10px 15px;
            background-color: #007bff;
            color: white;
            border: none;
            cursor: pointer;
            margin-right: 1px; /* Margem entre os botões */
            font-size: 18px; /* Tamanho da fonte dos botões */
        }
    </style>

    <div class="page-head">
        <div>
            <h1>Calendário</h1>
        </div>
    </div>

    <div class="navegacao">
        <button class="botao" id="btnAnterior">&lt;</button>
        <button class="botao" id="btnProximo">&gt;</button>
        <button class="botao" id="btnHoje">Hoje</button>
        <div class="mes" id="mesAno"></div>
    </div>

    <div id="calendario" class="calendario"></div>

    <script type="text/javascript">
        setTimeout(
            function() {
                const diasDaSemana = ['Dom.', 'Seg.', 'Ter.', 'Qua.', 'Qui.', 'Sex.', 'Sáb.'];
                const meses = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 
                            'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
                let mesAtual = new Date().getMonth();
                let anoAtual = new Date().getFullYear();
                const dataAtual = new Date(); // Armazena a data atual

                function criarCalendario(mes, ano) {
                    const calendario = document.getElementById('calendario');
                    const mesAno = document.getElementById('mesAno');
                    calendario.innerHTML = ''; // Limpa o calendário atual

                    // Adiciona o nome do mês e ano
                    mesAno.textContent = `${meses[mes]} de ${ano}`;

                    // Adiciona os dias da semana
                    diasDaSemana.forEach(dia => {
                        const diaDaSemana = document.createElement('div');
                        diaDaSemana.textContent = dia;
                        diaDaSemana.classList.add('dia', 'dia-semana'); // Classe adicionada para estilização
                        calendario.appendChild(diaDaSemana);
                    });

                    // Ajuste para garantir que o primeiro dia seja domingo
                    const primeiroDia = new Date(ano, mes, 1).getDay();
                    const ultimoDia = new Date(ano, mes + 1, 0).getDate();
                    const ultimoDiaDoMesAnterior = new Date(ano, mes, 0).getDate();

                    // Preenche os dias em branco do mês anterior
                    for (let i = 0; i < primeiroDia; i++) {
                        const diaEmBranco = document.createElement('div');
                        diaEmBranco.textContent = ultimoDiaDoMesAnterior - primeiroDia + 1 + i;
                        diaEmBranco.classList.add('dia', 'dia-inativo'); // Marca como dia inativo
                        calendario.appendChild(diaEmBranco);
                    }

                    // Adiciona os dias do mês
                    for (let dia = 1; dia <= ultimoDia; dia++) {
                        const diaElemento = document.createElement('div');
                        diaElemento.textContent = dia;
                        diaElemento.classList.add('dia');
                        calendario.appendChild(diaElemento);
                    }

                    // Preenche os dias em branco do próximo mês
                    const proximoMesDias = 42 - calendario.childElementCount; // Máx. de 42 células no calendário (6 semanas)
                    for (let i = 1; i <= proximoMesDias; i++) {
                        const diaEmBranco = document.createElement('div');
                        diaEmBranco.textContent = i;
                        diaEmBranco.classList.add('dia', 'dia-inativo'); // Marca como dia inativo
                        calendario.appendChild(diaEmBranco);
                    }
                }

                // Função para navegar entre os meses
                document.getElementById('btnAnterior').addEventListener('click', () => {
                    mesAtual = mesAtual === 0 ? 11 : mesAtual - 1;
                    anoAtual = mesAtual === 11 ? anoAtual - 1 : anoAtual;
                    criarCalendario(mesAtual, anoAtual);
                });

                document.getElementById('btnProximo').addEventListener('click', () => {
                    mesAtual = mesAtual === 11 ? 0 : mesAtual + 1;
                    anoAtual = mesAtual === 0 ? anoAtual + 1 : anoAtual;
                    criarCalendario(mesAtual, anoAtual);
                });

                document.getElementById('btnHoje').addEventListener('click', () => {
                    mesAtual = dataAtual.getMonth();
                    anoAtual = dataAtual.getFullYear();
                    criarCalendario(mesAtual, anoAtual);
                });

                // Inicializa o calendário com o mês atual
                criarCalendario(mesAtual, anoAtual);
            }
            , 2000
        )
    </script>
</div>

Obs.: Fiz duas pequenas alterações para funcionar no campo.
1: Adição de todo o conteúdo em uma DIV de container.
2: adição de um Timeout no código JS para aguardar o carregamento dos campos


Temos também a possibilidade de usar um componente de extensão customizado do latromi

Segue o passo a passo para usá-lo

Calendário Latromi

Adicionando Javascript no formulário

  • Acesse a aba ‘Arquivos Javascript’ do objeto formulário

  • Crie novos arquivos

  • Inclua o código abaixo referente a criação do componente no arquivo
/********************************* Calendar Component **********************************/

/* 
Dependências:
*/

function deepMerge(target, ...sources) {
    sources.forEach(source => {
        if (source) {
            Object.keys(source).forEach(key => {
                if (typeof source[key] === 'object' && source[key] !== null && !Array.isArray(source[key])) {
                    if (!target[key]) {
                        target[key] = {};
                    }
                    deepMerge(target[key], source[key]);  // Recursivamente mescla objetos
                } else {
                    target[key] = source[key];  // Cópia simples para valores não-objetos
                }
            });
        }
    });
    return target;
}

var latromiCalendarConfigurator = function (options) {
    var settings = deepMerge({
        containerCssClass: 'calendar-container',
        calendarCssClass: 'lcplace',
        drawInterval: 100
    }, options)

    var lcObjects = []

    function drawCalendar(element) {
        var latromiCalendarObj = lcObjects.find(function (value) { return value.id === element.attributes['data-guid']?.value })
        if (latromiCalendarObj)
            latromiCalendarObj.build()
        else {
            // Localiza o element Script, que contém o JSON com os dados.
            var childrens = [...element.children].filter(function (value) { return value.tagName === 'SCRIPT' })
            if (childrens.length > 0) {
                var script = childrens[0]
                if (script.innerHTML && script.innerHTML !== '')
                    var json = JSON.parse(script.innerHTML)
            }

            latromiCalendarObj = new latromiCalendar(element, json)
            lcObjects.push(latromiCalendarObj)
            latromiCalendarObj.build()
        }
    }

    function get(element) {
        var obj = lcObjects.find(function (value) { return value.id === element.attributes['data-guid']?.value })
        if (obj)
            return obj.getValue()
        return null
    }

    function set(element, value) {
        lcObjects.find(function (value) { return value.id === element.attributes['data-guid']?.value }).setValue(value)
    }

    return {
        load: function () {
            if (document.getElementsByClassName(settings.containerCssClass).length === 0) return

            setInterval(function () {
                var itens = [...document.getElementsByClassName(settings.calendarCssClass)].filter(function (value) { return !value.attributes['data-state'] })
                for (let index = 0; index < itens.length; index++) {
                    drawCalendar(itens[index])
                }
            }, settings.drawInterval)
        },
        getValue: function (element) { return get(element) },
        setValue: function (element, value) { set(element, value) }
    }
}

var latromiCalendar = function (element, options) {
    var guid = _uuidv4()
    
    var settings = deepMerge({
        header: {
            layout: null
        },
        legend: {
            dayOfWeek: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
            month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
            buttonToday: null
        },
        initialValue: null
    }, options)
    
    var _ = new Date() // para a inicialização do componente

    if (settings.initialValue && settings.initialValue !== '') {
        _ = new Date(settings.initialValue)
        _.setDate(_.getDate() + 1)
    }

    _.setHours(0, 0, 0, 0)

    var props = {
        year: _.getFullYear(),
        month: _.getMonth(),
        value: _,
        element: element,
        isRenderer: false
    }

    function _uuidv4() {
        return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c =>
            (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)
        );
    }

    function build() {
        props.element.innerHTML = ''

        var style = getDefaultStyle()
        var header = getHeader()
        var body = getBody()

        props.element.appendChild(style)
        props.element.appendChild(header)
        props.element.appendChild(body)

        props.isRenderer = true
        props.element.setAttribute('data-state', 'ok')
        props.element.setAttribute('data-guid', guid)

        var event = document.createEvent('Event')
        event.initEvent('change', true, false)
        element.dispatchEvent(event)
    }

    function getDefaultStyle() {
        var style = document.createElement('style')
        style.innerHTML = `
            /* Default container */
            .${props.element.parentElement.attributes['class'].value} {
                container-name: ctnCalendar;
                container-type: inline-size;
                display: grid;
            }

            /* Header */
            .lc-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .lc-header-1,
            .lc-header-2 {
                display: flex;
                flex-wrap: nowrap;
            }

            .lc-header-layout-default {
                flex-direction: column;
            }

            .lc-header-layout-default .lc-header-2 {
                flex-direction: row;
                justify-content: space-between;
                width: 100%;
            }

            .lc-header-title {
                text-align: center;
                font-weight: bold;
                font-size: 25px;
                flex-grow: 1;
                align-content: center;
            }

            .lc-btn {
                padding: 10px 15px;
                background-color: #007bff;
                color: white;
                border: none;
                cursor: pointer;
                margin-right: 1px;
                font-size: 18px;
            }

            .lc-header-layout-default .lc-today {
                background: transparent;
                color: black;
            }

            /* Body */
            .lc-body {
                display: grid;
                grid-template-columns: repeat(7, 1fr);
                grid-gap: 0;
                margin-top: 20px;
                font-size: 16px;
            }

            .lc-day {
                border: 1px solid #ccc;
                padding: 7px;
                text-align: center;
                position: relative;
                padding-bottom: calc(100% - 16px);
                background-color: white;
            }

            .lc-day .lc-day-content {
                position: absolute;
                margin-top: 7px;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }

            .lc-day:hover {
                cursor: pointer;
            }

            .lc-day-select {
                background-color: #FF4500;
                color: #000;
            }

            .lc-day-disable {
                background-color: #f0f0f0;
                color: #bbb;
            }

            .lc-day-of-week {
                font-weight: bold;
                padding: 5px;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                width: calc(100% - 12px);
            }

            .lc-day-of-week:hover {
                cursor: default !important;
            }

            @container ctnCalendar (max-width: 170px) {

                /* Header */
                .lc-header-title {
                    font-size: 10px;
                }

                .lc-btn {
                    padding: 4px 5px;
                    font-size: 8px;
                }

                /* Body */
                .lc-body {
                    margin-top: 5px;
                    font-size: 7px;
                }

                .lc-day .lc-day-content {
                    margin-top: 1px !important;
                }

                .lc-day-of-week {
                    height: 3px;
                }
            }

            @container ctnCalendar (170px <= width <= 240px) {

                /* Header */
                .lc-header-title {
                    font-size: 14px;
                }

                .lc-btn {
                    padding: 4px 6.4px;
                    font-size: 10px;
                }

                /* Body */
                .lc-body {
                    margin-top: 6.4px;
                    font-size: 8px;
                }

                .lc-day .lc-day-content {
                    margin-top: 2px !important;
                }

                .lc-day-of-week {
                    height: 5px;
                }
            }

            @container ctnCalendar (240px <= width <= 400px) {

                /* Header */
                .lc-header-title {
                    font-size: 18px;
                }

                .lc-btn {
                    padding: 6px 12px;
                    font-size: 12px;
                }

                /* Body */
                .lc-body {
                    margin-top: 12px;
                    font-size: 12px;
                }

                .lc-day .lc-day-content {
                    margin-top: 3px !important;
                }

                .lc-day-of-week {
                    height: 9px;
                }
            }
        `

        return style
    }

    function getHeader() {
        var header = document.createElement('div')
        header.classList.add('lc-header');
        var headerTop = document.createElement('div')
        headerTop.classList.add('lc-header-1')
        var headerBottom = document.createElement('div')
        headerBottom.classList.add('lc-header-2')
        var btnBack = document.createElement('button')
        btnBack.classList.add('lc-btn')
        btnBack.innerHTML = '&lt;'
        btnBack.addEventListener('click', function () {
            props.month = props.month === 0 ? 11 : props.month - 1;
            props.year = props.month === 11 ? props.year - 1 : props.year;
            build()
        })
        var btnNext = document.createElement('button')
        btnNext.classList.add('lc-btn')
        btnNext.addEventListener('click', function () {
            props.month = props.month === 11 ? 0 : props.month + 1;
            props.year = props.month === 0 ? props.year + 1 : props.year;
            build()
        })
        btnNext.innerHTML = '&gt;'
        var btnToday = document.createElement('button')
        btnToday.classList.add('lc-btn', 'lc-today')
        btnToday.addEventListener('click', function () {
            var today = new Date()
            props.month = today.getMonth()
            props.year = today.getFullYear()
            build()
        })
        var dtToday = new Date()
        btnToday.textContent = settings.legend.buttonToday ?? `${settings.legend.dayOfWeek[dtToday.getDay()]}, ${settings.legend.month[dtToday.getMonth()]} ${dtToday.getDate()}`
        var lblTitle = document.createElement('div')
        lblTitle.classList.add('lc-header-title')
        lblTitle.textContent = `${settings.legend.month[props.month]} ${props.year}`

        switch (settings.header.layout) {
            case 'center':
                headerBottom.appendChild(btnBack)
                headerBottom.appendChild(lblTitle)
                headerBottom.appendChild(btnNext)
                headerTop.appendChild(btnToday)
                header.appendChild(headerTop)
                header.appendChild(headerBottom)
                header.classList.add('lc-header-layout-default')
                break;
            case 'left':
                btnToday.classList.remove('lc-today')
                headerTop.appendChild(btnBack)
                headerTop.appendChild(btnNext)
                headerTop.appendChild(btnToday)
                headerBottom.appendChild(lblTitle)
                header.appendChild(headerTop)
                header.appendChild(headerBottom)
                break;
            case 'right':
                btnToday.classList.remove('lc-today')
                headerBottom.appendChild(btnToday)
                headerBottom.appendChild(btnBack)
                headerBottom.appendChild(btnNext)
                headerTop.appendChild(lblTitle)
                header.appendChild(headerTop)
                header.appendChild(headerBottom)
                break;
            default:
                headerBottom.appendChild(btnBack)
                headerBottom.appendChild(lblTitle)
                headerBottom.appendChild(btnNext)
                headerTop.appendChild(btnToday)
                header.appendChild(headerTop)
                header.appendChild(headerBottom)
                header.classList.add('lc-header-layout-default')
                break;
        }

        return header
    }

    function getBody() {
        var calendar = document.createElement('div')
        calendar.classList.add('lc-body')

        settings.legend.dayOfWeek.forEach(function (week) {
            var dayOfWeekDiv = document.createElement('div')
            dayOfWeekDiv.classList.add('lc-day', 'lc-day-of-week')
            var span = document.createElement('span')
            span.textContent = week
            span.classList.add('lc-day-content')
            dayOfWeekDiv.appendChild(span)
            calendar.appendChild(dayOfWeekDiv)
        })

        var currentDayOfWeek = new Date(props.year, props.month, 1).getDay()
        var lastDayMonth = new Date(props.year, props.month + 1, 0).getDate()
        var lastDayOfLastMonth = new Date(props.year, props.month, 0).getDate()

        for (var buffer = 0; buffer < currentDayOfWeek; buffer++) {
            var dayDiv = document.createElement('div')
            var day = lastDayOfLastMonth - currentDayOfWeek + 1 + buffer
            dayDiv.classList.add('lc-day', 'lc-day-disable')
            var span = document.createElement('span')
            span.textContent = day
            span.classList.add('lc-day-content')
            dayDiv.appendChild(span)
            $(dayDiv).attr('data-value', day)
            dayDiv.addEventListener('click', function () {
                var newDate = new Date(props.year, props.month - 1, parseInt($(this).attr('data-value')))
                props.month = newDate.getMonth()
                props.year = newDate.getFullYear()
                props.value = newDate
                build()
            })
            calendar.appendChild(dayDiv)
        }

        for (var dayMonth = 1; dayMonth <= lastDayMonth; dayMonth++) {
            var dayDiv = document.createElement('div')
            dayDiv.classList.add('lc-day')
            var selectedDate = new Date(props.year, props.month, dayMonth)
            if (selectedDate.getTime() === props.value.getTime())
                dayDiv.classList.add('lc-day-select')
            var span = document.createElement('span')
            span.textContent = dayMonth
            span.classList.add('lc-day-content')
            dayDiv.appendChild(span)
            $(dayDiv).attr('data-value', dayMonth)
            dayDiv.addEventListener('click', function () {
                var newDate = new Date(props.year, props.month, parseInt($(this).attr('data-value')))
                props.month = newDate.getMonth()
                props.year = newDate.getFullYear()
                props.value = newDate
                build()
            })
            calendar.appendChild(dayDiv)
        }

        var dayNextMonthTotal = 49 - calendar.childElementCount; // Leg.: 49 - Max value grid elements
        for (var dayNextMonth = 1; dayNextMonth <= dayNextMonthTotal; dayNextMonth++) {
            var dayDiv = document.createElement('div')
            dayDiv.classList.add('lc-day', 'lc-day-disable')
            var span = document.createElement('span')
            span.textContent = dayNextMonth
            span.classList.add('lc-day-content')
            dayDiv.appendChild(span)
            $(dayDiv).attr('data-value', dayNextMonth)
            dayDiv.addEventListener('click', function () {
                var newDate = new Date(props.year, props.month + 1, parseInt($(this).attr('data-value')))
                props.month = newDate.getMonth()
                props.year = newDate.getFullYear()
                props.value = newDate
                build()
            })
            calendar.appendChild(dayDiv)
        }

        return calendar
    }

    return {
        id: guid,
        options: settings,
        properties: props,
        build: build,
        getValue: function() { return props.value },
        setValue: function(value) { props.value = value }
    }
}
  • Inclua o código abaixo para carregar o calendário
const myForm = (function () {

    // Adiciona Callbacks no Formulário
    latromi.formManager.setOnFormCreatedCallback(onFormCreated);
    latromi.formManager.setOnEventFiringCallback(onEventFiring);
    latromi.formManager.setOnFieldValueChangedCallback(onFieldValueChanged);

    // Ocorre logo após o form ser inicializado
    function onFormCreated(ev) {
        var calendarObj = new latromiCalendarConfigurator({
            containerCssClass: 'calendar-container',
            calendarCssClass: 'lcplace',
            drawInterval: 100
        })
        calendarObj.load()
    }

    // Ocorre quando um evento é disparado no Form
    function onEventFiring(ev) { }

    // Ocorre quando o valor de um campo é alterado no Form
    function onFieldValueChanged(ev) { }

    // Todas as funções acima são "privadas", e não podem ser chamadas externamente.
    // As únicas funções que podem ser chamadas externamente são as que compões o resultado a seguir:
    return {
        test: function() { }
    }
})();

Adicionando o campo HTML Element

  • Adicione o campo no formulário

  • Inclua na configuração ‘Templete Html’ o seguinte código
<div class="calendar-container">
    <div class="lcplace">
        <script type="application/json">{ 
            "header": {
                "layout": "center"
            },
            "legend": {
                "dayOfWeek": ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab"],
                "month": ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
                "buttonToday": "Hoje" 
            }
        }</script>
    </div>
</div>

Propriedades do componente

As propriedades abaixo podem ser adicionados no templete HTML dentro da tag SCRIPT como um JSON, para personalizar o componente:

Parametros

header

  • layout: define o estilo do calendário sendo o estilo padrão o ‘center’ (Valores possíveis: ‘center’, ‘right’ e ‘left’)

legend

  • dayOfWeek: Define o texto para os dias da semana
  • month: Define o texto para os meses
  • buttonToday: Define texto para o botão que volta o calendário para o dia atual

initialValue

Esse campo é do tipo Datetime e define a data inicial para o calendário

2 curtidas

Boa tarde, @Diego_Ramos !

Consegui implementar o calendário corretamente e gostaria de agradecer muito pela sua ajuda.

Gostaria de saber se é possível adicionar uma funcionalidade que capture o nome do atendente, a fase do projeto em que ele está e o nome do projeto. A ideia é que, ao percorrer os dias do calendário, uma linha seja exibida do dia 1 ao dia 7, caso o projeto tenha início em 01/10/2024 e término em 07/10/2024.

Nos meus testes, consegui algo semelhante, mas não estou certo se é possível integrar os parâmetros desses campos no calendário de forma que as datas de início e fim sejam interpretadas corretamente com os dias correspondentes.

linhas continuas

Bom dia, @Leonardo.

Para manipular os valores dos parâmetros de um objeto Latromi pelo JS é necessário passar para uma variável e usar o código abaixo para manipular as variáveis.

  • Variáveis
var form = latromi.formManager.getFormInstance();

// Captura o valor de uma variável
var firstName = form.getVariableValue('txtFirstName');
// Seta o valor de uma variável
form.setVariableValue('txtFirstName', 'Bob');
  • Campos
var form = latromi.formManager.getFormInstance();

// Captura o valor de um campo
var firstName = form.getFieldValue('txtFirstName');
// Seta o valor de um campo
form.setFieldValue('txtFirstName', 'Bob');
1 curtida