jquery-sked-tape

Schedule component for jQuery that represents events in tape manner.

DEMO

API

Preface

Take in mind that SkedTape takes dates in UTC timezone and shows them the same way.

Initialization

Usually it looks like:

var $sked = $('#sked').skedTape({
    caption: 'Cities',
    start: yesterday(22, 0), // Timeline starts this date-time (UTC)
    end: today(12, 0),       // Timeline ends this date-time (UTC)
    showEventTime: true,     // Whether to show event start-end time
    showEventDuration: true, // Whether to show event duration
    locations: [
        {id: 1, name: 'San Francisco'}, // required properties only
        {
            id: 'london',
            name: 'Sydney',
            order: 1, // optional sorting order
            userData: {...} // optional some custom data to store
        },
        ...
    ],
    events: [
        {
            name: 'Meeting 1',
            location: 'london',
            start: today(4, 15),
            end: today(7, 30)
        },
        // ...
    ]
});

Available constructor options:

• locations (object) Maps location-id -> location-name.
• events (Array) An array of event objects (see description below).
• start, end (Date) Timeline is shown between these date-times.
• caption (string) The text in left top corner. Default is ''.
• maxZoom (float) Self-explanatory. Default is 10.
• zoomStep (float) Zoom up and down increment value. Default is 0.5.
• zoom (float) Initial zoom level. Minimum possible and default value is 1.
• showEventTime (bool) Whether to show from-to dates in entries. Default is false.
• showEventDuration (bool) Whether to show duration in entries. Default is false.
• showDates (bool) Whether to show dates bar. Default is false.
• minGapTime (int) Minimum gap between entries to show minutes in milliseconds. Default is 1min.
• maxGapTime (int) Maximum gap between entries to show minutes in milliseconds. Default is 30min.
• minGapHiTime (int|false) Minimum gap to DO NOT highlight adjacent entries in milliseconds. Default is false.
• formatters (object) Custom date/time formatters. See the notes below.
• scrollWithYWheel (bool) Enables horizontal timeline scrolling with vertical mouse wheel. Default is false.
• tzOffseet (int) Current timezone offset that affects time indicator line position.

Available event object options:

• name (string)
• location (int|string) Location id (key in locations object).
• start, end (Date)
• url (string) If set the entry will be rendered as anchor with href=url.
• className (string) Additional class name for stylizing purposes.
• disabled (bool) Adds the sked-tape__event--disabled class. Default is false.
• data (object) The data to set with $.data() method. The eventId is reserved.
• userData (object) Any custom data you may store here.

Events

Plugin-specific event handlers may be added like this:

// The following handler fires on clicking on an event:
$sked.on('event:click.skedtape', function(e/*, api*/) {
    $sked.skedTape('removeEvent', e.detail.event.id);
    // api.removeEvent(e.detail.event.id)
    // assert(api === e.detail.component)
});

Available events:

• intersection:click.skedtape

• intersection:contextmenu.skedtape

• timeline:click.skedtape

• timeline:contextmenu.skedtape

• event:click.skedtape The detail property contains corresponding event object.

• event:contextmenu.skedtape The detail property contains corresponding event object.

• event:dragStart.skedtape

• event:dragStarted.skedtape

• event:dragEnd.skedtape

• event:dragEnded.skedtape

• event:dragEndRefused.skedtape

• skedtape:event:dragCanceled

• skedtape:event:addingCanceled

The props in common for all click event/contextmenu events:

• detail.locationId
• detail.date Click position converted to datetime on timeline.
• relatedTarget
• pageX, offsetX, etc

Custom date/time formatting

To change the way dates are displayed by plugin there're two cases. You may fill up the formatters property during the constructing of every component. And also you may change default settings globally, replacing the formatters within the $.fn.skedTape.format object. ATTENTION Do not replace the object itself - it won't work.

Development deploy

1. npm i -g gulp-cli
2. npm i
3. gulp build (AOT) or gulp (JIT)