New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Not being able to adjust the calendar dimensions to 100% of its div based on the screen size #385
Comments
Hey so it looks like you're trying to resize the calendar when the window size changes.
Maybe you could first try migrating your code to the latest version. About the event listener, you could create a callback function that updates how big the cells look. (For the calendar configuration I'm using, updating how big the cells look means changing the width and height of the subDomain . ) |
I am creating a cal-heatmap calendar, but I have an issue that when transitioning to larger desktop screens, the calendar becomes very small and doesn't adapt to 100% of the width of its containing div. I've read that I should apply a resize Event Listener, and I've tried in every way, but it doesn't work.
`
cal.init({
itemSelector: "#cal-heatmap",
domain: "month",
cellRadius: 2,
subDomain: "day",
data: this.data, //Inserimento dei dati
start: new Date(currentYear, 0),
range: 12,
cellSize: 11,
itemName: ["day", "days"],
domainGutter: 7,
legend: [-1, 0, 0.3, 0.5, 1],
displayLegend: false,
legendCellSize: 25,
legendColors: {
min: 'red', //Valori Negativi
max: 'green',
},
considerMissingDataAsZero: true,
label: {
position: "top",
},
/subDomainTitleFormat: {
empty: "{date}",
filled: {count}
},/
subDomainTextFormat: (date: Date) => {
const timestamp = Math.floor(date.getTime() / 1000);
const value = this.data[timestamp];
const options = { year: 'numeric', month: 'long', day: 'numeric' } as const;
const absValue = typeof value !== 'undefined' ? Math.abs(value) : null;
`
The text was updated successfully, but these errors were encountered: