make event def nicer and safer

src/api/EventApi.ts

@@ -64,18 +64,36 @@ export default class EventApi {
     })
   }
 
-  get title(): string {
-    return this.def.title
-  }
-
-  get start(): Date {
-    return this.calendar.dateEnv.toDate(this.instance.range.start)
+  get start(): Date | null {
+    return this.instance ?
+      this.calendar.dateEnv.toDate(this.instance.range.start) :
+      null
   }
 
-  get end(): Date {
-    return this.def.hasEnd ?
+  get end(): Date | null {
+    return (this.instance && this.def.hasEnd) ?
       this.calendar.dateEnv.toDate(this.instance.range.end) :
       null
   }
 
+  // computable props that all access the def
+  // TODO: find a TypeScript-compatible way to do this at scale
+  get id(): string { return this.def.publicId }
+  get groupId(): string { return this.def.groupId }
+  get isAllDay(): boolean { return this.def.isAllDay }
+  get title(): string { return this.def.title }
+  get url(): string { return this.def.url }
+  get startEditable(): boolean { return this.def.startEditable }
+  get durationEditable(): boolean { return this.def.durationEditable }
+  get constraint(): any { return this.def.constraint }
+  get overlap(): any { return this.def.overlap }
+  get rendering(): string { return this.def.rendering }
+  get classNames(): string[] { return this.def.classNames }
+  get backgroundColor(): string { return this.def.backgroundColor }
+  get borderColor(): string { return this.def.borderColor }
+  get textColor(): string { return this.def.textColor }
+
+  // NOTE: user can't modify extendedProps because Object.freeze was called in event-def parsing
+  get extendedProps(): any { return this.def.extendedProps }
+
 }

src/basic/DayTile.ts

@@ -1,5 +1,4 @@
 import DateComponent from '../component/DateComponent'
-import EventRenderer from '../component/renderers/EventRenderer'
 import DayGridEventRenderer from './DayGridEventRenderer'
 import { htmlEscape } from '../util/html'
 import { createFormatter } from '../datelib/formatting'

src/component/DateComponent.ts

@@ -553,7 +553,7 @@ export default abstract class DateComponent extends Component {
         this.eventRangesToSegs(eventRanges),
         {
           getClasses(seg) {
-            return [ 'fc-bgevent' ].concat(seg.eventRange.def.className)
+            return [ 'fc-bgevent' ].concat(seg.eventRange.def.classNames)
           }
         }
       )

src/component/event-rendering.ts

@@ -161,7 +161,7 @@ function refineScopedUi(input): EventUi {
     borderColor: input.eventBorderColor || input.eventColor || '',
     textColor: input.eventTextColor || '',
     rendering: input.eventRendering || '',
-    classNames: parseClassName(input.eventClassNames || input.eventClassName)
+    classNames: parseClassName(input.eventClassNames || input.eventClassName) // probs already parsed
   }
 }
 
@@ -175,7 +175,7 @@ function refineUnscopedUi(input): EventUi {
     borderColor: input.borderColor || input.color || '',
     textColor: input.textColor || '',
     rendering: input.rendering || '',
-    classNames: parseClassName(input.classNames || input.className)
+    classNames: parseClassName(input.classNames || input.className) // probs already parsed
   }
 }
 

src/structs/business-hours.ts

@@ -15,7 +15,7 @@ const DEF_DEFAULTS = {
   endTime: '17:00',
   daysOfWeek: [ 1, 2, 3, 4, 5 ], // monday - friday
   rendering: 'inverse-background',
-  className: 'fc-nonbusiness',
+  classNames: 'fc-nonbusiness',
   groupId: '_businessHours' // so multiple defs get grouped
 }
 

src/structs/event.ts

@@ -25,7 +25,8 @@ export interface EventNonDateInput {
   constraint?: any
   overlap?: any
   rendering?: EventRenderingChoice
-  className?: ClassNameInput
+  classNames?: ClassNameInput // accept both
+  className?: ClassNameInput //
   color?: string
   backgroundColor?: string
   borderColor?: string
@@ -58,7 +59,7 @@ export interface EventDef {
   constraint: any
   overlap: any
   rendering: EventRenderingChoice
-  className: string[]
+  classNames: string[]
   backgroundColor: string
   borderColor: string
   textColor: string
@@ -92,6 +93,7 @@ const NON_DATE_PROPS = {
   constraint: null,
   overlap: null,
   rendering: String,
+  classNames: parseClassName,
   className: parseClassName,
   color: String,
   backgroundColor: String,
@@ -162,6 +164,9 @@ export function parseEventDef(raw: EventNonDateInput, sourceId: string, leftover
     def.extendedProps = {}
   }
 
+  // help out EventApi::extendedProps from having user modify props
+  Object.freeze(def.extendedProps)
+
   return def
 }
 
@@ -169,12 +174,8 @@ export function parseEventDef(raw: EventNonDateInput, sourceId: string, leftover
 function pluckDateProps(raw: EventInput, leftovers: any) {
   let props = refineProps(raw, DATE_PROPS, {}, leftovers)
 
-  if (props.date !== null) {
-    if (props.start === null) {
-      props.start = props.date
-    }
-    delete props.date
-  }
+  props.start = (props.start !== null) ? props.start : props.date
+  delete props.date
 
   return props
 }
@@ -183,30 +184,17 @@ function pluckDateProps(raw: EventInput, leftovers: any) {
 function pluckNonDateProps(raw: EventInput, leftovers: any) {
   let props = refineProps(raw, NON_DATE_PROPS, {}, leftovers)
 
-  if (props.id !== null) {
-    props.publicId = String(props.id)
-    delete props.id
-  }
-
-  if (props.editable !== null) {
-    if (props.startEditable === null) {
-      props.startEditable = props.editable
-    }
-    if (props.durationEditable === null) {
-      props.durationEditable = props.editable
-    }
-    delete props.editable
-  }
-
-  if (props.color !== null) {
-    if (!props.backgroundColor) {
-      props.backgroundColor = props.color
-    }
-    if (!props.borderColor) {
-      props.borderColor = props.color
-    }
-    delete props.color
-  }
+  props.publicId = props.id
+  props.classNames = props.classNames.concat(props.className)
+  props.startEditable = (props.startEditable !== null) ? props.startEditable : props.editable
+  props.durationEditable = (props.durationEditable !== null) ? props.durationEditable : props.editable
+  props.backgroundColor = props.backgroundColor || props.color
+  props.borderColor = props.borderColor || props.color
+
+  delete props.id
+  delete props.className
+  delete props.editable
+  delete props.color
 
   return props
 }