Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

351
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda