How to initially set week display to just one week in a month?

[Flemmingc]

Hi,

When I load the Timeline on page load the ruler is set up for Year, month and week, like displayed in the figure below:

In this view all the weeks are displayed with each week number. This is ok, but the whole figure becomes very wide, so I would like to make it less wide (i.e. no scrollbar).

When I double click on the year to display the current year, the view changes to display just one week ( the first week in the month) and therefore the scaling and the canvas size changes into a much better overview:

How do i specify the same view settings on page load?

Or what is the best practice for displaying the timeline with no scrollbars?

The Timeline is initialized with these settings: $('#myTimeline').Timeline({ type: "Mixed", wrapScale: true, // wraps new scale in the timeline container when zooming width: "auto", rowHeight: 42, // default: 48 locale: "da-DK", firstDayOfWeek: 1, // 0: Sunday, 1: Monday, ... 6: Saturday zoom: true, startDatetime: '2020-02-03 00:00', endDatetime: '2020-10-05 00:00', setColorEvent: Timeline_getColor, scale: "week", rows: 5, headline: { display: true, title: "Tidslinie for samtaler under forsøg", height: 26, fontSize: 12, color: "#333", background: "transparent", range: true, locale: "da-DK", format: { custom: "%d-%m-%Y" }, }, sidebar: { sticky: true, overlay: true, fontSize: 14, list: [ ' Deltagelse i forsøgsordning ' , ' Samtale indkaldelser - CV ' , ' Samtale indkaldelser - Jobsamtale ' , ' Samtale afholdelser - Jobsamtale ' , ' ', ' ' ] }, ruler: { truncateLowers: false, top: { lines: ["year", "month", "week"], height: 26, fontSize: 12, color: "#333", background: "transparent", locale: "da-DK", format: { month: "long", day: "numeric", timeZone: "UTC", weekday: "short",
year: "short" } } }, effects: { presentTime: true, hoverEvent: true, stripedGridRow: true, horizontalGridStyle: 'dotted', // Allowed values are “solid”, “dotted” and “none”. verticalGridStyle: 'solid' }

    }).Timeline("initialized",
        function(self, data) {
            $('#detailscontentdata').hide();
            $('#detailscontentdataParent').hide(); 
             console.log(["user's callback", self, data]);
        });

    $("#myTimeline").on('afterRender.timeline', function(){
        // usage bootstrap's popover
        $('.jqtl-event-node').each(function(){
            $(this).attr( 'title', $(this).text() );
            $(this).popover({
                trigger: 'hover'
            });
        });
    });

[ka215]

Hi there,

You should change the reference scale of the horizontal axis of the timeline to month instead of week (scale: "month") and fine-tune the width of each column with minGridSize. (cf. minGridSize: 100)

Please try it.

[Flemmingc]

Hi there,

Thank you for your input. I have tested it and will play around with minGridSize.

Thanx

Fra: ka2 notifications@github.com Sendt: 6. oktober 2020 14:11 Til: ka215/jquery.timeline jquery.timeline@noreply.github.com Cc: Flemming Carlsen fc@edb-integration.dk; Author author@noreply.github.com Emne: Re: [ka215/jquery.timeline] How to initially set week display to just one week in a month? (#68)

Hi there,

You should change the reference scale of the horizontal axis of the timeline to month instead of week (scale: "month") and fine-tune the width of each column with minGridSize. (cf. minGridSize: 100)

Please try it.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/ka215/jquery.timeline/issues/68#issuecomment-704225608, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ANOFY3SX4JJJ2DTL4ZYLWQ3SJMCMFANCNFSM4SAM75DQ.