node_modules folder (at @mobiscroll/vue/dist/css/mobiscroll.min.css).
If you are [using SCSS](https://sass-lang.com/), you will also find a full and a modular `.scss` file in the same directory.
To test the installation, create a single file component (SFC), import the Eventcalendar component in it. You can also pass it a view option and/or set a specific theme if you want.
In case you installed the library from a downloaded package and did not include the Eventcalendar in the package, you can choose a different component as well.
```html
startTime and endTime properties with a day-offset format.
#### Shift Start Time (Previous Day Offset)
Use a negative day offset (HH:MM-D) to show hours from the previous day (e.g., '20:00-1').
#### Shift End Time (Next Day Offset)
Use a positive day offset (HH:MM+D) to extend the view into the next day (e.g., '06:00+1').
```ts
view: {
schedule: {
type: 'week',
// Starts the view at 20:00 on the previous day
startTime: '20:00-1',
// Ends the view at 06:00 on the next day
endTime: '06:00+1'
}
}
```
### Row height
There might be cases when you would like to change the height of the schedule cell. You can use the following CSS classes for this purpose:
```css
.mbsc-schedule-time-wrapper,
.mbsc-schedule-item {
height: 20px;
}
```
### Column width
CSS classes offer the flexibility to adjust column widths, allowing you to fully customize the layout of both resource columns and day columns.
You can choose to customize them together or separately, giving you the freedom to create a design that suits your specific needs.
```css title="Setting general column width"
.mbsc-schedule-col-width {
width: 100px;
}
```
#### Customizing weekday column widths
Each weekday column has a predefined CSS class that allows setting different widths for them:
- `.mbsc-schedule-column-mon` (Monday)
- `.mbsc-schedule-column-tue` (Tuesday)
- `.mbsc-schedule-column-wed` (Wednesday)
- `.mbsc-schedule-column-thu` (Thursday)
- `.mbsc-schedule-column-fri` (Friday)
- `.mbsc-schedule-column-sat` (Saturday)
- `.mbsc-schedule-column-sun` (Sunday)
```css title="Adjusting width for Monday"
.mbsc-schedule-column-mon {
width: 150px;
}
```
#### Customizing resource column widths
Resource column widths can be adjusted by assigning a custom CSS class to resources using the cssClass property.
Check out how to change resource column widths in [this example](https://demo.mobiscroll.com/scheduler/content-dependent-resource-width).
```ts title="Assigning a class to a resource"
resources: [
{ id: 1, name: 'Resource 1', cssClass: 'resource-column-small' },
{ id: 2, name: 'Resource 2', cssClass: 'resource-column-large' }
]
```
```css title="Define styles for the resource classes"
.resource-column-small {
width: 80px;
}
.resource-column-large {
width: 160px;
}
```
:::info
If you override both resource and day column widths, make sure column groups (day or resource, depending on the [`groupBy`](#opt-groupBy) option)
are wide enough to contain their child elements, or specify a `min-width` for the group column instead of a fixed width.
:::
### Hide empty columns
Columns without any events can be hidden by setting `hideEmptyColumns` to `true` under the [view](#configuring-the-view) configuration.
### Hide invalid columns
Fully invalid columns can be hidden by setting `hideInvalidColumns` to `true` under the [view](#configuring-the-view) configuration.
:::info
A column is considered fully invalid if it contains [invalid](#opt-invalid) periods defined with `allDay`, date values,
or a single time range that covers a full day or multiple days.
:::
## Resources
### Resource grouping
The Scheduler view can display multiple [resources](resources) inside a single instance. By default the displayed resources will be grouped by the given resources and the grouping can be changed with the [`groupBy`](#opt-groupBy) option, which also supports grouping by date.
```javascript title="Grouping resources by date"
// highlight-next-line
const myGrouping = 'date';
const myResources = [{
id: 1,
name: 'Ryan',
color: '#f7c4b4'
}, {
id: 2,
name: 'Kate',
color: '#c6f1c9'
}, {
id: 3,
name: 'John',
color: '#e8d0ef'
}];
```
```html
Any Title you want here or
xxsmall, xsmall, small, medium, large, xlarge, xxlarge, and xxxlarge.
Here are the default sizes and their corresponding widths:
```css
.mbsc-timeline-column-xxs {
width: 1.5em; // 24px
}
.mbsc-timeline-column-xs {
width: 3em; // 48px
}
.mbsc-timeline-column-s {
width: 4.5em; // 72px
}
.mbsc-timeline-column-m {
width: 6em; // 96px
}
.mbsc-timeline-column-l {
width: 7.5em; // 120px
}
.mbsc-timeline-column-xl {
width: 9em; // 144px
}
.mbsc-timeline-column-xxl {
width: 10.5em; // 168px
}
.mbsc-timeline-column-xxxl {
width: 12em; // 192px
}
```
To specify the columnWidth in your view configuration, include it as part of the timeline view options:
```ts
view: {
timeline: {
columnWidth: 'large'
}
}
```
The predefined sizes correspond to specific default widths, but you can override them using CSS:
```css
.mbsc-timeline-column-l {
width: 50px;
}
```
:::caution
You need to apply these rules after the mobiscroll default rules, otherwise the default rules will take precedence over them.
:::
### Shifted days
[Shifted views](https://demo.mobiscroll.com/timeline/36-hour-rolling-window-aircraft-view) can be implemented by extending the daily timeline [view](#configuring-the-view) with hours from the previous or next calendar days using the startTime and endTime properties with a day-offset format.
#### Shift Start Time (Previous Day Offset)
Use a negative day offset (HH:MM-D) to show hours from the previous day (e.g., '20:00-1').
#### Shift End Time (Next Day Offset)
Use a positive day offset (HH:MM+D) to extend the view into the next day (e.g., '06:00+1').
```ts
view: {
timeline: {
type: 'day',
resolutionHorizontal: 'hour',
resolutionVertical: 'day',
// Starts the view at 20:00 on the previous day
startTime: '20:00-1',
// Ends the view at 06:00 on the next day
endTime: '06:00+1'
}
}
```
:::info
The day-offset feature is strictly dependent on the type: 'day' and the default hourly resolutionHorizontal setting. This can be efficiently combined with resolutionVertical: 'day' of any size.
:::
## Resources
### Resource grouping and hierarchy
The Timeline view supports resource hierarchy. [Hierarchy groups](https://demo.mobiscroll.com/timeline/resource-grouping-hierarchy) can be defined with the `children` property of the `resource` [object](#opt-resources). Child objects are also resources and have the same properties, thus they can also have children.
```html title="Multi-level hierarchy groups"