https://turbaco-bolivar.gov.co/SiteAssets/Turbaco/Componentes/EventosHome/eventos.js

1document.addEventListener('DOMContentLoaded', () =>{
2    mostrarEventos();
3})
4
5const url = `${location.protocol}//${location.host}/_api/web/lists/getbytitle('Eventos')/items?$orderby=Created desc&$top=3`;
6const options = {
7        method: 'GET',
8        headers: {
9            'Accept': 'application/json; odata=verbose',
10            'Content-Type': 'application/json; odata=verbose'
11        }
12    }
13const mostrarEventos = async() =>{
14    const contenedorUl = document.getElementById('eventosHome')
15    const eventos = formatedEventos(await sharePointGet());
16
17    const eventHtml = eventos.map((eventLi) =>{
18        return `
19            <li>
20				<div class="cuadro-new2" style="margin-bottom: 7em">
21                    <div class="img-nt2">
22                        <img src="${eventLi.imagen || '/SiteAssets/Turbaco/Componentes/FullCalendar/assets/calendar.svg'}" alt="${eventLi.titulo}">
23                    </div>
24                    <h4 class="text-left">${eventLi.titulo}</h4>
25                    <p class="text-left">${eventLi.descripcion}</p>
26                    <hr>
27                    <div class="pt-2 tetx-left">
28                        <a href="${eventLi.url ||'#'}" class="btn-new2 text-white">Clic Aquí</a>
29                    </div>
30                    <div class="fecha-evento">${eventLi.fecha}</div>
31                </div>
32			</li>
33        `
34    }).join(',')
35
36    contenedorUl.innerHTML = eventHtml
37
38}
39
40const formatedEventos = (eventos = []) =>{
41    const eventFiltered = eventos.filter(e => !e.Title.includes('Eliminado'))
42    return eventFiltered.map((evento) =>{
43        return {
44            imagen:evento.Imagen,
45            titulo:evento.Title,
46            descripcion:evento.Description,
47            fecha:formatedDate(evento.EventDate),
48            url:evento.Url
49        }
50    })
51}
52
53const formatedDate = (strDate) => {
54  const date = new Date(strDate);
55  const day = date.getDate(); // día del mes

56  const month = date.toLocaleString('es-CO', { month: 'long' }); // nombre del mes en español
57  const year = date.getFullYear();
58  return `${day} de ${month} de ${year}`;
59};
60
61const sharePointGet = async () =>{
62    try {
63        const response = await fetch(url,options)
64        if(!response.ok){
65            throw new Error(`¡HTTP Error! ${response.statusText}`)
66        }
67        const data = await response.json();
68        return data.d.results
69    } catch (error) {
70        console.error(`Error consultando la lista: ${error.message}`);
71    }
72}