Schedule Calendar in Timeline

Event calendars & schedulers
1

Hello, in our company we are evaluating using the Scheudle Component (Calendar) with Timeline for Angular.
We need one requeriment:
-The line that draws the today (current time) should be possible to set to a specfic date or draw a line in a specific date in a similar way.
This is possible to do in the component?

Thanks

2

Hello @Cesar_Smerling :wave:

Yes, it’s possible, you can solve with the following: colors: [{ start: '2022-02-22T08:30', end: '2022-02-22T08:33', background: 'blue'}] :point_down:

Example
Example2454×1092 187 KB

By setting the length of time, you can change the thickness of the indicator line.

3

It’s doesn’t seem to work. I add the colors property to the calendar and also tried the marked property. Nothing changes in the calendar.

This is my code:

setOptions({
locale: localeEs,
theme: ‘material’,
themeVariant: ‘light’,
});

@Component({
selector: ‘scs-gantt-mobi’,
template: <div style="height: 800px"> <mbsc-eventcalendar [data]="events" [selectedDate]="selectedDate" [view]="view" [resources]="resources" [marked]="marked" [colors]="colors" [refDate]="startRangeDate" ></mbsc-eventcalendar> </div>,
styles: ,
})
export class GanttMobiComponent implements OnInit {
@Input() events: MbscCalendarEvent;
@Input() resources: MbscResource;

view: MbscEventcalendarView = {
timeline: {
type: ‘month’,
size: 3,
},
};
startRangeDate = new Date(2019, 5, 1, 0, 0, 0, 0);
selectedDate = new Date(2019, 5, 15, 0, 0, 0, 0);

colors: MbscCalendarColor = [{ start: ‘2019-05-16T08:30’, end: ‘2019-05-16T10:30’, background: ‘blue’ }];
marked: MbscCalendarMarked = [
new Date(2019, 5, 15),
new Date(2019, 5, 18),
{
start: new Date(2019, 5, 28),
end: new Date(2019, 5, 29),
color: ‘red’,
},
{
color: ‘green’,
recurring: { repeat: ‘yearly’, month: 6, day: 24 },
},
];

constructor() {}

ngOnInit(): void {}
}

Screenshot_1
Screenshot_11915×944 38.3 KB

4

The marked option is not supported in case of the Timeline view, that’s why it’s not working.

Regarding the colors option [{ start: ‘2019-05-16T08:30’, end: ‘2019-05-16T10:30’, background: ‘blue’ }]; - that’s shown in May and the screenshot you shared shows the month from June to August.

5

Thanks Zsombor, I fix it, it wasn’t the date problem, the example it’s wrong but the problema was that the length of start and end was to small for the timeline in “month”.

Thanks.

Another questin, can a tooltip o label be added to that line?

6

No qworries @Cesar_Smerling :wink:

Regarding tooltip or label related question: that’s not possible at the moment.