fuelux/_includes/js/scheduler.html

<!-- scheduler
================================================== -->
<div class="fu-docs-section">
  <h1 id="scheduler" class="page-header">Scheduler <a href="{{ site.repo }}/blob/{{ site.current_version }}/js/scheduler.js"><small>scheduler.js</small></a></h1>

  <p>Control which allows users to choose <code>startDateTime</code>, <code>timeZone</code>, and iCal-compatible <code>recurrencePattern</code>. As of 3.11.5, when the user changes the start date, the <a href="#scheduler-usage-options-start-date-changed">end date will attempt to intelligently re-set itself if the start date is set to later than the end date</a>.</p>
  <div class="form-horizontal container-fluid scheduler" data-initialize="scheduler" role="form" id="schedulerIllustration">
  {% include js/scheduler-example.html %}
  </div>


  <h2 id="scheduler-usage">Usage</h2>

  <h3 id="scheduler-usage-javascript">Via JavaScript</h3>
  <p>Instantiate the scheduler control via JavaScript:</p>
  {% highlight js %}$('#myScheduler').scheduler();{% endhighlight %}
  <p>The scheduler also accepts optional options params during initialization, one for each start and end date:</p>
  {% highlight js %}$('#myScheduler').scheduler({
    startDateOptions: {
      allowPastDates: true
    },
    endDateOptions: {
      sameYearOnly: true
    }
  });{% endhighlight %}

  <h3 id="scheduler-usage-data-attributes">Via data-attributes</h3>
  <p>Add <code>data-initialize="scheduler"</code> to the <code>.scheduler</code> element that you wish to initialize on <code>$.ready()</code>. Any scheduler that is programmatically generated after the initial page load will initialize when the mousedown event is fired on it if it has <code>data-initialize="scheduler"</code>.</p>

  <h3 id="scheduler-usage-markup">Markup</h3>
  <p>Place all of the following markup within any "fuelux" classed container (typically the html element). Scheduler consists of a specific arrangement of <a href="#datepicker">Datepickers</a>, <a href="#combobox">Comboboxes</a>, <a href="#radio">Radios</a>, <a href="#selectlist">Selectlists</a>, and <a href="#spinbox">Spinboxes</a>.</p>

  <div class="truncate-highlight">
    {% highlight html %}
<div class="form-horizontal container-fluid scheduler" data-initialize="scheduler" role="form" id="myScheduler">
    {% include js/scheduler-example.html %}
</div>
    {% endhighlight %}
  </div>

  <h3 id="scheduler-usage-options">Options</h3>
  <p>Should be passed in as an <code>object</code> (eg. <code>{name: value}</code>) on initialization. If initializing with options, <a href="#scheduler-usage-javascript">Javascript initialization</a> is required (you can't initialize with options through data-attributes).</p>
  <div class="table-responsive">
    <table class="table table-bordered table-striped">
      <thead>
      <tr>
        <th style="width: 100px;">Name</th>
        <th style="width: 100px;">type</th>
        <th style="width: 50px;">default</th>
        <th>description</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>startDateOptions</td>
        <td>object</td>
        <td>{}</td>
        <td>Attributes used to configure the datepicker object. All options for datepicker are available and they can
          be found in the <a href="#datepicker-usage-options">datepicker documentation</a>.</td>
      </tr>
      <tr>
        <td>endDateOptions</td>
        <td>object</td>
        <td>{}</td>
        <td>This option can be set but will only be used if the event is repeated. Attributes used to configure the datepicker object.
          All options for datepicker are available and they can
          be found in the <a href="#datepicker-usage-options">datepicker documentation</a>.</td>
      </tr>
      <tr id="scheduler-usage-options-start-date-changed">
        <td>startDateChanged</td>
        <td>function</td>
        <td>undefined</td>
        <td>As of 3.11.5, Function to be run when the start date is changed. Currently <code>this._guessEndDate();</code> is called, but, if you pass
        a function, your function will be called instead. Your function can call <code>this._guessEndDate();</code> at any point from
        within the function to take advantage of the pre-built Guess End Date AI. <a href="{{ site.repo }}/blob/{{ site.current_version }}/js/scheduler.js">See the code for details</a>. <a href="https://jsfiddle.net/cmcculloh/urcrge74/">Example here</a>.</td>
      </tr>
      </tbody>
    </table>
  </div><!-- ./fu-table-responsive -->

  <h3 id="scheduler-usage-methods">Methods</h3>
  <p>Once your scheduler is <a href="#scheduler-usage-javascript">initialized</a>, you can execute any of the following methods on it:</p>

  <dl>
    <dt id="scheduler-usage-methods-destroy">.scheduler('destroy')</dt>
    <dd>Removes all functionality, jQuery data, and the markup from the DOM. Returns string of control markup.</dd>

    <dt id="scheduler-usage-methods-disable">.scheduler('disable')</dt>
    <dd>Ensure all scheduler form fields are disabled</dd>

    <dt id="scheduler-usage-methods-enable">.scheduler('enable')</dt>
    <dd>Ensure all scheduler form fields are enabled</dd>

    <dt id="scheduler-usage-methods-value">.scheduler('value')</dt>
    <dd>Gets or sets the current scheduler form field information
  {% highlight js %}$('#myScheduler').scheduler('value');{% endhighlight %}
  {% highlight js %}$('#myScheduler').scheduler('value', {
  startDateTime: '2014-03-31T03:23+02:00',
  timeZone: {
    offset: '+02:00'
  },
  recurrencePattern: 'FREQ=MONTHLY;INTERVAL=6;BYDAY=WE;BYSETPOS=3;UNTIL=20140919;'
});{% endhighlight %}

      <div class="table-responsive">
        <table class="table table-bordered table-striped">
          <thead>
            <tr>
              <th style="width: 150px;">Parameter</th>
              <th>Description</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>startDateTime</td>
              <td><em>Required.</em> String representing the start date &amp; time in <a href="https://www.w3.org/TR/NOTE-datetime">ISO 8601 format</a>.</td>
            </tr>
            <tr>
              <td>timeZone</td>
              <td><em>Optional.</em> <code>String</code> or <code>Object</code> (as <code>{name: 'value'}</code> or <code>{offset: '+00:00'}</code>) used for method call to <a href="#selectlist-usage-methods-select-by-selector"><code>selectBySelector()</code></a> on <a href="#scheduler"><code>scheduler</code></a>'s Timezone <a href="#selectlist"><code>selectList</code></a>. Whatever is passed in will be passed along to <a href="#selectlist-usage-methods-select-by-selector">selectlist.selectBySelector(value)</a>. If a <code>String</code> is passed, it will be passed along <em>as-is</em>. If an <code>Object</code> is passed, <code>name</code> will be passed along if present, otherwise <code>offset</code> will be passed along <strong><em>but never both</em></strong>.</td>
            </tr>
            <tr>
              <td><em>recurrencePattern</em></td>
              <td><em>Optional.</em> String representing the <a href="https://www.kanzaki.com/docs/ical/recur.html">iCal recurrence value</a>.</td>
            </tr>
          </tbody>
        </table>
      </div><!-- ./fu-table-responsive -->
    </dd>
  </dl>

  <h3 id="scheduler-usage-events">Events</h3>
  <div class="table-responsive">
    <table class="table table-bordered table-striped">
      <thead>
        <tr>
          <th style="width: 150px;">Event Type</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>changed.fu.scheduler</td>
          <td>This event fires when the user changes any setting.</td>
        </tr>
      </tbody>
    </table>
  </div><!-- ./fu-table-responsive -->
  <p>All scheduler event listeners should be attached to the element containing the <code>scheduler</code> class. Given the above <a href="#scheduler-usage-markup">example markup</a>, you would attach event listeners thusly:</p>
  {% highlight js %}$('#myScheduler').on('changed.fu.scheduler', function () {
  // do something
});{% endhighlight %}

  <h3 id="scheduler-dependencies">Fuel UX Dependencies</h3>
  <ul>
    <li><a href="#combobox">Combobox</a></li>
    <li><a href="#datepicker">Datepicker</a></li>
    <li><a href="#radio">Radio</a></li>
    <li><a href="#selectlist">Selectlist</a></li>
    <li><a href="#spinbox">Spinbox</a></li>
  </ul>

  <h2 id="scheduler-examples">Examples</h2>
  <h3 id="scheduler-examples-static">Static example</h3>
  <p>The following static scheduler displays all components simultaneously (start date and time, timezone, and all recurrence and recurrence end options) for illustration purposes only.</p>
  <div class="fu-example fu-example-scheduler">
    <fieldset id="mySchedulerStatic" class="form-horizontal container-fluid scheduler" role="form">
    {% include js/scheduler-example.html %}
    </fieldset>
  </div><!-- /example -->

  <h3 id="scheduler-examples-live-demo">Live demo</h3>
  <div class="fu-example section">
    <div class="form-horizontal container-fluid scheduler" data-initialize="scheduler" role="form" id="myScheduler">
    {% include js/scheduler-example.html %}
    </div>

    <br/>
    <h5>Sample Methods</h5>
    <div class="btn-group">
        <button type="button" class="btn btn-default" id="btnSchedulerEnable">enable</button>
        <button type="button" class="btn btn-default" id="btnSchedulerDisable">disable</button>
        <button type="button" class="btn btn-default" id="btnSchedulerLogValue">log value</button>
        <button type="button" class="btn btn-default" id="btnSchedulerSetValue">set value to the following schedule</button>
        <button type="button" class="btn btn-default" id="btnSchedulerDestroy">destroy and append</button>
    </div>

  </div><!-- /example -->
  <div class="truncate-highlight">
  {% highlight html %}
<div class="form-horizontal container-fluid scheduler" data-initialize="scheduler" role="form" id="myScheduler">
{% include js/scheduler-example.html %}
</div>
  {% endhighlight %}
  </div>
</div>