React FullCalendar Making like School Timetable Scheduler

Albert Gamundi 0
Viewed 25

I'm developing an app for my school, like a scheduler but for timtable for teachers. I want something like this: enter image description here

I'm using React for my app and FullCalendar component. I have this component configured like this:

<FullCalendar
              weekends={false}
              editable
              droppable
              selectable
              events={events}
              ref={calendarRef}
              rerenderDelay={10}
              initialDate={date}
              initialView={view}
              dayMaxEventRows={30}
              eventDisplay="block"
              headerToolbar={false}
              allDayMaintainDuration
              eventResizableFromStart
              select={handleSelectRange}
              eventDrop={handleDropEvent}
              eventClick={handleSelectEvent}
              eventResize={handleResizeEvent}
              height={isDesktop ? 720 : 'auto'}
              plugins={[listPlugin, dayGridPlugin, timelinePlugin, timeGridPlugin, interactionPlugin]}
              slotMinTime="8:00:00"
              slotMaxTime="19:00:00"
              displayEventTime={false}
            />

But I don't know if I can remove hours first columns and make every event as a separated component with an arrow for expand. I need to write on every event some text (sometimes is a long text), and every week have its own text. All data saved to mongo database, ofcourse. For now my component looks like this:

enter image description here

You know if there are any method or propierty for make events stacked without time duration, and fit to content title and then expand it? I'm not fixed on FullCalendar Component, I can use some other component if it do what I need, but I need to save every week separated.

Thanks in advance.

fullcalendar-5 fullcalendar reactjs javascript
1 Answers

For this you can use the "DayGrid" view in fullCalendar.

It's mentioned here in the documentation and there's a live demo available there too to show you what it looks like.

With another minor tweak to the eventDisplay setting it starts to look similar to your screenshot.

Something like this:

  var calendar = new FullCalendar.Calendar(calendarEl, { 
    initialView: "dayGridWeek",
    eventDisplay: "block",
    headerToolbar: {
      left: "prev,next today",
      center: "title",
      right: "dayGridWeek,timeGridWeek"
    },

...etc. Demo: https://codepen.io/ADyson82/pen/KKRqaJe

Of course if you wish you can then add your own further customisations to change the appearance of the events using fullCalendar's event render hooks.

P.S. I'm not a React user so my demo uses vanilla JS but you can get exactly the same result via React syntax.

ADyson0
Related