CODEWITHSUNDEEP
reactjsfullcalendarfullcalendar-6react-to-print
TwoShorts
TwoShorts

Reputation: 548

How do you print out FullCalendar `timeGridWeek` starting at a specific time

I have a FullCalendar component I am using in my React project and everything is working great, except for the printing out the week view.

import FullCalendar from '@fullcalendar/react';
import { useEffect, useRef, useState } from 'react';
import { useReactToPrint } from 'react-to-print';

const events: any[] = [];

const Calendar = () => {
  const ref = useRef<any>();
  const [printResolve, setPrintResolve] = useState<{
    val: number;
    resolve: (value: any) => void;
  }>();

  const handlePrint = useReactToPrint({
    content: () => ref?.current?.calendar?.el as any,
    onBeforeGetContent: () =>
      new Promise((resolve) => {
        setPrintResolve({ val: 1, resolve });
      }),
    onAfterPrint: () => setPrintResolve(undefined),
  }) as () => void;

  useEffect(() => {
    printResolve?.resolve?.(undefined);
  }, [printResolve]);

  return (
    <FullCalendar
      customButtons={{
        print: { text: 'Print', click: handlePrint },
      }}
      ref={ref}
      initialView="timeGridWeek"
      eventSources={events}
      scrollTime="07:00:00"
      headerToolbar={printResolve ? undefined : { end: 'print' }}
    />
  );
};

export default Calendar;

My issue is that this only prints the top of the calendar starting at midnight. I want it to print what it has been scrolled to, not just the top of the calendar

What do I need to pass in / change in order for it to print the current view?

Upvotes: 0

Views: 187

Answers (0)

Related Questions