Schedule custom header rows, zooms for the schedule

[Cesar Smerling]

Hi, we are using the Schedule Component with the timeline view with resources, showing the resources in the left and the time at the top.

I want to know if it's possible to set headerRows to be a Week templated like (MONTH 1-7, Month 8-14...etc) and a second row with the day of the week (S, S, M, T, W, T, V) and the width of that cell to be defined (smaller in our case)

We are migrating from another project, I attach a picture to show you how we want to look

Thanks

Attachment: Screenshot_1_30908f90.zip

[Vengatesh Maniraj]

Please find the details below that help you to achieve your requirement. 

UG: https://ej2.syncfusion.com/angular/documentation/schedule/header-rows/
Sample: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/schedule/header-rows  

[Cesar Smerling]

Thanks, I managed to create the diferrents zooms (views) with the different interval and header rows like this:

<e-views>
    <e-view
        *ngFor="let zoom of zoomLevels"
        [option]="zoom.option"
        [interval]="zoom.interval"
        [displayName]="zoom.displayName"
        [headerRows]="zoom.headerRows"
    >
    </e-view>
</e-views>


zoomLevels = [
    {
        option: 'TimelineMonth',
        displayName: 'Year/Month',
        interval: 60,
        headerRows: [
            {
                option: 'Year',
            },
            {
                option: 'Month',
            },
        ],
    },
    {
        option: 'TimelineMonth',
        displayName: 'Month/Week',
        interval: 12,
        headerRows: [
            {
                option: 'Month',
            },
            {
                option: 'Week',
            },
        ],
    },
    {
        option: 'TimelineMonth',
        displayName: 'Week/Date',
        interval: 18,
        headerRows: [
            {
                option: 'Week',
            },
            {
                option: 'Date',
            },
        ],
    },
    {
        option: 'TimelineDay',
        displayName: 'Date/Hour',
        interval: 18,
        headerRows: [
            {
                option: 'Date',
            },
            {
                option: 'Hour',
            },
        ],
    },
];

I have two more requirements for this:

-How can I select a view by default (onInit) with displayName not the option, as you can see I have more than one view with TimelineMonth and depending on the data I want to preselect one

-I have to create more views with the same header rows and diferrent intervals. What I want in each case is to set the width of the of column of the header row so I can see all the data in the interval. I cannot find a way to do it.



[Cesar Smerling]

Hello I found out this in the docs to set the dimension of the cells:

https://ej2.syncfusion.com/angular/demos/#/bootstrap5/schedule/cell-dimension

I have another problem now defining the views. I want to each view have his own headerRows like this: 

<e-views>
    <e-view [option]="'TimelineMonth'" [interval]="60" [displayName]="'Year/Month'">
        <e-header-rows>
            <e-header-row [option]="'Year'">
                <ng-template #template let-data>
                    <span [innerHTML]="getMonthDetails(data, 'YYYY')"></span>
                </ng-template>
            </e-header-row>
            <e-header-row [option]="'Month'">
                <ng-template #template let-data>
                    <span [innerHTML]="getMonthDetails(data, 'MMM')"></span>
                </ng-template>
            </e-header-row>
        </e-header-rows>
    </e-view>
    <e-view [option]="'TimelineMonth'" [interval]="12" [displayName]="'Month/Week'">
        <e-header-rows>
            <e-header-row [option]="'Month'">
                <ng-template #template let-data>
                    <span [innerHTML]="getMonthDetails(data, 'MMMM')"></span>
                </ng-template>
            </e-header-row>
            <e-header-row [option]="'Week'">
                <ng-template #template let-data>
                    <span [innerHTML]="getMonthDetails(data, 'MMM dd')"></span>
                </ng-template>
            </e-header-row>
        </e-header-rows>
    </e-view>
    <e-view [option]="'TimelineMonth'" [interval]="18" [displayName]="'Week/Date'">
        <e-header-rows>
            <e-header-row [option]="'Week'">
                <ng-template #template let-data>
                    <span [innerHTML]="getMonthDetails(data, 'MMM dd')"></span>
                </ng-template>
            </e-header-row>
            <e-header-row [option]="'Date'">
                <ng-template #template let-data>
                    <span [innerHTML]="getMonthDetails(data, 'dd')"></span>
                </ng-template>
            </e-header-row>
        </e-header-rows>
    </e-view>
    <e-view [option]="'TimelineDay'" [interval]="18" [displayName]="'Date/Hour'">
        <e-header-rows>
            <e-header-row [option]="'Date'">
                <ng-template #template let-data>
                    <span [innerHTML]="getMonthDetails(data, 'yyyy-MM-dd')"></span>
                </ng-template>
            </e-header-row>
            <e-header-row [option]="'Hour'">
                <ng-template #template let-data>
                    <span [innerHTML]="getMonthDetails(data, 'hh:ss')"></span>
                </ng-template>
            </e-header-row>
        </e-header-rows>
    </e-view>
    <!--                <e-view *ngFor="let zoom of zoomLevels" [option]="zoom.option" [interval]="zoom.interval" [displayName]="zoom.displayName">-->
    <!--                    <e-header-rows>-->
    <!--                        <e-header-row *ngFor="let headerRow of zoom.headerRows" [option]="headerRow.option">-->
    <!--                            <ng-template #template let-data>-->
    <!--                                <span [innerHTML]="getMonthDetails(data, headerRow.format)"></span>-->
    <!--                            </ng-template>-->
    <!--                        </e-header-row>-->
    <!--                    </e-header-rows>-->
    <!--                </e-view>-->
</e-views>
 Copy

This doesn't work for me, everytime I change the view the headerRows doesn't change, so the formats of the date in the header rows get defined as the first case (year/month)
How can I set to each view his own header rows with his own formats?

Another question is how can I scroll to an specific event?

[Cesar Smerling]

Hello I have another problem:

In the header row Date and Hour I cannot format the date that is passed. I use them in a TimelineWeek and TimelineDay

[Balasubramanian Sattanathan]

Hi Cesar,

-How can I select a view by default (onInit) with displayName not the option, as you can see I have more than one view with TimelineMonth and depending on the data I want to preselect one

It can be achieved by using the isSelected property of the view tag. Kindly refer to the below code snippet.

app.component.html:

<e-views>

  <e-view *ngFor="let zoom of zoomLevels" [option]="zoom.option" [interval]="zoom.interval"

    [displayName]="zoom.displayName" [headerRows]="zoom.headerRows" [isSelected]="zoom.isSelected">

  </e-view>

</e-views>

app.component.ts:

{

  option: 'TimelineMonth',

  displayName: 'Month/Week',

  interval: 12,

  isSelected: true,

  headerRows: [

    {

      option: 'Month',

    },

    {

      option: 'Week',

    },

  ],

},

-I have to create more views with the same header rows and diferrent intervals. What I want in each case is to set the width of the of column of the header row so I can see all the data in the interval. I cannot find a way to do it.

We regret to let you know that this is not feasible at our end according to the Scheduler architecture.

In the header row Date and Hour I cannot format the date that is passed. I use them in a TimelineWeek and TimelineDay

How can I set to each view his own header rows with his own formats?

Kindly refer to the below links to know more details about header rows and its possibilities.
Demo link: https://ej2.syncfusion.com/angular/demos/#/material/schedule/header-rows

UG: https://ej2.syncfusion.com/angular/documentation/schedule/header-rows/#customizing-the-header-rows-using-template

Another question is how can I scroll to an specific event?

We have a scrollTo public method to scroll the specific time and date. You can scroll to the appointment based on its work-cells. Kindly refer to the below UG.
https://ej2.syncfusion.com/angular/documentation/schedule/working-days/#scroll-to-specific-time-and-date

Kindly refer to the above solution and let us know if this is helpful.

Regards,
Balasubramanian S

[Cesar Smerling]

THanks I will try out.

Refering to the problem: 

In the header row Date and Hour I cannot format the date that is passed. I use them in a TimelineWeek and TimelineDay

How can I set to each view his own header rows with his own formats?

The documentation works on TimelineMonth, but not on TimelineWeeks and TimelineDay, the format is not working for me in this cases. Can you provide and example to fomat de Header Row option=Date y header Row option=Hour in a Timeline Week or TimelineDay??

Thanks

[Ruksar Moosa Sait]

Hi Cesar,

Kindly refer to the below sample to customize the header rows for different views.

https://stackblitz.com/edit/angular-lgyajl-rkzmi2?file=app.component.ts

Regards,

Ruksar Moosa Sait

[Cesar Smerling]

Hi thanks, I tried your example and works, until you add a TimelineMonth to the views.

If you switch between TimelineMonth and TimelineDay the format get stuck in the month

Here is the modified example:

https://stackblitz.com/edit/angular-lgyajl-a5ueq1?file=app.component.html

[Ruksar Moosa Sait]

Hi Cesar,

Currently, we are validating your requirement and will get back to you by tomorrow (Mar 14).

Regards,

Ruksar Moosa Sait

[Cesar Smerling]

Hello, I have another problem with the scrollTo functionalitty it's seems that only work if a headerRow is set to hour.

I have a TimelineDay with a HeaderRow of Date and another of Hour and in that case works fine. But in a TimelineMonth with a HeaderRow of Year and another of Month, and in a timelineDay with a HeaderRow of Week and another of Day doesnt' work, it does nothing. Also I have another TimelineMonth with a headerRow of Month and Week and the scrolls moves but to another date that is not the selected.

My requirement is to have a search input when I can write the event name and select that and the schedule scroll to that event. Is there another way to achieve this?

Also, I have a requirement that in the TimelineYear, TimelineMonth, TimelineWeek that the steps that make the event when the user moves it (drag, or extend the start or end) is in an hour step, but I cannot include a Hour HeaderRow in this timelines, there is a way to acheieve this?

Tha

[Cesar Smerling]

Hello, we have more questions of how can be configure the schedule

-We have a TimelineDay with a HeaderRow of Week and Header Row of day, there is a way to set the scale of the drag and drop and resize of the event not to be by day instead be by hour? Or is there a way that the event don't attach to the day scale and move freely?

-There is a way to get a specific date for an x in the schedule (for a click event for example)?

-Another question if there is a way to draw a line in the schedule on a specefic date like does the showTimeIndicator?, we want to set the date of that time indicator.

Thanks

[Ruksar Moosa Sait]

Hi Cesar,

1.If you switch between TimelineMonth and TimelineDay the format get stuck in the month

We have checked the reported problem and let you know that we could reproduce it at our end. So, we have logged the below bug report. The fix will be included in our weekly patch release, which is expected to roll out on the first week of April, 2022, and would appreciate your valuable patience until then. You can track the status by using the below link.

Feedback: https://www.syncfusion.com/feedback/33511/header-rows-do-not-render-for-timeline-views

2.I have a Timeline Day with a HeaderRow of Date and another of Hour and in that case works fine. But in a TimeLine Month with a HeaderRow of Year and another of Month, and in a timelineDay with a HeaderRow of Week and another of Day doesn’t' work, it does nothing. Also, I have another Timeline Month with a HeaderRow of Month and Week and the scrolls moves but to another date that is not the selected.
My requirement is to have a search input when I can write the event name and select that and the schedule scroll to that event. Is there another way to achieve this?

By default, the scrollto method accepts only the Date and Hour parameter. If the last level of the header rows contains only Date or Date and Hour, then hour parameter can be passed as 00:00 in string format.

3. I have a requirement that in the TimelineYear, TimelineMonth, TimelineWeek that the steps that make the event when the user moves it (drag, or extend the start or end) is in an hour step, but I cannot include a Hour HeaderRow in this timelines, there is a way to achieve this? We have a TimeLine Day with a HeaderRow of Week and Header Row of day, there is a way to set the scale of the drag and drop and resize of the event not to be by day instead be by hour? Or is there a way that the event don't attach to the day scale and move freely?

You can set the drag and resize interval by using the OnDragStart and OnResizeStart methods like the below code snippet.

onDragStart(args: DragEventArgs): void {

    args.interval = 1; // drag interval time is changed to 

  }

  onResizeStart(event: ResizeEventArgs): void {

    event.interval = 1; //resize interval time is changed to 1 hour

}

https://stackblitz.com/edit/angular-lgyajl-edvgnf?file=app.component.ts

4.There is a way to get a specific date for an x in the schedule (for a click event for example)? You can get specific date of a cell or an event by using the cellclick or
eventclick methods.

5.If there is a way to draw a line in the schedule on a specific date like does the showTimeIndicator?, we want to set the date of that time indicator. No, it’s not possible to draw a line in the scheduler.

Note: For more queries, kindly create new tickets for easy follow-ups.

Regards,

Ruksar Moosa Sait

[Cesar Smerling]

Hello, I'm trying the approach that you mention but still doesn't meet our requirements:

1-Will be good to be solved soon. Swtich between timelines is basic for our component

2-ScrollTo won't work on timelineyear and timeline month so doesn't feet our needs to scroll in any timeline.

3-The interval seems to work on from the user experience, it can drag or resize more precesily, but when you drop or resize end the date set is at the end of the day, we want for example in a day header row to set the interval to 24 (one for each hour) and when you drop or resize end the date hour is set to the corresponding hour.

4. We hace the same problem, when I click I get the day but not the hour for that click because there is non interval for hours in a day header for example. We want that the schedule be divived in hour as the minimum and all the timelines work with the hour as the interval

5. Would be great to set the date of the showTimeIndicator to a specific date.

[Vengatesh Maniraj]

Hi Cesar,

Thanks for the update.

1 - We will let you know once the patch will be released.

2 – As we said earlier, the scrollTo method will be worked when the scheduler will be rendered based on the hour or date. And we would like to let you know, the scrollTo support is not available in the TimelineYear view but it will be worked in TImelineMonth view.

If the scheduler is rendered based on the hour, you have to pass the time argument to scroll to the timeline. Please refer to the below sample.

https://stackblitz.com/edit/angular-lgyajl-uyfkbw?file=app.component.html

If the schedule is rendered based on the date, you have to pass the date parameter too along with the hour in the scrollTo method like below. Please refer to the below sample.

  public
onChange(args: ChangeEventArgs): void {

    this.scheduleObj.scrollTo(

      '00:00',

      new
Date(args.value.setHours(0, 0, 0, 0))

    );

  }

Sample: https://stackblitz.com/edit/angular-lgyajl-uyfkbw?file=app.component.ts

3 – Since you have mentioned like wants smooth dragging and resizing action in your last update, we are not clear about this requirement.
Could you please share more details regarding this requirement by creating a new forum?

4 – We can get the date and hour from the cellClick or eventClick events. For example, please refer to the below sample. There we get the respective dates from its arguments like below.

Sample: https://stackblitz.com/edit/angular-lgyajl-pln3oz?file=app.component.ts

Kindly check the above sample and if you still face the problem, kindly create a new discussion forum with more details. We will be happy to assist you.

5 – We regret to let you know that the setting of a specific date for the showCurrentTImeIndicator is not possible in the Scheduler.

Regards,

Vengatesh

[Cesar Smerling]

Hello

-1 For this I have a problem that the slotCount is not set

-2: again its not working, even in your example. The example that you gave me have dates from Feb to Apr, when I set 15 of March in the combo box the scrollTo navigates to the end, not the the specific date mentioned.

-3 I won't even bother, it's not acheivable what we want in your component

-4 Yes I know that you get the date, but that date is from the column, you get the start and end of that column, but if I click in, let's say the middle I want the date of that middle, if the interval is 10 minutes like your example I want that click in the middle that show's me the date with five minutes. Our needs are in an interval of an hours (not minutes), we need this for day columns that we can split it in the 24 hours. Something similar for the requeriment 3.

-5 Again, would be great that is implemented (open a ticket) or help to find a work around, we need it for our system.

[Vengatesh Maniraj]

Hi Cesar,

Thanks for the update.

We have created a new ticket under your account to follow up with this query. We suggest you follow up with the ticket for further updates. Please log in using the below link.

https://support.syncfusion.com/support

Regards,

Vengatesh