html,

    body,

    #container {

      width: 100%;

      height: 100%;

      margin: 0;

      padding: 0;

    }

// prevent premature chart script execution

anychart.onDocumentReady(function () {

  // load data into the chart from a JSON file

  anychart.data.loadJsonFile(

    "https://raw.githubusercontent.com/Bepely/JsonExampleData/main/calendar2023.json",

    // callback function to set chart data

    (data) => chart.data(data)

  );

​

  // create a calendar chart

  const chart = anychart.calendar();

​

  // set the container id

  chart.container("container");

​

  // adjust the chart's height after drawing

  chart.listen("chartDraw", function () {

    document.getElementById("container").style.height =

      chart.getActualHeight() + 5 + "px";

  });

​

  // draw the chart

  chart.draw();

});