SettingUp

• Pre-requisites
• Creating the scheduler
• Setting up periods
• Showing data
• Hooking into events
• Updating a scheduler with new items

Pre-requisites

First up, make sure you have jQuery, jQueryUI and MomentJS included in your project and referenced on the page you wish to show a calendar.
If using the example files to start with, all of the required files should already exist.
Make sure that timelineScheduler.js and timelineScheduler.css are both referenced on the page as well, and if you want basic styling then timelineScheduler.styling.css should be included too.

Creating the scheduler

TimeScheduler.Options is where all customizations should go. These should be set before initializing the scheduler.

• TimeScheduler.Options.Element
  ** REQUIRED ** The jQuery element to set the scheduler up on.

• TimeScheduler.Options.GetSections
  ** REQUIRED ** The JavaScript function to call to fill up the sections of the scheduler. This is explained in greater detail at the Showing data section.

• TimeScheduler.Options.GetSchedule
  ** REQUIRED ** The JavaScript function to call to fill up the items of the scheduler. This is explained in greater detail at the Showing data section.

• TimeScheduler.Options.Start
  The start time of the scheduler as a moment object. It's recommended to use .startOf('day') on the moment for a clear starting point.

• TimeScheduler.Options.HeaderFormat
  The momentjs format to use for the date range displayed as a header.

• TimeScheduler.Options.LowerFormat
  The momentjs format to use for more concise areas, such as in tooltips of events.

• MinRowHeight
  The minimum height, in pixels, that a section should be.

• TimeScheduler.Options.Periods
  An array denoting what the periods to display are, explained in greater detail at the Setting up periods section.

• TimeScheduler.Options.SelectedPeriod
  The name of the period to select by default.

• TimeScheduler.Options.ShowCurrentTime
  Whether the current time should be marked on the scheduler

• TimeScheduler.Options.ShowGoto
  Whether the "Go to" button should be displayed.

• TimeScheduler.Options.ShowToday
  Whether the "Today" button should be displayed.

• TimeScheduler.Options.Text
  An object containing the text used in the scheduler, to be easily customized.

• TimeScheduler.Options.Events
  The events that can be hooked into. Explained in greater detail in the Hooking into events section.

• TimeScheduler.Options.AllowDragging
  Whether or not dragging should be allowed.

• TimeScheduler.Options.AllowResizing
  Whether or not resizing should be allowed. The Start and End markers will still be shown.

TimeScheduler.Options.DisableOnMove
Whether to disable the item after it's been moved. This should be used if you want to force formatting, and disable any chances of the user interacting with the item again before you can store the data.

Setting up periods

The TimeScheduler.Options.Periods array accepts a list of objects with properties which create periods that can be used to traverse the calendar.

• PeriodObj.Name - The name is used to select the period and should be unique. TimeScheduler.Options.SelectedPeriod relies on the Name.
• PeriodObj.Label - The label to display on the button.
• PeriodObj.TimeframePeriod - The number of minutes between each "Timeframe" of the period.
• PeriodObj.TimeframeOverall - The total number of minutes that the period shows.
• PeriodObj.TimeframeHeaders - An array of momentjs formats which is used to display the header rows at the top of the scheduler. Rather than repeating formats, the scheduler will merge all cells which are followed by a cell which shows the same date. For example, instead of seeing "Tuesday, Tuesday, Tuesday" with "3pm, 6pm, 9pm" below it, you'll instead see "Tuesday" a single time.

Showing data

Hooking into events

Updating a scheduler with new items