Zoomable & Scrollable Schedule Component For jQuery - skedTape

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.

How to use it:

1. Add references to jQuery library and the jQuery skedTape plugin's files.

<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>

2. Create an array of events objects containging names, locations, and start/end times.

// helpers
function today(hours, minutes) {
  var date = new Date();
  date.setUTCHours(hours, minutes, 0, 0);
  return date;
}
function yesterday(hours, minutes) {
  var date = today(hours, minutes);
  date.setTime(date.getTime() - 24 * 60 * 60 * 1000);
  return date;
}
function tomorrow(hours, minutes) {
  var date = today(hours, minutes);
  date.setTime(date.getTime() + 24 * 60 * 60 * 1000);
  return date;
}
// events
var events = [
    {
        name: 'Meeting 1',
        location: 'london',
        start: today(4, 15),
        end: today(7, 30),
        url: null,
        class: '', // extra class
        disabled: false, // is disabled?
        data: {}, // data to set with $.data() method
        userData: {} // custom data
    },
    {
        name: 'Meeting 2',
        location: 'london',
        start: today(7, 30),
        end: today(9, 15)
    },
    {
        name: 'Meeting',
        location: '1',
        start: today(10, 0),
        end: today(11, 30)
    },
    // more events here
];

3. Create a location object which will be displayed in the Y axis.

var locations = {
    '1': 'San Francisco',
    '2': 'Sydney',
    '3': 'New York',
    'london': 'London',
    '5': 'Copenhagen',
    '6': 'Berlin'
};

4. Render the schedule timeline on the webpage.

<div id="container">
  ...
</div>

var mySchedule = $('#container').skedTape({
    caption: 'Cities',
    start: yesterday(22, 0),
    end: today(12, 0),
    showEventTime: true,
    showEventDuration: true,
    scrollWithYWheel: true,
    locations: locations,
    events: events,
    formatters: {
        date: function (date) {
            return $.fn.skedTape.format.date(date, 'l', '.');
        },
        duration: function (start, end, opts) {
            return $.fn.skedTape.format.duration(start, end, {
                hrs: 'ч.',
                min: 'мин.'
            });;
        },
    }
});

5. Options and defaults.

/**
* caption text
*/
caption: '',
/**
* Max zoom level
*/
maxZoom: 10,
/**
* Default zooming up and down increment/decrement value.
*/
zoomStep: 0.5,
/**
* Initial zoom level. Minimum possible value is 1.
*/
zoom: 1,
/**
* Whether to show from-to dates in entries.
*/
showEventTime: false,
/**
* Whether to show duration in entries.
*/
showEventDuration: false,
/**
* Whether to show dates bar.
*/
showDates: true,
/**
* Minimum gap between entries to show minutes.
*/
minGapTime: 1 * MS_PER_MINUTE,
/**
* Maximum gap between entries to show minutes.
*/
maxGapTime: 30 * MS_PER_MINUTE,
/**
* Minimum gap to DO NOT highlight adjacent entries.
*/
minGapHiTime: false,
/**
* Enables horizontal timeline scrolling with vertical mouse wheel.
*/
scrollWithYWheel: false

6. Event handlers available.

/*  props:
    detail.locationId
    detail.date Click position converted to datetime on timeline.
    relatedTarget
    pageX, offsetX, etc
*/
mySchedule.on('skedtape:event:click', function(e) {
  // on click
});
mySchedule.on('skedtape:event:contextmenu', function(e) {
  // on right click
});
mySchedule.on('skedtape:timeline:click', function(e) {
  // on timeline click
});

This awesome jQuery plugin is developed by lexkrstn. For more Advanced Usages, please check the demo page or visit the official website.