Zoomable & Scrollable jQuery Schedule Plugin – jquery-sked-tape

by Posted on

Today I am going to share highly customizable jQuery Plugin which help you to create Zoomable & Scrollable jQuery Schedule management system for your web based application. The jQuery skedTape generates a dynamic, zoomable and scrollable timeline to visualize scheduled events/tasks in a timesheet manner.



Features:

  • Allows to adjust the zooming level of the timeline using +/- keys.
  • Allows to scroll through the timeline with mouse wheel.
  • Allows to show/hide the duration in entries.
  • Allows to show/hide the date bar.
  • Useful event handlers.

jquery-schedule-plugin

Libraries

Add the following libraries on page.

<link rel="stylesheet" href="jquery.skedTape.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="jquery.skedTape.js"></script>

HTML

Create html container to display scheduler

<div id="scheduler">
 
</div>

JS

Call the plugin and display scheduler.

var $sked = $('#scheduler').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.

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.
  • class (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.

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by lexkrstn. Visit their official github repository for more information and follow for future updates.


Published by admin