Multiple Time Scales
There are four types of timeline views: day, week, month and year. Use the size property of the configuration object to set the length of the view or page size.
Use the resolutionHorizontal property of the configuration object to set the horizontal unit of a timeline column, it can be 'hour', 'day', 'week', 'month', 'quarter' and 'year'. In case of hourly resolution, the columns can be split to minutes (1, 5, 15, 20, 30) or merged into multiple hours (2, 3, 4, 6, 8, 12) using the timeCellStep and timeLabelStep properties.
Use the resolutionVertical property of the configuration object to set the vertical unit of a timeline rows, it can be 'day' or 'none'. If set to 'day', the days will be rendered on the vertical axis, while the hours of the day will be displayed on the horizontal axis.
Use the hideEmptyRows property to control the visibility of empty rows. If hideEmptyRows is set to true, rows without any events will not be displayed. This has no effect on parent resources - they will remain visible unless resolutionVertical is set to 'day', in which case an entire day will be hidden if all resources are empty.
Use the hideInvalidRows property to control the visibility of invalid rows. If hideInvalidRows is set to true, rows that are fully invalid - consists of periods defined as allDay: true, date (MbscDateType), or time ranges that span a full day or multiple days - will be hidden. This has no effect on parent resources - they will remain visible unless resolutionVertical is set to 'day', in which case an entire day will be hidden if all resources are fully invalid.
The reference date, controlled through the refDate option, is today by default, but it can be set to any date, like the first day of the month, or the first day of the year. The refDate serves as the start of the reference range. From that point on you can navigate forward and backward.
A couple of examples:
- Rolling two weeks - use
type: 'day'andsize: 14 - Two weeks (starting with Sun/Mon) - use
type: 'week'andsize: 2 - Quarter view, starting from January - use
type: 'year'andresolutionHorizontal: "quarter" - Rolling three months - use
type: 'month'andsize: 3 - Year view - use
type: 'year'
Demo
<Eventcalendar
view={{
timeline: {
type: 'day ',
size: 1 ,
resolutionVertical: 'day ',
resolutionHorizontal: 'day ',
eventDisplay: 'fill' ,
hideEmptyRows: false ,
hideInvalidRows: false ,
}
}}
refDate="
defaultSelectedDate="
/>
import { Eventcalendar, getJson, setOptions } from '@mobiscroll/react';
import { useEffect, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const [myEvents, setEvents] = useState([]);
const myView = useMemo(
() => ({
timeline: {
type: 'week',
size: 2,
},
}),
[],
);
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',
},
],
[],
);
useEffect(() => {
getJson(
'https://trial.mobiscroll.com/daily-weekly-events/',
(events) => {
setEvents(events);
},
'jsonp',
);
}, []);
return (
<Eventcalendar
clickToCreate={ }
dragToCreate={ }
dragToMove={ }
dragToResize={ }
eventDelete={ }
view={myView}
data={myEvents}
resources={myResources}
/>
);
}
export default App;
import {
Eventcalendar,
getJson,
MbscCalendarEvent,
MbscEventcalendarView,
MbscResource,
setOptions ,
} from '@mobiscroll/react';
import { FC, useEffect, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => {
const [myEvents, setEvents] = useState<MbscCalendarEvent[]>([]);
const myView = useMemo<MbscEventcalendarView>(
() => ({
timeline: {
type: 'week',
size: 2,
},
}),
[],
);
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',
},
],
[],
);
useEffect(() => {
getJson(
'https://trial.mobiscroll.com/daily-weekly-events/',
(events: MbscCalendarEvent[]) => {
setEvents(events);
},
'jsonp',
);
}, []);
return (
<Eventcalendar
clickToCreate={ }
dragToCreate={ }
dragToMove={ }
dragToResize={ }
eventDelete={ }
view={myView}
data={myEvents}
resources={myResources}
/>
);
};
export default App;