html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

  var data = getData();

​

  var chart = anychart.ganttResource();

  chart.data(data, 'as-table');

​

  chart.title('Weekends and holidays are visible because zoomed to days.');

​

  // Getting the scale.

  var scale = chart.xScale();

  scale.minimum(Date.UTC(2020, 1, 28));

  scale.maximum(Date.UTC(2020, 2, 5));

​

  // Getting the calendar.

  var calendar = scale.calendar();

​

  // Setting the working schedule. Sun and Sat are weekends.

  calendar.schedule([

    /* Sun */ null,

    /* Mon */ { from: 10, to: 18 },

    /* Tue */ { from: 10, to: 18 },

    /* Wed */ { from: 10, to: 18 },

    /* Thu */ { from: 10, to: 18 },

    /* Fri */ { from: 10, to: 18 },

    /* Sat */ null

  ]);

​

  // Setting custom holiday.

  calendar.holidays([

    { month: 2, day: 3, year: 2020}

  ]);

​

  // Coloring holiday and weekend days.

  var timeline = chart.getTimeline();

  timeline.weekendsFill('pink 0.5');

  timeline.holidaysFill('orange 0.3');

​

  var legend = chart.legend();

  legend.enabled(true);

  legend.items([

    {index: 0, text: 'Weekends', iconFill: 'pink 0.5'},

    {index: 1, text: 'Holidays', iconFill: 'orange 0.3'}

  ]);

​

​

  chart.container('container');

  chart.draw();

  chart.fitAll();

});

​

function getData() {

  return [

    {id: 1, name: 'Mike Johnson', periods:[

      {id: 4, start: Date.UTC(2020, 2, 1, 10), end: Date.UTC(2020, 2, 1, 15)},

      {id: 5, start: Date.UTC(2020, 2, 1, 16), end: Date.UTC(2020, 2, 1, 18)}

    ]},

    {id: 2, name: 'Olivia Taylor', periods: [

      {id: 6, start: Date.UTC(2020, 2, 2, 9), end: Date.UTC(2020, 2, 2, 14)},

      {id: 7, start: Date.UTC(2020, 2, 2, 16), end: Date.UTC(2020, 2, 2, 19)}

    ]},

    {id: 3, name: 'Daniel Wilson', periods: [

      {id: 8, start: Date.UTC(2020, 2, 3, 10), end: Date.UTC(2020, 2, 3, 12)},

      {id: 9, start: Date.UTC(2020, 2, 3, 12, 30), end: Date.UTC(2020, 2, 3, 15)},

      {id: 10, start: Date.UTC(2020, 2, 3, 16), end: Date.UTC(2020, 2, 3, 19)}

    ]}

  ];

}