0
votes

Comment ajouter un élément pour afficher plus de texte dans l'événement de calendrier complet avec React js?

J'essaie d'implémenter le calendrier complet dans mon projet d'application React JS. Ce que je veux faire, c'est plutôt que d'afficher simplement le titre, je veux aussi que l'événement affiche une description.

J'ai vu une question posée précédemment Afficher plus de texte dans le calendrier complet qui a une réponse en utilisant jquery (2e réponse) qui était

class Calendar extends React.Component {

    render() {
        return (
            <div id="calendar" class="container" ref="calendar">
                <FullCalendar
                    selectable={true}
                    defaultView="dayGridMonth"
                    height={650}
                    aspectRatio={2}
                    plugins={[interaction, dayGridPlugin, bootstrapPlugin]}
                    themeSystem="bootstrap"
                    weekends={false}
                    displayEventTime={true}
                    timeZone="UTC"
                    events={[
                        { title: 'Early Bird Registration Deadline', description: 'asdasd', date: '2019-05-13' },
                        { title: 'event 2', description: 'asdasdasd', date: '2019-04-02' }
                    ]}
                    eventRender={this.EventDetail}                        
                />
            </div>
        )
    }
    EventDetail = ({ event, el }) => {
        const content = <div>{event.title}<div>{event.description}</div></div>;
        ReactDOM.render(content, el);
        return el;
      };
}
export default Calendar;

J'ai essayé de changer cela en ligne avec mon code:

      <div id="calendar" class="container">
        <FullCalendar
        defaultView="dayGridMonth"
        height={650}
        aspectRatio={2}
        plugins={[dayGridPlugin]}
        themeSystem='bootstrap4'
        weekends={false}
        events={[
          { title: 'event1', description: 'Test data', date: '2019-05-13' },
          { title: 'event 2', date: '2019-04-02' }
        ]}
        eventRender={
            function(element) 
            { 
                element.find('.fc-title').append("<br/>" + "asdasd");}
        }
        />      
        </div>

Sans le 'eventRender', le calendrier fonctionne bien, mais j'ai juste besoin de faire fonctionner cela un peu, il me manque probablement quelque chose de vraiment évident, mais j'ai regardé et essayé différentes choses et je ne suis allé nulle part. J'espère que quelqu'un pourra me dire comment je peux le faire.

MISE À JOUR Sur la base de votre réponse, j'ai essayé ceci mais cela ne fonctionne pas. Pouvez-vous s'il vous plaît fournir une assistance supplémentaire? Je vous en suis reconnaissant.

$(document).ready(function() { 
    $('#calendar').fullCalendar({ 
        events: 
            [ 
                { 
                    id: 1, 
                    title: First Event', 
                    start: ......., 
                    end: ....., 
                    description: 'first description' 
                }, 
                { 
                    id: 2, 
                    title: 'Second Event', 
                    start: ......., 
                    end: ....., 
                    description: 'second description'
                }
            ], 
        eventRender: function(event, element) { 
            element.find('.fc-title').append("<br/>" + event.description); 
        } 
    });
} 


2 commentaires

vous l'avez marqué avec fullCalendar-4 ... mais fullCalendar 4 n'utilise pas jQuery, donc 1) à moins que vous n'ayez inclus jQuery séparément dans votre page, ce code plantera, 2) l' element ne sera pas un objet jQuery de toute façon. 3) même dans la v3, le premier argument du rappel était un event , pas un element . 4) Toujours dans la version 4, eventRender fournit un objet info comme paramètre passé dans le callback. L'élément est une sous-propriété en son sein, et c'est un élément DOM, pas un objet jQuery. Avez-vous vérifié votre console pour des erreurs en essayant d'exécuter ceci?


Vous trouverez peut-être plus utile cette réponse plus récente à cette question. (Il utilise toujours jQuery, mais notez comment ils ont trouvé la propriété .el de l'objet principal, puis l'ont .el explicitement dans un objet jQuery avant d'essayer de le traiter)


3 Réponses :


3
votes

Vous pouvez faire quelque chose comme ça et transmettre un composant à la prop eventRender.

import React from 'react';
import ReactDOM from 'react-dom';
import FullCalendar from '@fullcalendar/react';

const EventDetail = ({ event, el }) => {
  const content = <div>{event.title}<div>{event.description}</div></div>;
  ReactDOM.render(content, el);
  return el;
};

<FullCalendar eventRender={EventDetail} />


7 commentaires

Cela semble supposer la signature v3 pour eventRender, mais la question est marquée avec la v4 qui a une signature différente . Vous voudrez peut-être modifier légèrement votre réponse.


@ADyson Ceci utilise en fait la signature v4. Si vous remarquez que je passe dans un objet. const EventDetail = ({event, el}) => {event.title} est la même chose que const EventDetail = (info) => {info.event.title} Au lieu de passer tout l'objet info, je ne fais que passer les propriétés J'ai besoin dans le rendu, qui sont l'événement et l'élément.


@Michael J'ai mis à jour ma question pour afficher mon code actuel, qui ne fonctionne malheureusement pas. Cela rend simplement le calendrier comme normal, si j'ajoute const aux détails de l'événement, j'obtiens une erreur.


@Dean J'ai organisé une démo rapide sur codesandbox pour vous. codesandbox.io/s/3x2yy4x4q


Je ne sais pas si c'est la meilleure solution notamment en raison du dimensionnement, mais c'est une solution. Je travaille actuellement sur quelque chose de similaire, donc si je trouve ou tombe sur une meilleure option, je la posterai ici.


lorsque je tente de mettre en œuvre la façon dont vous ai - je reçu une erreur de TypeError: __webpack_require__.i(...) is not a function new FullCalendar eval measureLifeCyclePerf ReactCompositeComponentWrapper._constructComponentWithoutOwn‌​er ReactCompositeComponentWrapper._constructComponent ReactCompositeComponentWrapper.mountComponent Object.mountComponent ReactDOMComponent.mountChildren ReactDOMComponent._createInitialChildren ReactDOMComponent.mountComponent Comment puis-je supprimer cette erreur?


@ZNYAKKAYAZ Si vous créez un sandbox de code, je peux y jeter un œil. Malheureusement, l'erreur ci-dessus n'offre pas suffisamment de contexte.



0
votes
  eventRender={(info) => {
        if (condition) {
          const image = document.createElement('span'); // or any other element
          image.setAttribute(class, 'customCSSClass');
          info.el.append(image);
        }
      }}

0 commentaires

0
votes

Conformément aux derniers documents de FullCalendar v5 pour React, vous disposez de la fonction eventContent pour personnaliser votre rendu pour les événements.

<FullCalendar eventContent={renderEventContent} />

 const renderEventContent = (eventInfo) => {
     return (
            <>
              <b>{eventInfo.timeText}</b>
              <p><i>{eventInfo.event.title}</i></p>
            </>
     )
 };


0 commentaires