@operato/event-view 1.2.21 → 1.2.22

package/stories/index.stories.ts

@@ -1,6 +1,64 @@
 import '../src/ox-event-view.js'
-
 import { html, TemplateResult } from 'lit'
+import { BizEvent, CALENDAR, EventProvider } from '../src/types.js'
+
+class SampleEventProvider implements EventProvider {
+  fetchEventsForCalendar(calendar: CALENDAR) {
+    const map = new Map<Date, BizEvent[]>()
+
+    calendar.forEach(({ date }) =>
+      map.set(date, [
+        {
+          due: '2021-08-21',
+          title: 'HAHAHA',
+          color: 'yellow'
+        },
+        {
+          due: '2021-08-21',
+          title: 'HOHOHO',
+          color: 'lime'
+        },
+        {
+          due: '2021-08-21',
+          title: 'HIHIHI',
+          color: 'yellow'
+        },
+        {
+          due: '2021-08-21',
+          title: 'HEHEHE',
+          color: 'white'
+        },
+        {
+          due: '2021-08-21',
+          title: 'KEKEKE',
+          color: 'yellow'
+        },
+        {
+          due: '2021-08-21',
+          title: 'MEMEME',
+          color: 'orange'
+        },
+        {
+          due: '2021-08-21',
+          title: 'MOMOMO',
+          color: 'lime'
+        },
+        {
+          due: '2021-08-21',
+          title: 'QUOQUO',
+          color: 'navy'
+        },
+        {
+          due: '2021-08-21',
+          title: 'ZZXXCC',
+          color: 'gray'
+        }
+      ])
+    )
+
+    return map
+  }
+}
 
 export default {
   title: 'EventView',
@@ -26,7 +84,7 @@ const Template: Story<ArgTypes> = ({ mode = 'monthly' }: ArgTypes) =>
     <link rel="stylesheet" href="/themes/calendar-theme.css" />
     <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
 
-    <ox-event-view mode=${mode}> </ox-event-view>
+    <ox-event-view mode=${mode} .eventProvider=${new SampleEventProvider()}> </ox-event-view>
   `
 
 export const Regular = Template.bind({})

package/themes/calendar-theme.css

@@ -36,7 +36,7 @@ body {
   --calendar-weekly-opacity: 0.5;
   --calendar-weekly-date-label-background-color: var(--status-danger-color);
   --calendar-weekly-date-label-margin: var(--margin-narrow);
-  --calendar-weekly-date-label-padding: 5px var(--padding-narrow);
+  --calendar-weekly-date-label-padding: 3px var(--padding-narrow);
   --calendar-weekly-date-label-color: var(--theme-white-color);
 
   --calendar-weekly-background-color: #f4f4f4;
@@ -45,7 +45,6 @@ body {
   --calendar-weekly-event-padding: 2px var(--padding-default);
   --calendar-weekly-event-border: 3px solid #ccc;
   --calendar-weekly-event-border-width: 0 0 0 3px;
-
 }
 
 @media only screen and (max-width: 460px) {

package/src/biz-event.ts

@@ -1,6 +0,0 @@
-export type BizEvent = {
-  due?: string
-  title: string
-  color: string
-  clickEvent?: any
-}

package/src/event-provider.ts

@@ -1,6 +0,0 @@
-import { BizEvent } from './biz-event'
-
-export interface EventProvider {
-  fetchEventsForDate(date: Date, optins: any): BizEvent[]
-  fetchEventsForDuration(from: Date, to: Date, optins: any): BizEvent[]
-}

package/src/sample-event-provider.ts

@@ -1,116 +0,0 @@
-import { EventProvider } from './event-provider'
-
-export class SampleMonthlyEventProvider implements EventProvider {
-  fetchEventsForDate(date: Date, options: any) {
-    return [
-      {
-        due: '2021-08-21',
-        title: 'HAHAHA',
-        color: 'yellow'
-      },
-      {
-        due: '2021-08-21',
-        title: 'HOHOHO',
-        color: 'lime'
-      },
-      {
-        due: '2021-08-21',
-        title: 'HIHIHI',
-        color: 'yellow'
-      },
-      {
-        due: '2021-08-21',
-        title: 'HEHEHE',
-        color: 'white'
-      },
-      {
-        due: '2021-08-21',
-        title: 'KEKEKE',
-        color: 'yellow'
-      },
-      {
-        due: '2021-08-21',
-        title: 'MEMEME',
-        color: 'orange'
-      },
-      {
-        due: '2021-08-21',
-        title: 'MOMOMO',
-        color: 'lime'
-      },
-      {
-        due: '2021-08-21',
-        title: 'QUOQUO',
-        color: 'navy'
-      },
-      {
-        due: '2021-08-21',
-        title: 'ZZXXCC',
-        color: 'gray'
-      }
-    ]
-  }
-
-  fetchEventsForDuration(from: Date, to: Date, options: any) {
-    return []
-  }
-}
-
-export class SampleWeeklyEventProvider implements EventProvider {
-  fetchEventsForDate(date: Date, options: any) {
-    return [
-      {
-        due: '2021-08-21',
-        title: 'HAHAHA',
-        color: 'yellow',
-        clickEvent: function (title: string, due: string) {
-          console.log('clicked...', title, due)
-        }
-      },
-      {
-        due: '2021-08-21',
-        title: 'HOHOHO',
-        color: 'lime'
-      },
-      {
-        due: '2021-08-21',
-        title: 'HIHIHI',
-        color: 'yellow'
-      },
-      {
-        due: '2021-08-21',
-        title: 'HEHEHE',
-        color: 'white'
-      },
-      {
-        due: '2021-08-21',
-        title: 'KEKEKE',
-        color: 'yellow'
-      },
-      {
-        due: '2021-08-21',
-        title: 'MEMEME',
-        color: 'orange'
-      },
-      {
-        due: '2021-08-21',
-        title: 'MOMOMO',
-        color: 'lime'
-      },
-      {
-        due: '2021-08-21',
-        title: 'QUOQUO',
-        color: 'navy'
-      },
-      {
-        due: '2021-08-21',
-        title: 'ZZXXCC',
-        color: 'gray'
-      }
-    ]
-  }
-
-  fetchEventsForDuration(from: Date, to: Date, options: any) {
-    return []
-  }
-}