The timeline includes print optimized styling through the print add-on. This needs to be added to the download package or installed separately from a dedicated NPM package.
Print styling is applied when someone prints the page that contains the timeline. In addition to that, you can call the print method on the instance which grabs only the markup of the timeline, places it onto a temporary page and calls the browsers printing function. This is especially useful when you want to add a button to only print the timeline rather than the whole page.
Besides printing, PDF export is possible through the print dialog of the browser.
The print module is not available in the trial. You can try the live demo to see how it looks.
Demo
By calling the print method, the timeline will open a new window and print its content.
const MY_MODULES = [print];
const [inst, setInst] = React.useState(null);
const printView = () => {
inst.print();
};
<Button onClick={printView}>Print timeline</Button>
<Eventcalendar
view={{
timeline: {
type: 'week',
startDay: 1,
endDay: 5,
eventDisplay: 'fill'
}
}}
ref={setInst}
modules={MY_MODULES}
/>
JSXTSX
import { print } from '@mobiscroll/print';
import { Button, Eventcalendar, getJson, setOptions } from '@mobiscroll/react';
import { useCallback, useEffect, useMemo, useState } from 'react';
const MY_MODULES = [print];
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const [myEvents, setEvents] = useState([]);
const [inst, setInst] = useState(null);
const myResources = useMemo(
() => [
{
id: 1,
name: 'Flatiron Room',
color: '#fdf500',
},
{
id: 2,
name: 'The Capital City',
color: '#ff0101',
},
{
id: 3,
name: 'Heroes Square',
color: '#01adff',
},
{
id: 4,
name: 'Thunderdome',
color: '#ff4600',
},
{
id: 5,
name: 'King’s Landing',
color: '#239a21',
},
{
id: 6,
name: 'Gathering Field',
color: '#8f1ed6',
},
],
[],
);
const myView = useMemo(
() => ({
timeline: {
type: 'week',
startDay: 1,
endDay: 5,
eventDisplay: 'fill',
},
}),
[],
);
const printView = useCallback(() => {
inst.print();
}, [inst]);
useEffect(() => {
getJson(
'https://trial.mobiscroll.com/daily-weekly-events/',
(events) => {
setEvents(events);
},
'jsonp',
);
}, []);
return (
<>
<Button onClick={printView}>Print timeline</Button>
<Eventcalendar
clickToCreate={ }
dragToCreate={ }
dragToMove={ }
dragToResize={ }
eventDelete={ }
data={myEvents}
resources={myResources}
view={myView}
ref={setInst}
modules={MY_MODULES}
/>
</>
);
}
export default App;
import { print } from '@mobiscroll/print';
import {
Button,
Eventcalendar,
getJson,
MbscCalendarEvent,
MbscEventcalendarView,
MbscResource,
setOptions ,
} from '@mobiscroll/react';
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
const MY_MODULES = [print];
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => {
const [myEvents, setEvents] = useState<MbscCalendarEvent[]>([]);
const [inst, setInst] = useState<Eventcalendar | null>(null);
const myResources = useMemo<MbscResource[]>(
() => [
{
id: 1,
name: 'Flatiron Room',
color: '#fdf500',
},
{
id: 2,
name: 'The Capital City',
color: '#ff0101',
},
{
id: 3,
name: 'Heroes Square',
color: '#01adff',
},
{
id: 4,
name: 'Thunderdome',
color: '#ff4600',
},
{
id: 5,
name: 'King’s Landing',
color: '#239a21',
},
{
id: 6,
name: 'Gathering Field',
color: '#8f1ed6',
},
],
[],
);
const myView = useMemo<MbscEventcalendarView>(
() => ({
timeline: {
type: 'week',
allDay: false,
startDay: 1,
endDay: 5,
},
}),
[],
);
const printView = useCallback(() => {
inst!.print();
}, [inst]);
useEffect(() => {
getJson(
'https://trial.mobiscroll.com/daily-weekly-events/',
(events: MbscCalendarEvent[]) => {
setEvents(events);
},
'jsonp',
);
}, []);
return (
<>
<Button onClick={printView}>Print timeline</Button>
<Eventcalendar
clickToCreate={ }
dragToCreate={ }
dragToMove={ }
dragToResize={ }
eventDelete={ }
data={myEvents}
resources={myResources}
view={myView}
ref={setInst}
modules={MY_MODULES}
/>
</>
);
};
export default App;