SettingUp modified by Zallist

Zallist — Sat, 18 May 2013 12:20:57 -0000

--- v1
+++ v2
@@ -8,59 +8,66 @@
 # Creating the scheduler
 `TimeScheduler.Options` is where all customizations should go. These should be set before initializing the scheduler.

-**`TimeScheduler.Options.Element`**
+* **`TimeScheduler.Options.Element`**
 ** REQUIRED ** The jQuery element to set the scheduler up on.

-**`TimeScheduler.Options.GetSections`**
+* **`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](#showing-data) section.

-**`TimeScheduler.Options.GetSchedule`**
+* **`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](#showing-data) section.

-**`TimeScheduler.Options.Start`**
+* **`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`**
+* **`TimeScheduler.Options.HeaderFormat`**
 The [momentjs format](http://momentjs.com/docs/#/displaying/format/) to use for the date range displayed as a header.

-**`TimeScheduler.Options.LowerFormat`**
+* **`TimeScheduler.Options.LowerFormat`**
 The [momentjs format](http://momentjs.com/docs/#/displaying/format/) to use for more concise areas, such as in tooltips of events.

-**`MinRowHeight`**
+* **`MinRowHeight`**
 The minimum height, in pixels, that a section should be.

-**`TimeScheduler.Options.Periods`**
+* **`TimeScheduler.Options.Periods`**
 An array denoting what the periods to display are, explained in greater detail at the [Setting up periods](#setting-up-periods) section.

-**`TimeScheduler.Options.SelectedPeriod`**
+* **`TimeScheduler.Options.SelectedPeriod`**
 The name of the period to select by default.

-**`TimeScheduler.Options.ShowCurrentTime`**
+* **`TimeScheduler.Options.ShowCurrentTime`**
 Whether the current time should be marked on the scheduler

-**`TimeScheduler.Options.ShowGoto`**
+* **`TimeScheduler.Options.ShowGoto`**
 Whether the "Go to" button should be displayed.

-**`TimeScheduler.Options.ShowToday`**
+* **`TimeScheduler.Options.ShowToday`**
 Whether the "Today" button should be displayed.

-**`TimeScheduler.Options.Text`**
+* **`TimeScheduler.Options.Text`**
 An object containing the text used in the scheduler, to be easily customized.

-**`TimeScheduler.Options.Events`**
+* **`TimeScheduler.Options.Events`**
 The events that can be hooked into. Explained in greater detail in the [Hooking into events](#hooking-into-events) section.

-**`TimeScheduler.Options.AllowDragging`**
+* **`TimeScheduler.Options.AllowDragging`**
 Whether or not dragging should be allowed.

-**`TimeScheduler.Options.AllowResizing`**
+* **`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
+[[img src=Periods.png alt=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](http://momentjs.com/docs/#/displaying/format/) 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

SettingUp modified by Zallist

Zallist — Sat, 18 May 2013 12:01:46 -0000

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

Showing data

Hooking into events

Updating a scheduler with new items

Recent changes to SettingUp

SettingUp modified by Zallist

SettingUp modified by Zallist

Pre-requisites

Creating the scheduler

Setting up periods

Showing data

Hooking into events

Updating a scheduler with new items