Setting datePattern with a time zone

Options

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<button onclick="setTimezone()">Set time zone GMT+1</button>
<button onclick="removeTimezone()">Remove time zone GMT+1</button>

<div id="pivot-container"></div>

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    options: {
      datePattern: "yyyy-MM-dd",
      grid: {
        type: "flat"
      }
    },
    dataSource: {
      data: getData()
    }
  }
});

function setTimezone() {
  let options = pivot.getOptions();
  options.datePattern = "GMT+1:yyyy-MM-dd";
  pivot.setOptions(options);
  pivot.refresh();
}

function removeTimezone() {
  let options = pivot.getOptions();
  options.datePattern = "yyyy-MM-dd";
  pivot.setOptions(options);
  pivot.refresh();
}

function getData() {
  return [{
      "Date": {
        "type": "date string"
      },
      "Event": {
        "type": "string"
      },
      "Price": {
      	"type": "number"
      }
    },
    {
      "Date": "2021-03-04T22:52:00",
      "Event": "Concert",
      "Price": 56
    },
    {
      "Date": "2020-01-11T23:55:00",
      "Event": "Performance",
      "Price": 34
    },
    {
      "Date": "2021-03-08T22:45:00",
      "Event": "Cinema",
      "Price": 10
    }
  ]
}