diff --git a/packages/calendar/test/demos.screenshots-test.js b/packages/calendar/test/demos.screenshots-test.js
new file mode 100644
index 000000000..59b6cf8aa
--- /dev/null
+++ b/packages/calendar/test/demos.screenshots-test.js
@@ -0,0 +1,85 @@
+/* globals capture getStoryPage */
+
+const selector = 'lion-calendar';
+
+describe('others-calendar', () => {
+  it('main', async () => {
+    const id = 'others-calendar--main';
+    const page = await getStoryPage(id);
+    await capture({ selector, id, page });
+  });
+  it('selected-date', async () => {
+    const id = 'others-calendar--selected-date';
+    const page = await getStoryPage(id);
+    await capture({ selector, id, page });
+  });
+  it('central-date', async () => {
+    const id = 'others-calendar--central-date';
+    const page = await getStoryPage(id, {
+      command: 'Emulation.setVirtualTimePolicy',
+      parameters: {
+        policy: 'advance',
+        initialVirtualTime: new Date('2000/12/15').getTime() / 1000,
+      },
+    });
+    await capture({ selector, id, page });
+  });
+  it('controlling-focus', async () => {
+    const id = 'others-calendar--controlling-focus';
+    const page = await getStoryPage(id, {
+      command: 'Emulation.setVirtualTimePolicy',
+      parameters: {
+        policy: 'advance',
+        initialVirtualTime: new Date('2000/12/15').getTime() / 1000,
+      },
+    });
+    await page.evaluate(() => {
+      document.querySelector('button').click();
+    });
+    await capture({ selector, id, page });
+  });
+  it('providing-lower-limit', async () => {
+    const id = 'others-calendar--providing-lower-limit';
+    const page = await getStoryPage(id, {
+      command: 'Emulation.setVirtualTimePolicy',
+      parameters: {
+        policy: 'advance',
+        initialVirtualTime: new Date('2000/12/15').getTime() / 1000,
+      },
+    });
+    await capture({ selector, id, page });
+  });
+  it('providing-higher-limit', async () => {
+    const id = 'others-calendar--providing-higher-limit';
+    const page = await getStoryPage(id, {
+      command: 'Emulation.setVirtualTimePolicy',
+      parameters: {
+        policy: 'advance',
+        initialVirtualTime: new Date('2000/12/15').getTime() / 1000,
+      },
+    });
+    await capture({ selector, id, page });
+  });
+  it('disabled-dates', async () => {
+    const id = 'others-calendar--disabled-dates';
+    const page = await getStoryPage(id, {
+      command: 'Emulation.setVirtualTimePolicy',
+      parameters: {
+        policy: 'advance',
+        initialVirtualTime: new Date('2000/12/15').getTime() / 1000,
+      },
+    });
+    await capture({ selector, id, page });
+  });
+  it('combined-disabled-datess', async () => {
+    const id = 'others-calendar--combined-disabled-dates';
+    const page = await getStoryPage(id, {
+      command: 'Emulation.setVirtualTimePolicy',
+      parameters: {
+        policy: 'advance',
+        initialVirtualTime: new Date('2000/12/15').getTime() / 1000,
+      },
+    });
+    await capture({ selector, id, page });
+  });
+});
diff --git a/screenshots/others/calendar/central-date.png b/screenshots/others/calendar/central-date.png
new file mode 100644
index 000000000..70f783f23
Binary files /dev/null and b/screenshots/others/calendar/central-date.png differ
diff --git a/screenshots/others/calendar/combined-disabled-dates.png b/screenshots/others/calendar/combined-disabled-dates.png
new file mode 100644
index 000000000..bdf762a9f
Binary files /dev/null and b/screenshots/others/calendar/combined-disabled-dates.png differ
diff --git a/screenshots/others/calendar/controlling-focus.png b/screenshots/others/calendar/controlling-focus.png
new file mode 100644
index 000000000..da4f1236e
Binary files /dev/null and b/screenshots/others/calendar/controlling-focus.png differ
diff --git a/screenshots/others/calendar/disabled-dates.png b/screenshots/others/calendar/disabled-dates.png
new file mode 100644
index 000000000..69b0b3936
Binary files /dev/null and b/screenshots/others/calendar/disabled-dates.png differ
diff --git a/screenshots/others/calendar/main.png b/screenshots/others/calendar/main.png
new file mode 100644
index 000000000..51a091c6d
Binary files /dev/null and b/screenshots/others/calendar/main.png differ
diff --git a/screenshots/others/calendar/providing-higher-limit.png b/screenshots/others/calendar/providing-higher-limit.png
new file mode 100644
index 000000000..9f7fbb9b9
Binary files /dev/null and b/screenshots/others/calendar/providing-higher-limit.png differ
diff --git a/screenshots/others/calendar/providing-lower-limit.png b/screenshots/others/calendar/providing-lower-limit.png
new file mode 100644
index 000000000..f432c6928
Binary files /dev/null and b/screenshots/others/calendar/providing-lower-limit.png differ
diff --git a/screenshots/others/calendar/selected-date.png b/screenshots/others/calendar/selected-date.png
new file mode 100644
index 000000000..f372c8e3c
Binary files /dev/null and b/screenshots/others/calendar/selected-date.png differ
diff --git a/scripts/screenshots/index.js b/scripts/screenshots/index.js
index ca1cb3bc4..53be2b905 100644
--- a/scripts/screenshots/index.js
+++ b/scripts/screenshots/index.js
@@ -81,13 +81,18 @@ process.on('beforeExit', () => {
   serverPromise.then(server => server.close());
 });
 
-async function getPage(path) {
+async function getPage(path, cdp) {
   const browser = await browserPromise;
   const server = await serverPromise;
   const url = `http://127.0.0.1:${server.server.address().port}${path}`;
   log(`Creating a page for ${url}`);
   const page = await browser.newPage();
 
+  if (cdp) {
+    const client = await page.context().newCDPSession(page);
+    await client.send(cdp.command, cdp.parameters);
+  }
+
   // eslint-disable-next-line no-unused-vars
   page.on('console', msg => {
     if (msg._type !== 'debug') {
@@ -107,8 +112,8 @@ async function getPage(path) {
   return page;
 }
 
-async function getStoryPage(id) {
-  return getPage(`/iframe.html?id=${id}&viewMode=story`);
+async function getStoryPage(id, cdp) {
+  return getPage(`/iframe.html?id=${id}&viewMode=story`, cdp);
 }
 
 async function getClip({ page, selector, endClipSelector }) {