Colorir elemento entre períodos usando a biblioteca... | Fórum | School of Net

Deseja poder participar de nosso fórum e tirar todas as suas dúvidas?
Clique aqui e assine nosso plano de acesso ilimitado. Saiba mais.

por Gabriel

8 meses, 3 semanas atrás Gabriel

Colorir elemento entre períodos usando a biblioteca Vis.js

Boa tarde! Estou desenvolvendo uma time line usando a biblioteca Vijs.js e preciso colorir determinados períodos, por exemplo, tenho um dado, que sua data inicial é dia 22/12/2019 e sua data final é dia 05/01/2020, preciso colorir de uma cor do dia 22/12/2019 ao 28/12/2019, de outra cor preciso colorir o período entre 29/12/2019 ao 04/01/2020 e por fim preciso colorir do 05/01/2020 ao dia 15/01/2020. O dado que me refiro está selecionado na cor preta no link https://drive.google.com/file/d/1jezndvK3YNymFZBW7sHEN4jvOrFZ0La_/view?usp=sharing Segue o código como está hoje: ``` $(document).ready(function() { var action = $('#test').val(); $.ajax({ url: action, type: 'GET', datatype: 'json', error: function () { console.log('error'); }, success: function (data) { var categories = data.categories; var producers = data.producers; var plantings = data.plantings; var categoriesCount = categories.length; var producersCount = producers.length; var plantingsCount = plantings.length; // create groups father var groups = new vis.DataSet(); for (var i = 0; i < categoriesCount; i++) { groups.add({ id: i, content: categories[i].categoria + ' > ' + categories[i].cultura, cultureId: categories[i].culturaId, nestedGroups: [] }); } // create groups child var groupsSize = groups.length; for (var j = 0; j < groupsSize; j++) { var cultureId = groups._data[j].cultureId; for (var k = 0; k < producersCount; k++) { if (cultureId == producers[k].culturaId) { var id = ((groups.length)); groups.add({ id: id, content: producers[k].name, producerId: producers[k].id, cultureId: cultureId }); groups._data[j].nestedGroups.push(id); } } } // create a dataset with items var groupsSize2 = groups.length; var group = 0; var items = new vis.DataSet(); for (var l = 0; l < plantingsCount; l++) { var start = plantings[l].dt_semeadura; var end = plantings[l].dt_colheita; var inf = 'Plantio de '+ moment(start).fromNow(true) + ' ' + date(plantings[l].dt_semeadura); for (var m = 0; m < groupsSize2; m++) { if ((groups._data[m].producerId > 0) && (groups._data[m].producerId == plantings[l].user_id) && (groups._data[m].cultureId == plantings[l].cultura_id)) { group = groups._data[m].id; items.add({ id: rId(), group: group, content: '<span style="color:#97B0F8;">' + inf + '</span>', start: start, end: end, type: 'box' }); } } } // create visualization var container = document.getElementById('visualization'); // groupOrder can be a property name or a sorting function var options = { groupOrder: 'content', orientation: 'both', zoomKey: 'ctrlKey' }; var timeline = new vis.Timeline(container); timeline.setOptions(options); timeline.setGroups(groups); timeline.setItems(items); } }); }); function rId() { return Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10) } function date(date) { var current = new Date(); var text = ''; if (moment(date).isAfter(current)) { text = 'a frente'; } else { text = 'atrás'; } return text; } ``` Desde já agradeço pela atenção.

4 Respostas