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 <[email protected]> Sendt: 6. oktober 2020 14:11 Til: ka215/jquery.timeline <[email protected]> Cc: Flemming Carlsen <[email protected]>; Author <[email protected]> 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 GitHub<#68 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ANOFY3SX4JJJ2DTL4ZYLWQ3SJMCMFANCNFSM4SAM75DQ>.