Not being able to adjust the calendar dimensions to 100% of its div based on the screen size

[elisaravagnann]

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.
`

<div style="background-color: #27293d; display: flex; align-items: center; justify-content: center; height: 200px !important;"  class="calendar-container">
  <div id="cal-heatmap">
    <div class="weekdays">
      <div class="weekday">Lun</div>
      <div class="weekday">Mar</div>
      <div class="weekday">Mer</div>
      <div class="weekday">Gio</div>
      <div class="weekday">Ven</div>
      <div class="weekday">Sab</div>
      <div class="weekday">Dom</div>
   </div>
  </div>
</div>

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;

    let tooltip = date.toLocaleDateString('it-IT', options) + (absValue !== null ? " " + absValue.toString() + " Ore" : "");
    
    const attendance = this.allAttendances.find(att => {
      const startTimestamp = parse(att.start, 'dd/MM/yyyy HH:mm:ss', new Date()).getTime();
      const startTimestampDate = new Date(startTimestamp);
      startTimestampDate.setHours(0, 0, 0, 0); //Impostazione dell'ora a mezzanotte
      const startTimestampMidnight = Math.floor(startTimestampDate.getTime() / 1000);
      return startTimestampMidnight === timestamp;
    });
    
    if (attendance) {
      if (value > 0) {
        if (attendance.nameAttendanceType.startsWith("Ordinario")) {
          tooltip += " " + attendance.nameService + " " + attendance.nameClient;
        }
      } else if (value < 0) {
        tooltip += " " + attendance.nameAttendanceType;
      }
    }
    
    return tooltip;
  },

`

[m-a-r-1912]

Hey so it looks like you're trying to resize the calendar when the window size changes.
I'm trying to do the same thing and noticed a couple things when looking at your code:

1. You're using the cal.init() method, which isn't part of the newest version of cal-heatmap. The documentation for v4 doesn't have that method and instead uses cal.paint() : https://cal-heatmap.com/docs/migrate_from_v3 . So you'll have to look into migrating your code to v4.
2. The code you provided doesn't show where you're using the addEventListener method nor what the listener function looks like.

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 . )