Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

353
Visualizações
Calendar Ant Design: cómo mostrar el evento solo en un día específico del mes usando React JS

Estoy investigando la documentación del calendario de diseño de hormigas.

Quiero establecer eventos en días específicos en el mes actual. Estoy usando este código que proporciona documentación de diseño de hormigas. Pero en su código los eventos creados se mostraban cada mes.

¿Cómo puedo mostrar, por ejemplo, solo en abril?

Porque en mi caso, debería recibir una lista de eventos de back-end en diferentes años, meses y fechas y mostrarla en el calendario.

Aquí está el código de documentación de diseño de hormigas

 function getListData(value) { let listData; switch (value.date()) { case 8: listData = [ { type: "warning", content: "This is warning event." }, { type: "success", content: "This is usual event." } ]; break; default: } return listData || []; } function dateCellRender(value) { const listData = getListData(value); return ( <ul className="events"> {listData.map((item) => ( <li key={item.content}> <Badge status={item.type} text={item.content} /> </li> ))} </ul> ); } ReactDOM.render( <Calendar dateCellRender={dateCellRender} />, document.getElementById("container") );

Y este es mi código que recibo del backend.

formattedBooking son mis datos del backend

 const getListData = value => { const listData = []; if (formattedBookings && formattedBookings[value.date()]) { formattedBookings[value.date()].forEach(booking => { listData.push({ type: 'success', content: `${booking.address}`, }); }); } return listData; }; const dateCellRender = value => { const listData = getListData(value); return ( <ul className='events'> {listData.map((item, index) => ( <li key={`${item.content}-${index}`}> <Badge status={item.type} text={item.content} /> </li> ))} </ul> ); }; return ( <Calendar dateCellRender={dateCellRender} /> );

Por favor, ayúdame a resolver este problema.

over 4 years ago · Santiago Trujillo
1 Respostas
Responde à pergunta

0

Cada valor enviado a getListData es un objeto de momento relacionado con un día específico en la vista de calendario, por lo que puede analizarlo como el mismo formato de fecha en su respuesta de backend y decidir qué desea representar en ese día específico. Aquí hay un ejemplo:

 function getListData(value) { let listData; let dateValue = value.format("yyyy/MM/DD"); // you can parse value in every format you want switch (dateValue) { case "2021/12/26": listData = [ { type: "warning", content: "This is warning event." }, { type: "success", content: "This is usual event." } ]; break; case "2022/01/12": listData = [ { type: "error", content: "This is error event 1." }, { type: "error", content: "This is error event 2." }, { type: "error", content: "This is error event 3." } ]; break; case "2022/02/08": listData = [ { type: "success", content: "This is usual event1." }, { type: "success", content: "This is usual event2." } ]; break; default: } return listData || []; }

Aquí está la versión editada de su sandbox.

over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda