1

My goal is to build out completely custom buttons for the prev/next functionality, not just using icon strings like the ones from font-awesome for instance, but with a custom in-house "element", which is basically a component by itself. I'm aware of the customButtons object specified in the docs, but that doesn't achieve the objective here to add fully custom buttons, since that one is still a "FullCalendar" flavored button with its own background and stuff, plus the customButtons approach requires passing strings, whereas my custom button will be an element. What I'm trying to achieve is something like the following (I'm using version 5 in case it helps):

const myCustomPrevBtn = {
  return <CustomButton onClick={()=>{}}>Prev</CustomButton >
}
const myCustomNextBtn = {
  return <CustomButton onClick={()=>{}}>Next</CustomButton >
}

 <FullCalendar 
     headerToolbar={{
       left:'myCustomPrevBtn',
       right:'myCustomNextBtn'
     }} 
     plugins={[dayGridPlugin, timeGridPlugin]} 
     initialView="timeGridWeek" 
  />

I was thinking about not using FullCalendar's default headerToolbar at all (since we're talking custom components for the prev/next buttons) by doing headerToolbar={{false}}, but not sure how I'd let the user move between the previous or next week/day/month if I take that route. Any thoughts on that?

complexSandwich
  • 493
  • 2
  • 9
  • 23
  • So you want this just for visual difference of the buttons? Or do they need to do some extra functionality as well? It's possible to theme the calendar, so you could style the buttons that way - and then it would be consistent across all buttons, not just prev/next. – ADyson Aug 23 '22 at 09:41
  • If you want to make buttons completely independent of the calendar though, you can - fullcalendar has next() and prev() methods in its API you can call to do the same task, so you could just make your buttons call those methods. – ADyson Aug 23 '22 at 09:43
  • Thanks for taking a look into it @ADyson, I went with the second approach. Used ref to expose the `next` and `prev` functions and just used those in my custom buttons, which are supposed to be completely independent of the calendar. – complexSandwich Aug 24 '22 at 22:15
  • @ADyson apologies if it breaks SO's policies, I had another question pertaining to FullCalendar's API, I was looking up the topic before posting my question and saw that you answered one of the questions. Any chance you had some insight into this? - https://stackoverflow.com/questions/73480491/fullcalendar-v5-best-way-to-update-full-list-of-events-in-react – complexSandwich Aug 24 '22 at 23:44

1 Answers1

2

For anyone seeing this in the future, I ended up accessing the calendar API by using ref. So for instance, I was passing a ref to my FullCalendar component, then inside the event handler for my custom buttons that I needed to use, I accessed the calendar API's prev/next functions using that ref's current value -

<FullCalendar
  ref={testRef}
  headerToolbar={false}
  plugins={[dayGridPlugin, timeGridPlugin]}
  initialView="timeGridWeek"
  initialEvents={[//some events list]}
/>

// then inside my custom handler
  const handlePreviousClick = () => {
    const calendarAPI = calendarRef?.current?.getApi();
    calendarAPI?.prev();
  };

Hope it helps.

complexSandwich
  • 493
  • 2
  • 9
  • 23