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); } }); }
3 Réponses :
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} />
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._constructComponentWithoutOwner 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.
eventRender={(info) => { if (condition) { const image = document.createElement('span'); // or any other element image.setAttribute(class, 'customCSSClass'); info.el.append(image); } }}
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> </> ) };
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 unevent
, pas unelement
. 4) Toujours dans la version 4, eventRender fournit un objetinfo
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)