Skip to content

2c. Configuration:View

Seongnoh Sean Yi edited this page Feb 11, 2019 · 10 revisions

VIEW

  • View is a specific look and definition to display events. Each view could have several calendars which are defined in calendars section. And each view instance can be reusable in multi-scenes.
  • There are several view modes; upcoming, current, daily, weekly, monthly, week, month.
  • views:[] should have at least one or more view as its items.
views: [
  {
    name: "Upcoming Hotspurs",
    mode: "upcoming",
    position: "top_right",
    calendars: ["Hotspurs calendar"],
  },
  {
    name: "My family affairs",
    mode: "month",
    position: "bottom_bar",
    calendars: ["holidays", "ScheduleOfWife", "KID SCHOOL PLAN"],
  },
],

This example shows 2 views.

  • Upcoming Hotspurs is upcoming view and will be displayed in top_right with "Hotspurs calendar".
  • My family affairs is month view and will be displayed in bottom_bar with 3 calendars. (calendars should be already defined in calendars section(2b. Configuration:Calendar) of configuration)

Your Scene could have those as its views.

Detailed configuration

Each view can be configured with many properties. (Yes, Too many. :D)

Common

These fields could be used in all views. (But some fields might work differently in views)

field value type value example default value memo
name String "My weekly schedule" - NOT REQUIRED BUT RECOMMENDED
You can specify specific view with this name. It will be used in scene.
mode String "month" "daily" "upcoming", "current", "daily", "weekly", "monthly", "week", "month" are available.
className String "myViewClass" "" You can adjust CSS class to this view.
position String "bottom_bar" "top_left" Where to display this view.
calendars Array of calendar names ["My Football calendar", "US Holidays"] [] Which calendar events will be shown in this view. For all calendars, just set to []
title String "SCHEDULE" "" It will be used as module header title.
locale String "de-DE" default locale You can apply specific locale to only this view instead default locale.
fromNow Integer -1 0 When this view calendar will be start.
By example; in view:monthly, -1 will be last month, 0 will be this month, 1 will be next month.

In view of upcoming, current, this value will be ignored.
slotCount Integer 4 3 How many periodic calendar slot will be shown.
By example; in view:monthly, 3 will show 3 monthly view slot.

mode:daily, fromNow:-1, slotCount:3 will be show 3 daily calendar slots from yesterday to tomorrow
Only in daily, weekly, monthly, this field will be valid. In other view modes, this will be ignored.
hideOverflow Boolean false true If events in slot are too many, you can hide some of events by this. Use with slotMaxHeight
slotMaxHeight String "200px" "150px" Set your slot height to display events. It is affected when you set hideOverflow.
slotTitle String "My Upcoming Schedule" - Set slot title with static text. This is prior than slotTitleFormat. If you want to display dynamic slot title by date, leave this to null or empty("").
RECOMMENDED only to view:current and view:upcoming.
slotTitleFormat String Or Object "MM/DD" - Set slot title by date. formatter of .format() of moment.js or object of .calendar() of moment.js
slotSubTitle String "" - subtitle of slot. See slotTitle also.
slotSubTitleFormat String Or Object "" - subtitle format of slot. See slotTitleFormat also.
filterPassedEvent Boolean true false If event is passed, filter it.
maxItems Integer 30 100 How many items will be targeted for this view.
dateFormat Object {...} {...} See Event Time.
timeFormat Object {...} {...} See Event Time.
dateTimeFormat Object {...} {...} See Event Time.
relativeFormat Object {...} {...} See Event Time.
useEventTimeRelative Boolean true false If true, relativeFormat will be used instead time/date/dateTimeFormat. See Event Time
filter Function (e)=>{} (e)=>{...} See Filtering and Sorting
sort Function (a,b)=>{} (a,b)=>{...} See Filtering and Sorting
transform Function (e)=>{} (e)=>{...} See Filtering and Sorting
You can’t perform that action at this time.