chore(doc): Add guide "Create a Calendar Widget" (#2687)

* docs(guide): add Calendar Widget Guide
* docs(header): add the Calendar Widget Guide to the header
* docs(examples): add Calendar Widget demo
* chore(guide): update guide
* chore(guide): update terminal screenshot
* chore(demo): fix dates in Safari
* chore(demo): add link to source code and zip
* chore: add link to dataset
* chore(docs): remove `name` attribute

docgen/src/data/communityHeader.json

@@ -76,6 +76,10 @@
         "name": "Create new widgets",
         "url": "guides/custom-widget.html"
       },
+      {
+        "name": "Create a calendar widget",
+        "url": "guides/calendar-widget.html"
+      },
       {
         "name": "Migrate from V1",
         "url": "guides/migration.html"

docgen/src/examples/calendar-widget/app.js

@@ -0,0 +1,66 @@
+const ONE_DAY_IN_MS = 3600 * 24 * 1000;
+
+const search = instantsearch({
+  appId: 'latency',
+  apiKey: '059c79ddd276568e990286944276464a',
+  indexName: 'concert_events_instantsearchjs',
+});
+
+search.addWidget(
+  instantsearch.widgets.searchBox({
+    container: '#search-box',
+    placeholder: 'Search events',
+  })
+);
+
+search.addWidget(
+  instantsearch.widgets.hits({
+    container: '#hits',
+    templates: {
+      item: hit => `
+        <li class="hit">
+          <h3>
+            ${hit._highlightResult.name.value}
+            <small>in ${hit._highlightResult.location.value}</small>
+          </h3>
+          <small>on <strong>${moment(hit.date).format(
+            'dddd MMMM Do YYYY'
+          )}</strong></small>
+        </li>
+      `,
+    },
+  })
+);
+
+const makeRangeWidget = instantsearch.connectors.connectRange(
+  (options, isFirstRendering) => {
+    if (!isFirstRendering) return;
+
+    const { refine } = options;
+
+    new Calendar({
+      element: $('#calendar'),
+      same_day_range: true,
+      callback: function() {
+        const start = new Date(this.start_date).getTime();
+        const end = new Date(this.end_date).getTime();
+        const actualEnd = start === end ? end + ONE_DAY_IN_MS - 1 : end;
+
+        refine([start, actualEnd]);
+      },
+      // Some good parameters based on our dataset:
+      start_date: new Date(),
+      end_date: new Date('01/01/2020'),
+      earliest_date: new Date('01/01/2008'),
+      latest_date: new Date('01/01/2020'),
+    });
+  }
+);
+
+const dateRangeWidget = makeRangeWidget({
+  attributeName: 'date',
+});
+
+search.addWidget(dateRangeWidget);
+
+search.start();