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

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.

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

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.

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

Related